How To Add Facebook Comments to WordPress (Without Plugins)

This tutorial will show you how to add Facebook Comments to WordPress without using plugins. This includes the Facebook Comments Plugin with Moderation Tools. Why not use plugins? Because I wanted to learn how to add Facebook comments to a website manually. Other websites may use a different CMS and may not have the ability to use plugins.

Step 1: Create a Facebook App

First, create a new Facebook App to represent your website. You can do this from Facebook’s developers website. Click “+ Set Up New App” and enter your website name in the “App Name” field. Agree to the terms or service and click “Create App”.

Once your app is created, you will be presented with a form that will allow you to edit your app. You don’t need to edit any settings at this point, simply click on the tab labeled “Web Site”, and note your Application ID. The Application ID will be used later to identify who can moderate comments posted to your website.

Step 2: Add the Facebook JavaScript SDK to WordPress

Next, you will need to add the Facebook JavaScript SDK to your WordPress template. For the sake of this tutorial, I will be modifying the Twenty Ten template that ships with WordPress 3.x. Add the following code to header.php, just after the body tag. Substitute the Application ID shown here on line 5 for the one in the previous step.

<!-- Facebook JavaScript SDK -->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: '177594542288018', 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>
<!-- End Facebook JavaScript SDK -->

Step 3: Enable Moderation Tools

While still editing header.php, add the following code between < head >…< /head >. Replace the Application ID in this example with the one your created in step 1. This Open Graph tag tells Facebook to associate this page with the specified application.

<!-- Facebook Open Graph Tags -->
<meta property="fb:app_id" content="177594542288018"/>
<!-- End Facebook Open Graph Tags -->

Step 4: Add the Facebook Comment Plugin to WordPress

Now that you’ve added the JavaScript SDK to your header template, you’ll want to add the Facebook Comment Plugin to comments.php.

I opted to remove WordPress comments from my template, but you need not do the same. WordPress comments and Facebook comments can live side by side.

In Twenty Ten’s comments.php, you will see a line similar to this.

<?php
	// You can start editing here -- including this comment!
?>

Add the following code after that line.

<?php if( comments_open() ): ?>
    <div id="facebook-comments">
    <h3 id="reply-title">Leave a Reply</h3>
    <fb:comments href="<?php the_permalink(); ?>" num_posts="8" width="610"></fb:comments>
    </div>
<?php endif; // end comments_open() ?>

This bit of code will check to see that comments are open for this particular post before inserting the Facebook comment code. You can modify the num_posts and width attributes to suit your needs.

Step 5: Verify Facebook Comments

If you executed the previous steps correctly, you should be able to browse to any post on your website, scroll down to the comments section, and see something like this.

Assuming you are logged into Facebook when you do this, you should see an option to add a new comment, a “Moderator View” option, and an option to modify settings. If you do not see “Moderator View” or “Settings”, verify that the Application ID from step 1 is correctly specified in the header.

To moderate comments, check Facebook’s Comment Moderation Tool.

It should be noted that comments from unverified Facebook users will not show up in the comment moderation tool. I have a test user that has an unverified account, and its comments to not show up despite the fact that the test user can see its own comments in WordPress. Comments from you, your designated moderators, and verified Facebook users should show up fine.

Please let me know if you have any questions or comments about this tutorial.

FAQ

Q. Something’s not working?!

A. The first thing to try is Facebook’s URL Linter. It will tell you if something is wrong with your setup.

Update

I have written a very simple WordPress plugin to do this and more. Please see the Social Plugin for WordPress page for more information.

Add a Facebook Comment

12 thoughts on “How To Add Facebook Comments to WordPress (Without Plugins)”

  1. I added a Facebook comment to the specified blog post. It seemed to work fine for me. Please let me know if you don’t see it. I added the comment using a verified Facebook account. I did not see a Facebook Login button, but that is probably because I was already logged into Facebook.

  2. Thanks! So much easier than the plugins. But I have a question. When my posts come up on the main Home page there is no FB comment option. Not until you click on the blog and go to its specific URL does the FB comment activate. Is there a way around this?

  3. @Melissa, Instead of adding the Facebook Comment code, fb:comment, to comments.php, you could add it near the “entry-utility” section in loop.php. I believe this would display the Facebook Comments on the main page for every post. Frankly, I wouldn’t recommend this approach. I believe most visitors are going to be clicking through to the actual post to add comments. Also, this may clutter up your main page quite a bit.

  4. Your instructions are clear and fantastic and much easier than either of the plugins I tried… but when someone does leave a comment, the entire comment doesn’t show. It’s like the FB comments box is cut off, so the FB comments don’t seem to be working side-by-side with the WP template comments. I’m guessing there’s CSS controlling the box height somewhere, but for the life of me, I can’t figure out where. Any suggestions will be most gratefully appreciated! Thanks!

  5. Hi Mark,
    I’ve been attempting to set this up for three days now and your guide has got me the furthest!
    It’s great I managed to add the comment box to my page http://www.sussexchef.com/facebook as I only want to have the option to comment on one of my posts, The issue I have is when I post it goes to my wall no-one can like or comment on their post, If someone else posts it doesn’t show in either the comment box or the persons wall, any ideas?

    1. Unfortunately, I don’t know what the problem is. The fact that you have the comment box working is evidence enough that you have set it up correctly. Aside from that, I would suggest you check out Facebook’s support site to get a better idea of what options are available to you. Thanks!

Leave a Reply

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