Integrate your web pages into a social graph with Open Graph Protocol

The Composite.Web.Html.Meta.OpenGraphProtocol package adds the Open Graph Protocol meta tags to a page, which allows its integration into the Facebook's social graph.

Open Graph tags are <meta> tags, in the <head> of a web page, that describe the entity your page represents (whether it is a band, restaurant, blog, or something else) and provides other information for the Facebook's social graph.

 
  <meta property="og:title" content="Contoso" /> 
  <meta property="og:type" content="website" /> 
  <meta property="og:url" content="http://www.contoso.com" /> 
  <meta property="og:image" content="http://www.contoso.com/media/5962dbad-f342-46fc-8809-3e4fa5e521a8/logo.jpg" /> 
  <meta property="og:description" content="..." /> 

For more information on Open Graph tags, please read: http://developers.facebook.com/docs/opengraph/

Implementing Open Graph Protocol

It takes two steps to implement the Open Graph Protocol meta tags on your website:

  1. Adding Open Graph Protocol Meta Tags via the ad-hoc page meta type
  2. Adding the function to render the meta data on the page

Adding Open Graph Protocol meta tags

  1. Right-click a page and click Add metadata field.
  2. Add the Open Graph Protocol Meta Tags meta type to a page and specify the scope of their use (starting page, whether to inherit on sub pages).
  3. Edit a page with this meta data and fill out the fields:
    • Type: The type of your object. Default is 'website' (please see "Object Types").
    • Title: The title of your object as it should appear within the graph. Default is current page title.
    • Image: The URL to an image that represents your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. Supported formats: PNG, JPEG and GIF.
    • Description: A one to two sentence description of your page. Default is current page description.
  4. Save the changes.

Adding the Open Graph Protocol function

  1. Edit a page where you want the tags to appear or a page template the pages are based on.
  2. Add the  Composite.Web.Html.Meta.OpenGraphProtocol function ( Insert > Function) or insert the similar code on the page/template:
      
     
<f:function name="Composite.Web.Html.Meta.OpenGraphProtocol" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="SiteName" value="Composite C1 CMS" /> 
  <f:param name="FacebookAdmins" value="100002519440680" /> 
  <f:param name="FacebookApplicationIDs" value="100002519440653" /> 
</f:function>

  3. If necessary, specify optional parameters:
    • SiteName: A human-readable name for your site.
    • FacebookAdmins: A comma-separated list of IDs of the Facebook users who administer this page. You must set this parameter if you want to use the Open Graph Protocol meta tags with the Like button.
    • FacebookApplicationIDs: A comma-separated list of Facebook Platform application IDs if used.

Important Notes

  • You must specify one or more IDs of Facebook users that administer the page in the Admins parameter if you want to use the Open Graph Protocol meta tags with the Like button.

Requirements

Composite C1 version 3.0 or later

SHARE