Difference between revisions of "Facebook Open Graph Integration"

Latest revision as of 11:28, 15 August 2013

What is Facebook Open Graph Protocol?

The Open Graph protocol enables you to integrate your web pages into the social graph. It is currently designed for web pages representing profiles of real-world things — things like movies, sports teams, celebrities, and restaurants. Once your pages become objects in the graph, users can establish connections to your pages as they do with Facebook Pages. Based on the structured data you provide via the Open Graph protocol, your pages show up richly across Facebook: in user profiles, within search results and in News Feed. Click link here to read more details about Facebook Open Graph.

How to integrate?

The Open Graph protocol defines five required properties:

   * og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
   * og:type - The type of your object, e.g., "movie". See the complete list of supported types.
   * og:image - An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.
   * og:url - The canonical URL of your object that will be used as its permanent ID in the graph.
   * og:site_name - A human-readable name for your site, e.g., "IMDb"
   * fb:admins or fb:app_id - A comma-separated list of either Facebook user IDs or a Facebook Platform application ID that administers this page.

All you needed is to create meta tag for each the above six items. Fox example for AbleCommerce we want to give the customers ability to use Facebook like option on product pages. In order to achieve this first of all we need to emit meta tags for above six items on product page. Also we need to make use of IFrame method to show Like button on the page as well.

As AbleCommrce generates the product details page dynamically so we need to sum with some way to generate these meta tags on run time for each product. Product pages makes use of NVelocity scripts so we can access above information using NVelocity or a better way could be to simply create a new ConLib control for this purpose. That control in turn can generate and register meta tags and IFrame on current product page.

I have done this integration with second apprach and created a ConLib user control for this purpose. You can find the control source from this forums thread.

You can use this control very easily. All you need is to place the control under ConLib/Custom folder and then use it on your product page like any other ConLib control. Details about supported properties on this control and a usage example is available in same forums thread from where you will download the source of this control.