Facebook Open Graph Tech RequirementsDocument Transcript
Beyond Community.™Open Graph Technical Requirementsby Rob Marscher <email@example.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.
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.
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
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/