How to Add Facebook Comments to Your Website


The folks at Facebook recently enhanced their Comments Social Plugin which allows you to integrate Facebook comments onto web pages on your website.

This tutorial walks you through the process of adding the Comments Plugin to your website. Facebook, of course, offers instructions as well, but I found them to be somewhat
cryptic in places and there are certain file naming conventions that must be followed, or the comment moderation capability won’t work.

This tutorial assumes you want to deploy and manage the Comments moderation settings for multiple pages on your website.

To accomplish this, Facebook recommends using an App ID :

If your site has many comments boxes, we strongly recommend you specify a Facebook app id as the administrator (all administrators of the app will be able to moderate comments). Doing this enables a moderator interface on Facebook where comments from all plugins administered by your app id can be easily moderated together.

If this is not the case, and you are adding only a single page with the Comments Plugin, then skip to Step 13 and insert this meta code instead:

<meta property=”fb:admins” content=”{YOUR_FACEBOOK_USER_ID}”/>

To get started, and get an App ID for your Comments moderation, you need to install the Facebook Developers tool.

Installing the Facebook Developers Tool

1. go to  http://developers.facebook.com/ and select “Add Facebook to my Site”

Facebook Developers Screen 1

2. From here, select “SDKs & Tools” from the options on the left.

Facebook Developers Screen 2

3. Now, select “Tools”

Facebook Developers Screen 3

4. Next, select “Developer App”

Facebook Developers Screen 4

5. Once you select “Developer App,” Facebook will prompt you to log in, if you have not already done so

6. Facebook will install the Developer App to your account. From the Developer App, under “My Apps,” you can then select
+ Set Up New App

7. Create your Application, by naming it and Agreeing to the Facebook terms.

Facebook Developers Screen 6

8. Now enter the text to pass the security check, and click “submit.”

Facebook Developers Screen 7

9. Now you can manage your App. Enter a brief description, of your App, associate icons & logos, if you like. You are required to enter a URL that points to your company’s privacy policy. Once you’ve done this, click on “Web Site.”

Facebook Developers Screen 8

10. On the Web Site screen, enter the URL directory of your website where the pages will reside that will use the Comments Social Plugin. Note that the URL must end with a “/” Note your Application ID, you’ll be using it later to manage your comments. Click on “Save Changes.”

Facebook Developers Screen 9

11. Once you save your App, a summary screen shows you the App ID and offers various tools for the App, including the ability to Moderate Comments, which we’ll be using later.

Facebook Developers Screen 10

12. Here’s what the comment moderation screen looks like.

Facebook Developers Screen 11

13. In editor’s mode, open the web page on your website to which you will be adding the comments plugin. As in the example below, insert the highlighted meta code. Be sure to replace the sample app_id  content with the App ID for the app you created above.

<meta http-equiv=”Content-Language” content=”en-us”>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>

<meta property=”fb:app_id” content=”243178109042006″/>

</head>

<body>

Body content here.

</body>

</html>

You are now ready to add the comments functionality to your site.

Adding the Facebook Comments Social Plugin

14. Go to: http://developers.facebook.com/docs/plugins/ and click on “Comments”

Facebook Comments Screen 1

15. Enter the URL for the web page to which you will be adding Comments functionality. Remember that this web page must be contained in the directory you entered in step 10 above. The little secret it took me a good while to unravel is that for the moderation capability to work, the web page name cannot contain spaces or under-scores. I had to rename all my web pages to conform to this unspecified requirement. Next, select the number of posts you wish to allow to appear by default as well as the width (in pixels) and the color scheme. Once you’re satisfied with the appearance, click on “Get Code.”

Facebook Comments Screen 2

16. When you click on the “Get Code” button, a window containing the XFBML code pops up. Cut & paste the code into your web page where you want the comments section to appear.

Facebook Comments Screen 3

17. Save and publish your web page. Repeat steps 14-16 for each web page in which you want to include Facebook comments.

18. Since you are an administrator of the App ID you created above, your comments section should appear as follows when you browse to the web page:

Facebook Comments Screen 4

19. You can manage your moderation settings right from your web page by clicking on “Settings” in the upper right of the plugin. From this screen you can control the
moderation settings for all pages you set up where you identify the App ID in the meta code as in Step 13. You can manage individual comments, and establish the Moderation Mode. You can also employ blacklisted words and other options as detailed below.

Facebook Comments Screen 5

20. To view the results of setting up the comments plugin, visit my web page and scroll to the bottom of the article.

21. If you found this tutorial helpful, please feel free to go ahead and “Like” it! 

About these ads
This entry was posted in Geeky Things and tagged , , , . Bookmark the permalink.

10 Responses to How to Add Facebook Comments to Your Website

  1. Way cool! Some very valid points! I appreciate you penning this write-up
    plus the rest of the website is really good.

  2. Austine says:

    Hello, good article which almost worked for me as am still getting this error: “Oops – Something went wrong. We’re working on getting it fixed as soon as we can.” What could be the issue and where am I getting it wrong please? Thanks for your great help!!!

    • I’m sorry, it’s not clear to me at what point in the process you are receiving this error message. I can say that when I was first looking to install the developer app, that Facebook’s developer app site was down for several days and gave the error message you described. In my case, the error message went away once Facebook resolved the problem on their end.

      • Austine says:

        Hi Albert Bodamer,
        thanks so much for reply. I got this message if I want to comment using the comment box on my site.

        • Prehaps post the issue here: http://forum.developers.facebook.net/viewforum.php?id=53
          Someone reported a similar problem in the developer’s forum and remedied it by changing their browser settings to accept third party cookies.

          • Austine says:

            Thanks so much and it worked. But am wondering and concerned about other users that might not know how to do this, do they have to set their browser to accept Third Party Cookies as well or is it just only me going to do this? Just concerned for those that would be using the Comment Box really. Thanks so much for your great help.

          • Mark says:

            It’s apparently sufficient to add an exception to allow 3rd party cookies from facebook.com in order to eliminate this error if you have disallowed 3rd party cookies in your browser.

  3. Chimot says:

    Thanks for your info, it really helped me :)

  4. I believe Facebook Followers is an App, not core Facebook functionality. So the Facebook Social Plugin likely isn’t designed to support that.

  5. Hanz says:

    Thanks for the info. But I have an issue, when I log into Facebook I can see my friends fb comments on my blog posts but I can’t see my followers comments from FB. I don’t have an application Id for FB becoz my account verification mobile doesn’t send code to my mobile, so can’t get my application ID. Pls help.

Share your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s