OpenGraph Plugin Configuration

Version 1

    Overview

     

    If one would desire to actually have useful information (title, description, image, etc.) come along with their Facebook sharing, then the only way to do this is with Open Graph meta tags in the header of all the pages you would like to share.  This is documented here:

     

     

    The issue is that currently there are no Open Graph tags associated with any of the Jive content.  In order to make the FB plugin a little more robust now that it has sharing, a new plugin was created to attempt to add Open Graph tags in all the right places.

     

    What it Does

     

    Pretty self explanatory ...  it adds the following Open Graph meta tags to any URL which displays a JiveContainer or a JiveContentObject.  Here are the tags that are included:

     

    • og:title
      • JiveContainer = container name
      • JiveContentObject = content subject text
    • og:description
      • JiveContainer = container description
      • JiveContentObject = body text, up to 500 characters
    • og:type
      • currently only returns "article" since this is most applicable to our content
    • og:url
      • the URL of the current Jive object being viewed
    • og:site_name
      • defaults to a new system property:  jive.opengraph.site
      • failover to Jive site name, 'sbs' by default
    • og:image (a list of images)
      • if specified, includes an image referenced by a new system property:  jive.opengraph.image
      • if applicable, includes an image as returned by JiveResourceResolver.getJiveObjectIcon
      • if object is of type ImageContentResource, includes a URL to any embedded images in the content
    • fb:app_id (must user either app_id or admins, app_id takes precedence)
      • uses value contained in a new system property:  jive.opengraph.app
      • this is the FB app used across the site
    • fb:admins
      • uses value (a comma-delimited string) contained in a new system property:  jive.opengraph.admins
      • this is the list of FB user IDs which administer the site

     

    What it Looks Like

     

    Here is a sample document source showing the inclusion of the Open Graph meta tags:

     

       

    <!-- Begin: OpenGraph Metadata -->

     

        <meta property="og:title" content="About Getting Started" />

        <meta property="og:description" content="There is where you get started doing things.  And by things I mean those things that you should be doing on a daily basis.  What follows is a document that describes, in gruesome detail, how to do those things.  Would you like to know what things I am talking about?  Would you like me to stop saying the word things and tell you what those things are?  Okay...    Enough words, now let me show you exactly how you get started.  First you start with something like" />

        <meta property="og:type" content="article" />

        <meta property="og:url" content="http://fbapp.ps.jivesoftware.com/docs/DOC-1011" />

        <meta property="og:site_name" content="Jive PS" />

        <meta property="og:image" content="http://fbapp.ps.jivesoftware.com/plugins/opengraph/resources/images/jive-logo-black.png" />

        <meta property="og:image" content="http://fbapp.ps.jivesoftware.com/images/jive-icon-wiki-16x16.gif" />

        <meta property="og:image" content="http://fbapp.ps.jivesoftware.com/servlet/JiveServlet/downloadImage/102-1011-2-1003/muttley.jpg" />

        <meta property="og:image" content="http://fbapp.ps.jivesoftware.com/servlet/JiveServlet/downloadImage/102-1011-2-1002/dos-equis.jpg" />

        <meta property="og:image" content="http://fbapp.ps.jivesoftware.com/servlet/JiveServlet/downloadImage/102-1011-2-1001/Atari_2600.png" />

        <meta property="fb:app_id" content="211319802232097" />

     

        <!-- End: OpenGraph Metadata -->

     

    How to Set It Up

     

    Install the plugin and add the following system properties:

    • jive.opengraph.site - optionally specify a site name to use, other than jive.name
    • jive.opengraph.image - optionally specify a global site image to include in the list of images
    • *jive.opengraph.app - FB app ID for the site (must user either app or admins, app takes precedence)
    • *jive.opengraph.admins - comma-separated list of FB user IDs to use in lieu of app ID

     

    Note: only one of the last two are the only required properties.  The rest are optional.

     

    Customize/theme the template.ftl decorator to contain the following line, preferably just underneath the inclusion of header-meta.ftl:

    <@s.action name="opengraph-include" executeResult="true" ignoreContextParams="true" />

     

    Do take note here, that in order to allow this to all be done in a plugin, the meta tags must be rendered server side, in an FTL, and the most convenient place to do this is in the template.ftl, and thus requires the use of a theme.  Without activating a theme, an overlay containing the template.ftl is the other, more invasive option.

     

    Summary

     

    All in all this is a pretty lightweight way to add Open Graph meta tags to all Jive content and makes for much richer Facebook sharing.  This doesn't just apply to the Facebook plugin itself, anyone who is doing any type of social sharing, via Facebook, in a public community may want to have a look at this.