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

There was a great post last week from Michael Gray on How to Get more Followers on Twitter. It featured some tips and advice on how to build your followers, as well as mentioning a few applications that can help you to achieve this. One of the programs which I have been checking out is called ManageFlitter.

A popular reason that drives users towards integrated apps is to take control of monotonous tasks that are time consuming (such as removing those who are not following you or grouping the influential people that you currently follow).

Manage Flitter is effectively a productive tool for filtering your Twitter account. TweetDeck has made it’s name for providing a way to sift through your social media channel’s but it does not have actionable commands like Manage Flitter that can help you configure your account. Best of all, some of the most useful features are available in the free version which includes the fast and easy unfollowing. Other features include:

• Cleaning up and managing those who you follow.
• Finding out who isn’t following you back.
• Finding out which inactive accounts you follow.
• Easily search inside your Twitter stream.

This makes routine tasks quick and easy using ManageFlitter but don’t forget Twitter’s Following Rules and Best Practices otherwise you could end up getting you account flagged if you start some mass following/unfollowing.

The purpose of it is to mix various social search signals into the Google results page based on relevance. For example, when I search for LinkedIn in the search page, it shows a small avatar and name of some of my connections in the style of a sitelink:

It also means when searching for a keyword such as ‘film‘ then the results page shows friends/follows that are within your social circle underneath each listing. In this case it shows that Mashable Mobile shared the following post on Twitter on 13/05/11:

I have not seen it working in Firefox at present but it is certainly appear using Chrome.