Work with the Open Graph tagging for Facebook integration

The Open Graph protocol is developed by Facebook to help understand how to best present a web page when posted to Facebook. Open Graph Protocol <meta> tags are added to the <head> of your web site. The tags let Facebook know to add your page as an interest in the Activities and Interests section of your Facebook profile as well as how best to present your page with a name, picture, and short description.

Open Graph:

  • Integrates your web pages into the social graph
  • Defines how your page is represented on Facebook
  • Makes your page equivalent to a Facebook Page
  • Makes your page appear in the "Likes and Interests" section of the user's profile
Facebook looks for these tags:
  • Every 24 hours to know how to display the page and ensure that the properties are up to date
  • When an administrator for the Open Graph page clicks the Like button
  • When the URL is entered into the Facebook URL

Sample tags for a Low maintenance battery:

<meta property="og:title" content="Product: Low maintenance battery" /> 
<meta property="og:type" content="product"/>
<meta property="og:image" content="http://host.com/wcsstore/ExtendedSitesCatalogAssetStore/images/logo.gif" />
<meta property="og:url" content="http://host.com/webapp/wcs/stores/servlet/en/auroraesite/low-maintenance-battery"/>
<meta property="fb:app_id" name="fb_app_id" content="176261415784600"/>
Where
title
The name of the store or product
type
The type of page indexed (in the case of a store, either the home or product page): product, home
image
An image URL of the store or product to be displayed on Facebook
url
The canonical url of the page, so other Facebook users can click on the url to be directed to your store
fb:app_id
The Facebook application ID
Optional parameters include the following:
og:site_name
A human-readable name for your site
og:description
A one to two sentence description of your page
For more information, see Open Graph