The Facebook Open Graph protocol is not just a great way to access data remotely on Facebook, but also a really easy way to add meta data to your existing webpages. By adding additional information to your headers, you can change the title, url, share image, and even add media like videos and music. Open graph optimization is an important skill to understand, regardless of your Facebook implementation.

Register Your App (website)

http://developers.facebook.com/setup/ Registering your website will give you a unite App ID that you will be able to use for Insights data, as well as linking all your graph data to. You can find your apps ID and Secret key at any later time at http://www.facebook.com/developers/ if you decide later that you need the secret key. The secret key is used for some more advanced api calls and functionality.

URL Linter

http://developers.facebook.com/tools/lint/ Perhaps the most useful you will want to know about is URL Linter. It will parse your current site, and give you information on how it is seen on the graph. As you add additional meta data you can come back here to keep checking that it is working correctly. Every time you get the new information from the linter, it will recache your site with Facebook.

Open Graph Implementation

You'll find that the documentation on Open Graph is really well done, as long as you know where you are looking.

Open Graph documentation: http://developers.facebook.com/docs/opengraph/

To start, you will want to add some meta properties into the HEAD of your html document. The required properties are

• og:title - the title of your object. Bear in mind this will be unchangeble after it receives 50 likes.
• og:type - the type of the object. like movie, company, article, website, all types
• og:image - the image that people will see. it must be 50x50 and only PNG, GIF, or JPG. you can add multiple images to allow the user to select when sharing.
• og:url - the canonical url for the object. this will most likely be the current page url.

Other than the required tags, there are a couple that you should probably add.

• og:site_name - a human readable version of your site url
• fb:admins or fb:app_id - I suggest you enter your app id here instead of using your user id. You can get the app id after registering your site.
• og:description - the description of the object that will display on posts.

Here is a basic example of how I made Luma Pictures look on non media rich pages:

**Adding the like button

The easiest way to add a like button is to use the pre-made Facebook plugin.

Facebook Social Plugins / Like Button: http://developers.facebook.com/docs/reference/plugins/like/

The plugin generator is pretty self explanatory. I recommend using the xfmbl version, as it allows the user to add a comment to their wall. When including XFMBL with any page, you will need both the fb-root object, and to include the script source like this:

You can add this anywhere in your document, but I reccomend adding the script in the head, and the div in the body. Next you need to add the like button:

If you did everything right you should now have a like button! Check the URL Linter to see if all your tags are picked up, and if they are, go ahead and like your own page!

Keep in mind that if you are running locally, the like button may not show up.