Facebook Open Graph Tech Requirements
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,388
On Slideshare
2,388
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Beyond Community.™Open Graph Technical Requirementsby Rob Marscher <rmarscher@beaffinitive.com>last updated: 2011/05/04see http://developers.facebook.com/docs/opengraph for complete documentationHere are three steps to get your site integrated with Facebook’s Open Graph. Following these steps willallow you to properly place Like Buttons and other Facebook social plugins on your site and make your site’scontent easily discoverable and sharable by the millions of users registered with Facebook.Step 1: Register Your Site as an AppYou must first have a confirmed account on Facebook in order to have the ability to create apps. This is thesame as a regular personal account, except you have confirmed you are a real person by adding either creditcard information or a mobile phone. Note that according to Facebook policies, your account should haveyour real first and last names (see Statement of Rights and Responsibilities (SRR 4.1)). Facebook says “Ifwe find that your app has fake accounts listed as an admin or developer we will disable your app.”To register your site as an app, visit here http://developers.facebook.com/setup/ and enter the site name anddomain. You will then receive an app id and secret key. This will be important later. You can always accessand edit information about your Facebook applications by visiting https://facebook.com/developers (this pageis referred to as the “Developer App”).Step 2: Update Meta TagsHTML TagThe <html> tag should contain the xmlns:og="http://opengraphprotocol.org/schema/" and xmlns:fb="http://www.facebook.com/2008/fbml" namespacesexample:<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">Meta TagsMust have the following meta tags. Note: normally meta tags have name and content attributes. With OpenGraph, its property and content attributes. A common pitfall is to use a name attribute instead of a propertyattribute.Title<meta property=”og:title” content=”My Wicked Product” />The name of your product, page, or site.
  • 2. Beyond Community.™"Canonical" URL<meta property=”og:url” content=”http://www.example.com/products/my-wicked-product” />This is important. It is the permanent ID in the open graph. It must be a permanent url that represents theproducts home on the internet - or at least where you want to drive the traffic. If you redesign your site andchange the urls, youll lose all of your "likes" because Facebook cant reach the url anymore.Type<meta property=”og:type” content=”product” />A complete list of types is available here: http://developers.facebook.com/docs/opengraph#typesPages of your site which aren’t for a specific product can use “website.” If the page is for a blog post orsome other type of article, then use “article.” Again, refer to the link above for more information. Use themost specific type available as it will make the product appear in the appropriate place of the user’s profile onFacebook:Image<meta property=”og:image” content=”http://example.com/images/products/my_wicked_product.jpg” />A URL to a your product image. The image must be at least 50px by 50px and have amaximum aspect ratio of 3:1. If this isn’t on a page for a specific product, it could be a url toyour company logo. This image shows up in people’s feeds on Facebook when they like yourpage.It is also possible to include a Flash movie in addition to a static image. See http://developers.facebook.com/docs/opengraph/#audiovideo for more details.
  • 3. Beyond Community.™Description<meta property=”og:description” content=”A one to two sentence description of my page orproduct would go in here. If it’s your site’s home, page it would be about the site asa whole.” />A one or two sentence description of your product or page.Site Name<meta property=”og:site_name” content=”My Wicked Company” />Facebook requires this. Its the name of your site.Facebook App ID<meta property=”fb:app_id” content=”7612671316” />This links your page with the app you created in step 1. All app developers are automatically given accessto manage Open Graph interactions with the page (i.e. moderate comments, message people that like thepage, etc). They can also access Insights for the page (see https://facebook.com/insights). Note that themeta property begins with fb instead of og.Facebook Page ID<meta property=”fb:page_id” content=”7228566345” />This is optional… but allows admins of your Facebook page to have similar ability to app admins to moderatecomments, message people that like the page, and access Insights.Checking Your Meta Tagshttp://developers.facebook.com/tools/lint/Before you go and add social plugins, you should first get the Open Graph meta tags in place and updatedon the live site. You can then use the "Facebook URL Linter" to see how Facebook sees your page andmake sure that everything is correct. It’s much better to get it correct before people start liking your page,but if you do make any changes to your Open Graph tags, putting the url in the Facebook URL Linterwill get them to update the tags for your page. If you need to do this for many pages, it can be doneprogrammatically. See http://developers.facebook.com/docs/opengraph/#edit
  • 4. Beyond Community.™Step 3: Add Facebook Javascript SDK and Social PluginsJavascript SDK and XFBMLThe Facebook javascript SDK lets you place "XFBML" tags on your site to insert "social plugins" such as "likebuttons" onto your page.Insert the following after the opening <body> tag at the top of the page:<div id="fb-root"></div><script> window.fbAsyncInit = function() { FB.init({appId: your app id, status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement(script); e.async = true; e.src = document.location.protocol + //connect.facebook.net/en_US/all.js; document.getElementById(fb-root).appendChild(e); }());</script>Note: dont forget to replace your app id above with the actual app id for the site.Like Buttons / Social Pluginshttp://developers.facebook.com/docs/reference/plugins/likeNow you can go about adding Like Buttons for your products. The same Like Button code can be placed onas many pages (or sites) as you like. They use the href attribute to all refer to the page you placed the metatags on and thats how Facebook knows they are for the same product.We recommend using the javascript/XFBML version of the Like Button embed code because this allowspeople to add a comment directly when they like a product and this shows up in their feed (and their friendsfeeds). This personalizes the feed story and increases the chance of friends clicking to visit the page. Theiframe version of the Like Button embed code only gives the option for adding a comment if the iframe widthis at least 400px. Therefore, only use the iframe version for pages where you cannot include the JavascriptSDK as shown in the section above.There are several attributes for the Like Button that allows you to style it. The only required/importantattribute is href (which should match the og:url property from the meta tags you set earlier).In April 2011, Facebook introduced the Send Button which allows people to share your page with specificfriends and groups through a private message or email. Some people may be more inclined to share yourpage this way than to click “Like” which is a more public action.
  • 5. Beyond Community.™Once you have your Like Buttons setup and people are interacting with them, you might want to adda Recommendations plugin to highlight what your friends have liked on the site (or the Facebookcommunity as a whole if no friend data was found). http://developers.facebook.com/docs/reference/plugins/recommendationsConclusionThats about it for the steps required to get started with Open Graph. From here, admins of the "app"associated with the site or brand page can pull statistics and publish updates to those that have "liked" theproducts. See this blog post for more details on how to do that: http://developers.facebook.com/blog/post/465 In fact, we highly recommend subscribing to the Facebook Developer Blog to receive all of the latestupdates on the Facebook Platform - http://developers.facebook.com/blog/