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 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
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.
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.
I have written a very simple WordPress plugin to do this and more. Please see the Social Plugin for WordPress page for more information.