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. YourSite.com 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); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=YOURAPPLICATIONID";
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="http://example.com" 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=”http://example.com” 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

Overview

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

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.

31 Responses to How To Add Facebook Comments To Your WordPress Website

  1. You are phenomenal! Thank you for laying this out so clearly and perfectly! :-D

  2. Rean says:

    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?

  3. John says:

    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!

  4. The issues I am having is that the same comment is on all pages, it’s acting as a global commenting system, instead of individual per page.

  5. Russel says:

    Thanks a lot! Finally, I was able to add FB comments in my site perfectly! :)

  6. Rehana says:

    So simple article!! Hurrey, I have incorporated facebook comments box in my wordpress website. Kudos to you!!! :)

  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. Facebook comments really helps to drive interaction on any website…

  9. mike says:

    How do you step up comment moderation?

  10. Alex says:

    Thanks for the HELP from Germany!

    Bye,
    Alex

  11. Thanks for the great tuitorial! I’ve written some additional tips on adding the Facebook Comments Box to WordPress here:
    https://jacobgotwals.com/articles/adding-facebook-comments-to-your-wordpress-website/

  12. khan says:

    this is awesome and i just added facebook comment box using ur method.awesome.thx a lot

  13. Marek says:

    Great! But how can I import comments only from my existing Fanpage?

  14. Yaz says:

    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!

  15. Naeem says:

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

  16. Stuart says:

    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!

  17. Gouri says:

    Thanks for this detailed tutorial… very helpful!

  18. Gkri says:

    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.. :)

  19. Mike says:

    thanks for the in depth tutorial. I was searching to add facebook comment on my blog and came across your site.

  20. Thank you for the article, can you tell me if old comments will be imported as well ?

  21. Jayson says:

    Do you know how can we fetch all the recent comment on posts and display them?

  22. I just implemented for my WordPress blog, malayalampoems.com , thanks for this wonderful step by step tip.

  23. 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 http://www.notnull.ro/log/ .

    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.

    BR,
    Marcel

  24. Thanks for the Guide Succesfully installed

  25. Jenn says:

    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.

  26. Thanks for the Guide Succesfully installed

Leave a Reply

Please use your real name instead of you company name or keyword spam.