Facebook Comments: Making it easier for idiots to whinge about your website!

Adding Facebook Comments to your Site

Added to Code by Richard.stokoe on Monday 18th July 2011

Following on from the last blog where I showed you how you can easily add Google's new "+1" button widget thingy to your site, I will now show you how easy it is to open up pages on your site to the public for comment using Facebook's "Comments" social widget.

Now this is a bit more complicated than the +1 button because Facebook is a bit more stingy about who uses its API and how.

First you need to be a Facebook user. And you need to set up an App at Facebook's developer portal:

https://developers.facebook.com/apps

Once you have set up an app, make a note of your App ID.

As in my blog about adding the Google +1 button, you need to import a JavaScript file from Facebook into your site. There are two ways to do this. First, you could follow the Google approach and simply add a <script> tag with the appropriate src (source) attribute:

... just before the </body> tag. But as these widgets are pretty heavyweight, Facebook suggests you load the script asynchronously by adding the following script instead:


  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>

Make sure you change the 'your app id' attribute to your app ID (hardly rocket science so far is it!).

The Facebook JavaScript API requires you to add the following tags somewhere on your page before the JavaScript is imported:

We will be using "XFBML" to add the Comments widget. This means eXtensible FaceBook Markup Language. It is a simple way of adding masses of functionality by adding a very small amount of HTML to your page.

XFBML requires us to extend the very first (root) tag/element in your page to work. In your HTML, you should find the first element looks something like:

You need to add the XFBML namespace to the head tag so it looks like this:

The Big Finale

Finally, the last step is to add the XFBML comment tag to your site. It is a very similar syntax to the Google +1 button:

<fb:comments simple="false" numposts="10"></fb:comments>

The 'simple="false"' attribute opens up some extra functionality in the comments box.

'numposts="10"' means I only want the last 10 comments to be shown. This is a good way of stopping reams of spam appearing. But could also mean that you start losing interesting comments that generate traffic and discussion off the bottom of the list.

You can also specify another page that these comments are for by adding the 'href' attribute with an appropriate URL in it.

The full developer specs and documentation can be viewed at:

http://developers.facebook.com/docs/reference/plugins/comments/

You can enable administrative option inside the comments box by adding the following meta tag to your <head> tag:

Of course, replace YOUR_FACEBOOK_USER_ID with your user ID (the bit after "facebook.com" in the address bar when you're viewing your own profile) and YOUR_APPLICATION_ID with the ID you noted down before.

Infinite Loops!

One word of caution, if you are like me and you are paranoid, you may have disabled "accept third party cookies" in your browser settings. This will cause an infinite popup loop thing when you try to log into Facebook to make a comment. Once you re-enable third party cookies the Comments widget will work again. So apologies if you've experienced that on this very site, it's beyond my control I'm afraid. If you trust me enough not to be malicious (and all my code is available for you to see if you right-click and choose View Source) then you could turn on third party cookies while viewing this site.

Hope this has been useful!

Adding Facebook Comments to your Site

Comments...