facebook open graph tech requirements
TRANSCRIPT
Beyond Community.™
Open Graph Technical Requirementsby Rob Marscher <[email protected]>last updated: 2011/05/04see http://developers.facebook.com/docs/opengraph for complete documentation Here are three steps to get your site integrated with Facebook’s Open Graph. Following these steps will allow you to properly place Like Buttons and other Facebook social plugins on your site and make your site’s content 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 the same as a regular personal account, except you have confirmed you are a real person by adding either credit card information or a mobile phone. Note that according to Facebook policies, your account should have your real first and last names (see Statement of Rights and Responsibilities (SRR 4.1)). Facebook says “If we 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 and domain. You will then receive an app id and secret key. This will be important later. You can always access and edit information about your Facebook applications by visiting https://facebook.com/developers (this page is referred to as the “Developer App”).
Step 2: Update Meta Tags
HTML TagThe <html> tag should contain the xmlns:og="http://opengraphprotocol.org/schema/" and xmlns:fb="http://www.facebook.com/2008/fbml" namespaces example:<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 Open Graph, it's property and content attributes. A common pitfall is to use a name attribute instead of a property attribute. 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 the product's home on the internet - or at least where you want to drive the traffic. If you redesign your site and change the urls, you'll lose all of your "likes" because Facebook can't 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#types Pages of your site which aren’t for a specific product can use “website.” If the page is for a blog post or some other type of article, then use “article.” Again, refer to the link above for more information. Use the most specific type available as it will make the product appear in the appropriate place of the user’s profile on Facebook:
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 a maximum aspect ratio of 3:1. If this isn’t on a page for a specific product, it could be a url to your company logo. This image shows up in people’s feeds on Facebook when they like your
page.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 or
product would go in here. If it’s your site’s home, page it would be about the site as
a 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. It's 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 access to manage Open Graph interactions with the page (i.e. moderate comments, message people that like the page, etc). They can also access Insights for the page (see https://facebook.com/insights). Note that the meta 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 moderate comments, 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 updated on the live site. You can then use the "Facebook URL Linter" to see how Facebook sees your page and make 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 Linter will get them to update the tags for your page. If you need to do this for many pages, it can be done programmatically. See http://developers.facebook.com/docs/opengraph/#edit
Beyond Community.™
Step 3: Add Facebook Javascript SDK and Social Plugins
Javascript SDK and XFBMLThe Facebook javascript SDK lets you place "XFBML" tags on your site to insert "social plugins" such as "like buttons" 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: don't 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 on as many pages (or sites) as you like. They use the href attribute to all refer to the page you placed the meta tags on and that's how Facebook knows they are for the same product. We recommend using the javascript/XFBML version of the Like Button embed code because this allows people to add a comment directly when they like a product and this shows up in their feed (and their friends' feeds). This personalizes the feed story and increases the chance of friends clicking to visit the page. The iframe version of the Like Button embed code only gives the option for adding a comment if the iframe width is at least 400px. Therefore, only use the iframe version for pages where you cannot include the Javascript SDK as shown in the section above. There are several attributes for the Like Button that allows you to style it. The only required/important attribute 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 specific friends and groups through a private message or email. Some people may be more inclined to share your page this way than to click “Like” which is a more public action.
Beyond Community.™
Once you have your Like Buttons setup and people are interacting with them, you might want to add a Recommendations plugin to highlight what your friends have liked on the site (or the Facebook community as a whole if no friend data was found). http://developers.facebook.com/docs/reference/plugins/recommendations
ConclusionThat's 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" the products. 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 latest updates on the Facebook Platform - http://developers.facebook.com/blog/