The Open Graph Protocol was initially created by Facebook and is used to integrate the web pages or blogs with social graph. What that means is that you can actually click on the “Like” button provided on the top (or bottom) of the article and in the process recommend it to other people. It has other options also and if implemented fully, user is also able to comment on that particular piece of article, which shall be shared on Facebook profile also. Its quite popular nowadays as such and almost all the sites have started implementing this in order to “collect” more likes or recommendations. Here’s how you can implement it in your website.
To implement the Open Graph Protocol in you web page, you need to add RDFa formatted metatags to the start of your HTML pages.
Please see the example given below for IMDB
<html xmlns:og="http://opengraphprotocol.org/schema/"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> ... </head> <body> ... </body> </html>
As you can see in the above example, four properties are essentially used. They are:
Object title as it should appear on your web page (within the graph). In this case “The Rock”.
Object type that you intend to use. In this case “movie” has been used. There are more object types possible such as city, country, album etc.
It’s the URL of the image, which symbolizes the object inside your graph. Please note that the size of your image should be at least 50px by 50px for display to take place properly. The maximum aspect ratio supported is 3:1. Supported formats are PNG, JPEG and GIF. If you wish you can relate multiple og:image tags to relate multiple images.
It’s the object URL that is used as its permanent ID for the Graph.
Adding Like Button
Once the metatags has been configured and put in place, it’s easy to add like button. Use the code snippet as shown below:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
Like the examples used above, quite a lot are possible using the Open Graph Protocol. For more information on OGP and additional usage, Please visit OGP website.
Facebook Open Graph Plugin for Wordpress
People who are using WordPress, there is some good news. You need no go into intricacies of programming, since there is already a plugin available for Facebook integration. You just need to configure that plugin in an easy to understand GUI interface, and everything else shall be taken care of. To download and install the plugin, You can download the WordPress Open Graph Meta Plugin here.
Please note that the WordPress version 3.0 or higher is required for this plugin to work appropriately. The good part with this plugin is that it automatically adds metadata to your page/website code so that there are no thumbnail image, wrong description or other issues. The version of this plugin currently available is 0.2.