Using the open graph protocol allows your website to act as a Facebook page. The obvious benefit is that people will ‘Like’ your website and not a page hosted on the Facebook domain.

Many websites are now featuring a Like Box (as standard) to show visitors how many people have actually ‘Liked’ their page. I wanted to integrate this functionality into my blog but without the need of creating a page on Facebook.com first.

When visitors come to my site; I would prefer them to ‘Like’ the actual website (yourdomain.com) as oppose to a page which is hosted on the Facebook domain (facebook.com/page). By using the Open Graph Protocol you are able to make your own website act as a page; including access (and insights) to it through your Facebook account.  The added benefit is that you are able to insert messages into the news streams of anyone that has pressed the like button on your website.

How to implement this method on your website

There was a great post earlier this year from Malcolm Coles who outlined the process in more depth but my aim today is to give you a quick and easy implementation guide so that you can set up your own Like Box (like the one on this blog —>) using the open graph protocol.

• Add meta data to your homepage so that Facebook can read your website or blog as a fanpage. Use the OGP link above to help you define what to use for each meta property and replace each value below:

<meta property=”og:image” content=”AVATAR-IMAGE-URL”/>

<meta property=”og:site_name” content=”YOUR-SITE-NAME”/>

<meta property=”fb:admins” content=”YOUR-FB-ADMIN-ID“/>

<meta property=”og:title” content=”TITLE-LINKED-TO-URL”/>

<meta property=”og:type” content=”TYPE”/>

<meta property=”og:url” content=”URL”/>

<meta property=”og:description” content=”DESCRIPTION”/>

Once the meta values have been added to your page, you can use the handy Linter tool to validate the configuration.

Also, the best way to find out your Facebook ID is to add your page/profile address to the end of this URL:

http://graph.facebook.com/your-facebook-profile-address

• This is an example of what the above URL will display for my profile name:

Now that we have updated the homepage to provide enough meta information for Facebook to be able to interpret the website as a Facebook page, we can add the Social Plugin.

Even though we are not entering an actual Facebook page, the URL will display in the preview (like in the picture above) if the meta content is valid and correct on your website. You can then choose one of two options to embed the like box code which is either via an iFrame or XFBML. I used the later which will require additional modifications. This code can be added to where you want the Like Box to appear; in my case it is the sidebar.php file within WordPress.

• Next, add the Javascript SDK code to the footer of your pages (or footer.php for WordPress):

<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 that you can leave the application ID field blank; as it will work without this.

Summary

• This approach provides a nice way to engage with those who like your website or blog and also saves creating and managing an additional Facebook page.
• It also means that you likes are attributed to your personal website URL and not a ‘page’ on the Facebook domain.
• Each time you share a link from your blog via your Facebook account, it should also appear as an update in the news stream of anyone who has previously ‘liked’ your site.

Thank you for reading! Please leave any comments below and feel free to follow me on Twitter @DPGroom