Setup Facebook Like Button and Like Box

07 May 2010

I recently added a Like Button and Like Box to LesleyWilliamson.com. This is part of their new set of Social Plugins and was surprisingly easy.

There are 2 ways that you can add each of the plugins, I opted to use the XFBML option rather than the iframe method (which is easier!).

Initial Setup

Before you use the XFBML method you need to tell Facebook about your site to get an APP ID and use the Javascript SDK. To do this log in to Facebook and go to Create an application page and add in the required information. You will then be give an Application ID that you will need in the following code, which you will need to add just under the <body> tag of every page that you’re going to use XFBML functionality:

<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>

If you are developing locally from the file structure you will need to change the line:

e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; to

e.src = 'http://connect.facebook.net/en_US/all.js'; or it will try to find ‘file://connect.facebook.net/en_US/all.js’

Like Box

The Like Box allows you to view a live stream of what is happening on your Facebook page, along with any fans of the page. To add it, use the above script tag and then use the <fb:like> tag:

<fb:like-box profile_id="PAGE PROFILE ID" width="830" height="430" connections="0" stream="true" header="false" /> You can easily change the various options, like width, height, header etc. to get the box to look exactly how you want it. Check out the Like Box Reference for all options.

You must ensure that the Facebook page that you are displaying is open to the public by going to settings->edit and removing all age and country restrictions and setting the published status to “Published (publicly Visible)”.

Like Button

The Like button allows users with a Facebook account to ‘like’ your page and it will be displayed on their wall. You can use tags to set what appears on the users’ wall when they ‘like’ your page. You can use the following tags:

<meta property="og:title" content="Setup Facebook Social Plugins"/>
<meta property="og:site_name" content="The Gray Zone"/>
<meta property="og:image" content="http://www.thegrayzone.co.uk/someimage.jpg"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://thegrayzone.co.uk"/>
<meta property="fb:app_id" content="YOUR APP ID"/>

The last tag is important as without it, the like box won’t work and you’ll get the following nasty error:

You failed to provide a valid list of administrators. You need to supply the administrators using either a “fb:app_id” meta tag or a “fb:admins” meta tag to specify a comma-delimited list of Facebook users..

With the meta data tags setup all that needs to be done is add a tag onto your page:

<fb:like href="http://thegrayzone.co.uk" layout="button_count" show_faces="false" width="50" action="like" font="arial" colorscheme="dark" /> As with the Like Box you can change the various options to make it look exactly how you want it to, by check out the Like Button Reference.