Adding The Facebook Comment Box to Your Website.

Adding The Facebook Comment Box to Your Website.

without comments

I wrote the article originally in the sandbox at GregoryLaine.com but for some reason when I went to update that post it broke the editing and looks quite sloppy. Now I have altered it to just allow you to see the Facebook comment box but the article will now be hosted here in a more robust enviroment. So lets get started with adding the Facebook comment box to your website.

First off is to note that since the launch of the Facebook API platform the widgets provided do change and sometimes will break. As I witnessed early on when they tweaked the API around allowing easier additions of the Widgets into your pages. Also in the sandbox where the comment box is located for viewing and testing is in constant state of change as I tweak it around and used it to experiment. The easiest way to put it is that it is a live development environment.

Go ahead and go over to the Facebook Developers page and set up your account so that you can create an application. Once you have set up your account just click the “ + Set Up New Application” go through the steps to set up your application—I will write on this at a later time. Once your application is set up all you need to do is keep your settings page open so that you can see the app id for a copy and paste procedure below.

Now for the fun part. Facebook widgets are included in your pages using the Facebook API and FBML tags which look like this It looks like a normal code but doesn’t accomplish anything until the Facebook API can translate it dynamically into the HTML that will contain the comment box. This all happens behind the scenes, all you have to worry about is setting up the page, the developer account and administering the comments.

We will now set up the HTML page correctly to handle FBML tags. This requires that you add some code to your HTML root element which is the tag in your code. You will add xmlns:fb=’http://www.facebook.com/2008/fbml’ inside the tag like this.



After this code has been added you are going to add the API script call which is placed directly after the opening tag. This will look like this.

Your going to need to replace the ‘your app id’ with your app id from facebook keeping the single quotes intact. Once you have accomplished this, it should be smooth sailing. All you have to do now is start adding the FBML tags throughout your page were you would like stuff to show up as. So lets add a comment box.

All you have to do now is place were you would like the comment box to show up. The code will automatically use the URL were the comment box is located for separating comments from different pages but you can also set options yourself with options but that is outside the scope of this article I will save that for another day.

So for a quick summary of the steps.

1. Set up Facebook Developer account and Create and Application
2. Set up your HTML page to handle the FBML tags with xmlns:fb=’http://www.facebook.com/2008/fbml’
3. Add the Facebook API to your page with the JavaScript SDK right below the body tag.
4. Add the comments box FBML to your page to create the Comment Box

There is far more that you can do than just the social plugins. The Social Graph API is quite powerful for socializing your website and over time I will add more articles and tutorials on how to use the Graph API for socializing your site.