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.
Any idea why fb comments aren’t showing up on this site (except for my own): http://blog.ratiochristi.org/2011/04/i-dont-have-enough-faith-to-be-an-atheist-2/
I can’t get any comments to show up when the FB login is used. The test users I’ve created are verified. Comments made using non-fb login do show up.
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.
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?
@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.
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!
You’re using Twenty Ten for your theme and WP 3.1.x – correct? Give me some time to figure it out. I’ll let you know what I find.
What browser are you using? I am unable to reproduce the issue in WP 3.1 and WP 3.2 beta using Firefox 3.6, Chrome 12, or IE 8.
Thanks! So much easier than the plugins(2). I’ll use this from now on my blog!
Thanks Again
Nice tips, I have already used this, but I need email notification if semeone comment with facebook comment form. Please send to my email for your help. Thanks
I agree. I’ll be sure to add this to the list of future enhancements.
Just have one question. Is it possible to have a FB comment box on “Home” page only? Just want a single FB comment box on “Home” page (e.g. under a vertical menu bar) to work like a “guestbook”.
I don’t intend to have FB comment box anywhere else (such as posts, pages). Thank you for your advice!
Definitely. You would do something very similar to this, only step four would be slightly different.
Instead of adding the FB comments plugin to each post, you would have to find a place in your template that represented the “main page”. Of course this is different for every template. In the case of Twenty Ten you might try page.php or loop.php.
You would also change the href in the FB comment plugin to be something static, like the URL to your main page. That way, all comments would be associated with that URL and not the permalink like in the example here.
That’s just off the top of my head.
works perfectly. thanks…
but how can remove wordpress default comment box
You’ll probably want to use a bit of CSS to hide the WordPress comments, or simply remove the comments entirely be editing your theme.
hay there is no body tag in my header.php,what i need to do?
Just try putting at the bottom of the header.php file and see what happens. If that doesn’t work, try to find the body tag in your WordPress template. It may be in another file.
Thanks, that worked like a charm.
One thing I have to ask that if you can provide codes which will display our comment (site owner’s) as the site name and logo etc. See this post, he has done it for blogger
http://www.mybloggertricks.com/2011/06/add-facebook-comments-box-to-blogger.html
Also, how to make the Post to Facebook option checked by default ?
Can you elaborate on this? I checked out the link you posted, but I’m not sure what you mean by, “codes which will display our comment (site owner’s) as the site name and logo etc.” Feel free to send me a screen shot. You can send it to my email address or Facebook account.
Thanks!
Thanks a lot for your great tutorial!
You helped my solve one messy problem that the comments was not showing when I changed my theme!
Thank you
Thanks for this great tutorial, It is work great. Anyway it is like little bit different.
I put the html 5 code that provide by fb apps when i generate the code. But i don’t know where should i put the code till i find your site.
thanks again.
Nice post. Great….
Great tutorial, im having one issue though. i cant see the facebook comment on some blog posts.
here i can see it: http://blog.halltheway.com.au/heres-how-to-have-a-successful-event/
and here i cant: http://blog.halltheway.com.au/easter-fun/
No idea what it might be :/
Is it possible that you do not have comments enabled for http://blog.halltheway.com.au/easter-fun/ ? You can enable the “discussion” parameters under the “Screen Options” menu fr the page in question. Let me know if that doesn’t help.