How To Add Facebook Comments To Your WordPress Website

I added Facebook comments to my blog a two months ago. It’s proven to be a popular addition to the site. Most people stay signed in to Facebook when they browse the web so it has encouraged more comments on posts.

I initially tried a few different ways of integrating comments on my site. I followed some long drawn out tutorials that required lots of editing and I tried a few plugins too. Through trial and error I found that the the best way to integrate Facebook comments on your WordPress website is to use the official Facebook plugin Comments Box (Note, this is not a WordPress plugin).

Step 1: Create A Facebook App

The first thing you need to do is visit the Facebook Application page and click on ‘Create New App’.

Create A Facebook App

All you need to do is give your name an appropriate name e.g. Comments. Facebook will provide you with and App ID/API Key and App secret key.

Create A Facebook App

Step 2: Customise Your Facebook Comment Area

Next thing you should do is go to the Facebook Comments code. Don’t worry about the ‘URL to comment on’ field for the moment. You simply need to choose how many comments you want per page, the width of your comment area and whether you prefer the light or dark scheme.

Customise Your Facebook Comments

Step 3: Add Facebook Code To Your Header.php Template

When you click on the ‘Get Code’ button you will be presented with two options: HTML5 and XBFML (iframe isn’t available for comments). I recommend using the HTML5 version.

If you have created more than one application on Facebook, make sure you select the appropriate application for your comments so that the correct ID is generated in the code.

Get Code From Facebook

The first piece of code should look something like this:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); = id;
js.src = "//";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Open up your header.php template and add the code just below the body tag e.g. directly after <body>. After you have added the code, save the file.

Step 4: Add Facebook Code To Your Comments.php Template

The second piece of code that Facebook provides looks something like this (it depends on how many posts you specified per page and the widget of the comment area):

<div class="fb-comments" data-href="" data-num-posts="2" data-width="500"></div>

The default code that Facebook provides links to a static URL therefore we need to modify the code so that the current page is linked (i.e. the permalink). To do this, all you need to do is replace data-href=”” with data-href=”<?php the_permalink() ?>”.

Your code should now look something like:

<div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="2" data-width="500"></div>

To add this to your comment area, all you need to do is add the above code to your comments.php template. Where you should add this code depends on how your comments.php template is coded and whether you want Facebook comments to appear above or below WordPress comments.

If you have followed these steps correctly, you should now see Facebook comments either above or below your regular WordPress comments.

How To Add Facebook Comments To Your WordPress Website


This tutorial showed you how you can add Facebook comments to your comments.php template. Once it has been completed, Facebook comments will appear on your posts and pages.

If you are unsure about any part of this tutorial, please let me know and I will clarify the step for you.

Good luck,

About Kevin

Kevin Muldoon is a Scottish webmaster and blogger who currently lives in South America. His labour of love was WordPress Mods; a blog which focuses on WordPress Themes, Plugins, Tutorials, News, Modifications.

33 thoughts on “How To Add Facebook Comments To Your WordPress Website”

  1. I’m running Genesis Framework, and following your steps gave me an error code b/c they want you to edit the “child” theme under the actual framework. There are no php files to edit under the child framework that I can see.

  2. Hi,

    Few time ago somebody asked me to add Facebook Comments Box on a WordPress blog.
    Usually this is not a problem, you can find a lot of such plugins .
    But this request includes an unusual feature: the box comments to be placed under each article if there are more article on the web page (e.g. category page or archives).
    Each article with it’s own comments.
    I was searching on the net for a plugin with this feature, but not able to find it.

    So, I decided that is time to write my 1st wordpress plugin and to integrate facebook comment box the site.

    Here is the result .

    Maybe the code is not written in the proper way (to respect codding style of WP), but if someone wants it just drop me a mesage.


  3. But if I put a permalink from a particular article from my blog for example, won’t fb comments be shown only at this particular page? Or they will be shown to the whole site?
    How do I put a permalink so that fb comments will work for all the articles?

    Thank you very much for this tutorial, I hope my question is answered.. :)

    1. You should use the php code “the_permalink()” instead of just copy and paste the current permalink.

      Replace “” with “”.

  4. just installing FB comments on (funnily enough) my Scottish music websites and came across this page when trying to sort out the permalink code bit (can’t imagine why Facebook doesn’t explain that properly). The info above sorted things out pretty fast, so thanks!

  5. I put the comments successfully. But many times the comments from facebook do not load at the page. Same is the case with any other facebook plugin I’ve installed on the site. When page is refreshed 2 or 3 times comments are shown there. I am wondering why does not it load the comments or any facebook button/widget/plugin in each attempt.
    I’ll appreciate if you can guide me on this.

  6. This was great – thanks. I don’t suppose you have tutorials on adding moderation code? I have been trying all night but I can’t get it to work. If you have any idea on what to add and where (I’ve tried both the meta tags ‘fb:admin’ and ‘fb:app_id’, but nothing works), that would be truly appreciated!

  7. Hey Kevin, thanks for the great post! I was using the ‘facebook comments for wordpress plugin’ and I kept getting and error saying invalid id. After reading your post, and following your instructions, everything is done and working superb!

    Thanks again.

  8. Hello, thank you very much for this post. I followed your instruction and added Facebook Comments to my blog. May I ask a follow-up question… How can I get notified if someone leaves a facebook comment on my blog? Thanks!

  9. I’ve installed this a couple of days ago, but now I just noticed that comments are getting duplicated on other posts. Do you know why?

Leave a Reply

Your email address will not be published. Required fields are marked *