One of the changes I’ve made to my blog is adding the ability to leave comments using a Facebook account. There are a couple of advantages to commenting this way. First, the reader doesn’t have to type in their name and email address in the WordPress comments, so that makes it a little bit easier for the reader and therefore a little more likely that he or she will leave a comment. Second, when the reader leaves a comment, should he or she leave the “Post to Facebook” option checked, it gives your website more publicity because it shows up in their news feed and all their Facebook friends have an opportunity to see it.
Now I’m going to show you how to add this feature to your WordPress site.
First go to developers.facebook.com/apps and click the Create New App button. Give this app a name, and ignore the App Namespace field. I named mine “danielveazey.com comments.” Click the checkbox saying that you agree with their platform policies, then click Continue. Type in the Captcha words to prove you’re not a spambot. Then you’re presented with a bunch of mumbo jumbo about App ID and API keys and whatnot.
Now go to developers.facebook.com/docs/reference/plugins/comments/. You should see this:
Put your website’s URL in the first field (you’ll be changing this later in the code, but don’t worry about that now). Set number of posts to how many comments you want displayed by default (I left mine at 2). Set the width to a number of pixels that fits your theme well. For mine, I made it 773, and that goes all the way across the main content area of my single posts. You can choose the light or dark color scheme, then click Get Code.
Now you’re going to get your hands a little dirty. Leave that code there and open a new tab on your browser. You need to get into two files in your WordPress theme, header.php and comments.php. Make a backup copy of these files before you go mucking about in them. From your WordPress dashboard, go to Appearance → Editor. Over on the right, click on header.php. Copy all the code in the editor window and save it to a file on your computer so you can change it back if you mess up. Do the same for comments.php.
In header.php, look for the <body> tag. Right below that line, paste all the code from the first part of the pop-up code that Facebook gave you. Make sure it’s the HTML5 version (it should be by default). It’s at the top of the pop-up window. Now click Update File at the bottom of the editor. Here is an example of what that part of the file might look like:
<body <?php body_class(); ?>>
<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=221223671306596";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Now open up comments.php and find the line that reads “You can start editing here.” Paste the second piece of code from Facebook right below that line. You should see your website’s URL where it says data-href=”http://blahblahblah.” Where your URL is, you need to replace that with ”<?php the_permalink(); ?>” so the comments will appear correctly.
So the whole line looks like this:
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="2" data-width="773" data-colorscheme="dark"></div>
Click Update File at the bottom of the editor and you’re done. Now the Facebook comments should show up just above where your WordPress comments appear.
If you found this post helpful, please leave a Facebook comment below, or a WordPress comment below that. Or both.
