The Ultimate Guide to Implementing Facebook Comments on your Blog
Tutorial Details
- Program: WordPress
- Version: 3.X
- Difficulty: Beginner
- Estimated Completion Time: 30 Minutes
Using Facebook Comments on your blog offers your readers a way to instantaneously comment on posts, as well as to share them without having to do any work. If you think this type of commenting system will suit your audience, read on to find out how you can implement it the right way.
Step 1: Create A Facebook App
Before you actually generate the Facebook Comments code and implement it on your blog, you need to create an app for your site.
- Go to developers.facebook.com
- Click Apps
- Click Create New App
- Enter an App Display Name and Namespace
On the next screen, you’ll see your newly created app’s App ID and App Secret Key. You won’t need the secret key, but the App ID will be used later. Take note of it.
Below these keys, go ahead and fill out the Contact Email and App Domain (your blog’s domain). Go down and click on Website. Fill in the same domain that you used for the App Domain. Click Save Changes.
Step 2: Insert the Facebook Comments Code into Your Theme
In this tutorial, we’ll be implementing Facebook Comments alongside the default WordPress comment system instead of replacing it. If you want, you can head over to the Facebook Comments code generator to get the code you’ll need for inserting the comment system; however, I’ve included it here so you can just copy it. You’ll need to customize a few parts of it, however; I’ll note which parts those are for each block.
The code block below should be placed in your theme’s header.php file. Find the opening <body> tag and paste the block directly below it. On the 6th line, replace “Your App ID Here” with your App ID.
<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_US/all.js#xfbml=1&appId=Your App ID Here";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
While you’re still in your header.php file, go up into the <head> section and paste this block of code somewhere. It will ensure that the Facebook Commenting system on your blog posts knows it’s owned by the app you created before. Replace the “Your App ID Here” bit with your App ID (leave the quotes in place).
<meta property="fb:app_id" content="Your App ID Here"/>
The next code block should be placed in your theme’s comments.php file. Since we’re implementing Facebook Comments alongside WordPress comments, you’ll just be pasting it where you want the Facebook Comments box to appear, and you won’t be deleting any of the original code.
<div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="2" data-width="470" data-colorscheme="light" data-mobile="false"></div>
If you generate your Facebook Comments code from the link I gave you earlier, instead of just grabbing it from this tutorial, remember to change the data-href attribute from the original URL to <?php the_permalink() ?>, otherwise Facebook Comments won’t work.
You can also edit the data-num-posts, data-width, and data-colorscheme attributes to your liking. The first defines how many comments will be shown on each post before a user needs to click “See More”, the second defines the width of the commenting system (set it to something slightly smaller than your content area’s width), and the last is the color scheme, which can be set to “light” or “dark”.
Step 3: Display the Combined Facebook and WordPress Comment Count
Your theme most likely has several areas where it will show the number of comments there are on a post. By default, it will only show the number of WordPress comments. Since you’re implementing Facebook Comments alongside WordPress comments now, you’ll want to display the sum of the comments from both systems on each post.
To do this, first open up your theme’s functions.php file. Paste the code shown below at the bottom of the file and save it.
// Get combined FB and WordPress comment count
function full_comment_count() {
global $post;
$url = get_permalink($post->ID);
$filecontent = file_get_contents('https://graph.facebook.com/?ids=' . $url);
$json = json_decode($filecontent);
$count = $json->$url->comments;
$wpCount = get_comments_number();
$realCount = $count + $wpCount;
if ($realCount == 0 || !isset($realCount)) {
$realCount = 0;
}
return $realCount;
}
Note: This code was built off of a function written by Viceprez on the WordPress Stack Exchange. I’ve simply added a couple of lines to his original function that add in the WordPress comment count. Thanks Viceprez!
Now that you have the function added to your theme, you can use it to replace the original comment count functions used throughout your theme. In my theme, the comments are called using this code:
<?php comments_popup_link('0','1','%'); ?>
Your theme may use this function to display the comment count, or it may not. Once you’ve found whatever does display it, replace it with this code:
<?php echo full_comment_count(); ?>
There will likely be several places within your theme that you’ll need to insert this code. Here’s a list of the most common ones:
- The comments.php file
- Near the top of your single.php file
- The index.php – it’ll be located in the loop that calls each post
- Any archive files like archive.php, category.php, author.php, etc. In this, it’ll be located in the loop that calls each post as well.
- On search.php
- On page.php if you allow comments on pages
If the comment count in your comments.php is diplayed as a sentence, instead of just a number, you can use the code below instead of the one line function call in order to allow for words like “no comments” and “one comment”. I’ve customized mine to be more inviting – I’d recommend that you do the same instead of being generic 
<?php
$commentCount = full_comment_count();
if ( $commentCount == 0 ) {
echo '<h5>No comments yet - you should start the discussion!</h5>';
}
else if ( $commentCount == 1 ) {
echo '<h5>One comment so far - add yours!</h5>';
}
else {
echo '<h5>' . $commentCount . ' comments so far - add yours!</h5>';
}
?>
Step 4: Get Immediate Notifications of New Comments
The last part of the tutorial will show you how to get Facebook Notifications whenever someone comments on your blog.
First, you’ll need to access your comments moderation panel. You can do that by pasting the following URL into your browser, substituting “Your App ID Here” with your App ID. You might also want to add this page to your bookmarks once you’re at it.
https://developers.facebook.com/tools/comments/?id=Your App ID Here
Once you’re at your comments moderation panel, hit the Settings button in the top right corner. A window will come up, and you should see a Moderators field in the middle of it. Simply add yourself as a moderator, and you’ll start getting notications whenever someone comments on a blog post.
Conclusion
If you’ve followed all the steps in this tutorial, your blog should now have Facebook Comments implemented right alongside the default WordPress comment system. I believe this is an ideal setup, as it gives your readers the best of both worlds; Facebook Comments is probably the most convenient commenting system out there, if a reader is signed in to Facebook (they most likely are), then there’s absolutely no authentication or identification fields to fill out. They can just comment away. However, if a reader doesn’t want to use Facebook, or wants to add their link or get CommentLuv benefits, you can still let them use WordPress comments.
You also now have a comment count for each post that shows the sum of the comments from each system, and since you’re a moderator for your app, you’ll get immediate notifications of new comments. I hope you enjoy your new and improved commenting solution!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Thomas Frank
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Wptuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Thanks for this great tut!
Is it possible to implement this in a responsive design? What options are there?
I don’t have much experience in responsive design, so I’m not sure how well it would work. One problem I can see is that the width of the comments box isn’t defined with CSS…
Thanks very much for this very helpful tutorial.
I have a question: can I display the latest comments in sidebar from both wordpress and facebook comments by time?
As of right now, I don’t think there’s a good way to do that. Facebook hasn’t provided much in the way of extra commenting functionality, so the only solution I could think of would be to actually build your own plugin that would copy Facebook comments, store them locally, and pull them into a widget you’d build. It’d be pretty involved.
Sorry there’s not a better answer yet! Hopefully Facebook will address these sort of questions soon.
Thanks very much for your reply, Thomas. Waiting for you posts
Combined comment count snippet – super useful.
My problem with implementing a solution that depends on facebook is that you dont really retain the content and not everyone wants to deal with facebook. Ive found that so far for wordpress LiveFyre is the best and allows you to incorporate comments (which stay in your comments for WP) as well as pulls comments from twitter and facebook.
LiveFyre is what I used to use. The reason I decided to switch is because you have to log in via a popup whenever you want to comment. My audience is college students, so I needed to make commenting as painless as possible. That’s why I decided to create a combination of Facebook and WordPress comments.
Don’t forget the part where you get less comments, because a lot of people (such as myself) refuse to comment on blogs that use Facebook comments. Not everyone wants all of their comments tied to a central identity, and I assume most of us don’t agree with the vision Zuckerberg and his sister have of an anonymity-free internet.
Services like Disqus and IntenseDebate, which offer users multiple choices of login method are fine, but requiring a specific social network—and the most iffy one at that—simply to leave a comment? That’s going to limit the discussion in more ways than one.
You bring up a very valid point – not everyone wants to have their Facebook account tied to the comments they write. That’s why the entire point of this tutorial is implementing Facebook comments right alongside the WordPress comment system, instead of replacing it entirely. It gives users a choice.
THANK U VERY MUCH …
I have a hobby web site setup that I would like to show Facebook comments from a hobby related national organization’s Facebook comments, rather than my own Facebook comments.
can I use the method outlined here to do this? or am I restricted to posting comments from my own Facebook account?
if this is not the method used, then what is the method to do this? I have seen it done, just wondering how to do it.
Al
If you’re talking about posting comments from your fan page instead of your profile, just make sure you’re using Facebook as that page instead of yourself when you post them. This is assuming you’re the moderator for the page you’re talking about.
Moderation won’t do nothing for me.Whatever I change there won’t work and I can’t moderate comments.
Did you add the meta tag with your app ID to your theme’s header, and then make yourself a moderator of your app? If you did both of those things, you may want to check the Facebook bug tracker to see if anyone else is having problems. Mine’s working just fine right now, but I had problems for the first week after I implemented it.
I used to be very pleased to seek out this web-site.I wished to thanks to your time for this wonderful learn!! I positively having fun with each little little bit of it and I’ve you bookmarked to check out new stuff you blog post.
Great tutorial, but you have some errors in your code, which are going to mess things up for people that copy and paste it. In Step 2 on the last code snippet you are missing the ? at the start or your php code that calls for the permalink.
Hi Michael, thanks for pointing that out! All fixed now
Hi,
I’m afraid this doesn’t work if implemented in a standard wootheme. its tough to find out this:
“Your theme may use this function to display the comment count, or it may not. Once you’ve found whatever does display it, replace it with this code:
view plaincopy to clipboardprint?
<?php echo full_comment_count(); ?> </pre>
“
full_comment_count() is the function I wrote. The function you should look for is comments_popup_link(), although your theme may use something different. If you’re having trouble, try to envision the place in the document your comment count is in. In my theme, it’s right after the title of the article, so I just had to look for the code near where the title is called.
Hey man this is great! Thanks for writing this up. I’ve been searching to find a way to do just what you wrote. I had a few quick questions I hope you (or someone else) can answer:
1. One of the main reasons I want to implement Facebook comments on our blog is because we have a very large (and very active) Facebook group. Whenever I post a link to our blog on the Facebook page I get people commenting on both the Facebook page and the blog itself. I often tell the folks on Facebook to please visit the blog and leave the comment also since I know what they say can help other people. It’s my understanding that the way Facebook comments works is that a person can comment on the link from our Facebook page and it gets synced to the blog (and vis versa.) In other words the conversation stays as one conversation instead of two. Is that right? Can anyone chime in on well this works, and if it’s been helpful for your community?
2. I’ve seen several plugins that saves a copy of the comment vis Facebook locally so that they can receive sep benefit from the comments. Do you know of a good way to do this using the method you wrote about here?
3. I use a top commenter widget to help increase engagement, do you know if there is a way to still use that plug in with this method? In other words can I track my top commenters regardless of what commenting system they are using (WordPress or Facebook?)
4. Have you seen any increase in traffic to your site, or the number of people liking your Facebook page, as a result of using Facebook comments? (Also have you seen an increase in the number of comments?) Are lots of people who used to use the world press comment system, using the Facebook comment system? (are they switching) or are you getting new commenters who weren’t commenting before? (Or a mixture of both?) Do you find that people are comfortable sharing the comments they write on your blog on their Facebook wall?
5. Finally when someone replies to someones comment are they noticed when the log into Facebook? or do they have to come back to the page?
Sorry for so many questions, I just want to be sure this is the best way to do things before rolling it out on my blog. Thanks for your time!
Sorry for replying to this so late!
1. I’m pretty sure this doesn’t work. I compared some comments from my posts to the comments on the post link on Facebook – they aren’t synced.
2. I haven’t tried out any of these plugins, so I can’t say much on this subject.
3. I’m pretty sure this would still work. You might have to look at the plugin’s code and make it look for the custom comment count function in the tutorial instead of the default count function.
4. To be honest, I haven’t seen many more comments and I don’t think my traffic increases are due to the Facebook comments. However, my audience is college students, and they just don’t seem to do much commenting at all.
5. Yes, people are notified of replies. When they comment, they are automatically following the post. There’s a link to unfollow if they want, though.
Thanks for this tutorial … I’ve been trying to incorporate it on an existing theme using the standard method, just copying and pasting … but didn’t have much luck incorporating the comment count. Your tutorial is awesome …. Good job.
I am getting “Warning: http://invalid.invalid/?> is unreachable.” I changed the app ID im confused what the problem is.
I figured out the problem i used the old code that was missing the “?”. After using the revised code it works with no problem
I figured out the error i used the old code that was missing the “?”. After using the revised code it works with no problem
As a non-designer, I found this tutorial easy to follow. I only hit a couple of snags but the developer provided good, timely assistance. The next step would be to use FB comments alongside Disqus. If anyone has successfully implemented the two after following this tutorial, I’d be interested to know how it went- if it is as easy as activating the plugin or if it requires changing the codes. Thanks, again, for this well-made tutorial!
That would probably be pretty easy. This method hard-codes FB comments into the theme, and I don’t think Disqus is set up to hide/override anything other than WordPress comments.
I’m getting a single comment showing up on multiple articles. Not sure how to fix that bit haha
A slight modification will allow you to use a filter, rather than replace every instance of comments_popup_link.
function full_comment_count($wpCount) {
global $post;
$url = get_permalink($post->ID);
$filecontent = file_get_contents(‘https://graph.facebook.com/?ids=‘ . $url);
$json = json_decode($filecontent);
$count = $json->$url->comments;
$realCount = $count + $wpCount;
if ($realCount == 0 || !isset($realCount)) {
$realCount = 0;
}
return $realCount;
}
add_filter(‘get_comments_number’,'full_comment_count’);
Hey, great tutorial. Very helpful. I succeeded in implementing the Facebook comments on my WP blog. However I get an error under the comment box :
Warning : URL not reachable
Do you know what does that come from ?
Thx
I’m using the iThemes Builder framework and trying to get this to work for posts only, without including the regular WordPress comments option.
If you take a look at this example, something is wrong as it’s throwing an error and pulling comments from some other post. I’ve confirmed I’m suing the correct FB Application ID.
Any ideas?
Example: http://scubashackct.com/travel/arrrr-dive-with-us-during-grand-caymans-pirate-week-in-november-2012/
I’m seeing this on your comment form: http://grab.by/c3Cu
That definitely shouldn’t be there. Without being able to see your code, I’m assuming you have a typo in your comments.php file. It should look exactly like this:
<div class=”fb-comments” data-href=”<?php the_permalink() ?>” data-num-posts=”10″ data-width=”610″ style=”margin-bottom: 15px;”></div>
I’ve managed to implement it successfully. However, when I try to moderate it, I find no comments in here : https://developers.facebook.com/tools/comments/?id=Your App ID Here
I’ve also added myself as a moderator but still the comments gets published without getting moderated at all.
Any help?
On Step 3 I’m trying to find where in my theme the original comment count is. Would it be in functions.php? Or, could it be somewhere else?
I realize you may have to put it in several places but where according to step 3 do I first place
This part of your tutorial:
If the comment count in your comments.php is diplayed as a sentence, instead of just a number, you can use the code below instead of the one line function call in order to allow for words like “no comments” and “one comment”. I’ve customized mine to be more inviting – I’d recommend that you do the same instead of being generic……
is not working for me!
This has been extremely helpful. 99% done.
I am having one last issue related to the code on my site and how it displays comment #’s.
Here is the current code.
?php comments_popup_link(’0 ‘.__(‘Comments’,'edge’).”, ’1 ‘.__(‘Comment’,'edge’).”, ‘% ‘.__(‘Comments’,'edge’).”); ?>
I can’t tell how to substitute your in without losing all the formatting for the display. Any ideas?
Just put that code inside a <span> and then apply your styling to that
Sorry goofed the code pasting.
Here is my code correctly pasted:
<?php comments_popup_link('0 ‘.__(‘Comments’,'edge’).”, ’1 ‘.__(‘Comment’,'edge’).”, ‘% ‘.__(‘Comments’,'edge’).”); ?>
You’re tut is awesome!!
I have just one little problem.
I’m new to wordpress, so it would be really helpful if someone could explain to me how to sort the comments by the page they are posted on, instead of putting ALL the comments on ALL the pages.
I saw some similar question and code some posts above, but it’s not working for me.
I put it in the comments.php, is this right?
Please help me put the comments on the right page!
Thanks a lot!
x Maartje
That’s probably happening because you have your site URL in the Facebook comments call. You need to make sure it’s <?php the_permalink() ?> instead, like this:
<div class=”fb-comments” data-href=”<?php the_permalink() ?>” data-num-posts=”2″ data-width=”470″ data-colorscheme=”light” data-mobile=”false”></div>
I see
Thank you so much for the quick reply!
But I have over 400 pages I want comments on:P
Do I need to make an individual code for every single one?
And where do I post that new CSS, again in the comment section?
the_permalink() is a piece of code that will get the current blog post. So whatever page you’re on, it’ll automatically use that URL. That’s why you need to use it instead of actually typing out the URL itself.
What CSS are you talking about?
Oh, now I see.
I used the ‘normal’ code for the header and used your ‘page by page’ code in the comments.php.
Thank you so much, your site thought me what I was looking for for so long!
Oh my god, thank you, i have been trying to get the moderation part to work all night lol, great post!!!
Hi, I’m keen to add a facebook comments box to my blog but as the blog is anonymous i don’t want my facebook account to be retrievable. is this possible without creating a new facebook page for my blog?
Thanks for the useful info.
I don’t think Facebook comments would be a good option for you if you’re trying to remain anonymous. You can’t reply to people’s comments under your Fan Page; you have to do it with your profile.
How can I know which page did the comment came from? I just can see that some one commented at one of my pages, but I can’t see it’s URL so I’m not able to know what should I asnwer…
Hey, question. SO I currently use a comment system like Disqus and the Livefyre. I’ve noticed once I am using these systems, that following your tutorial the facebook plugin doesn’t show up. When I disable them it does and works with just the regular comments. What I want to know is is there a way to make this same tutorial work if I am using the Disqus/Livefyre comment systems? I really would love to have my readers be able to rapid fire comment with facebook comments on each post.