The most important aspect of any blog is to interact with it’s readers, allowing them to share their opinions using the comment system. WordPress has a good comment feature built-in, but usually requires readers to be either logged in to the blog, or provide personal details (such as Name, Email etc.) every time while posting a comment. This makes it somewhat less user-friendly, and readers usually avoid posting comments due to such issues. From the Administrator’s point of view, it is sometimes incredibly difficult to stop Spam comments flowing in through the system, even with various preventive measures already in place. These issues with the WordPress’ default Comment system calls for an alternative system to replace it, something which is easy to implement, and requires very low user input apart from the comment itself.
This is where the role of Facebook Comments System come into play. Facebook, world’s most popular social network, has a gigantic user-base of more than a billion users. It provides us with an API to integrate it’s comment system, and other useful plugins, on any custom website. Because Facebook is widely used, and has a global reach, it’s usually the recommended choice to replace your default Comment system. If you’re logged in to Facebook, you don’t have to log-in, or provide any details in order to post comments on a website using Facebook’s comment system. Hence, most users would just have to type the comment, and hit the button to post it. No more Spam problem as well. Seems like an ideal solution, doesn’t it?
Adding Facebook Comment Box to WordPress Manually
It’s a simple two-step procedure to add Facebook Comment box, manually on your WordPress site.
Step 1: Get the Code
First, you need to obtain the code for the comment system from Facebook. For that, go to Facebook Developers page for Comments plugin. On that page, you’ll notice a box similar to the one below.
Enter any domain-name in the URL to comment on option, because we’re going to replace it later (more on this in the next step). Other options allow you choose the Number of Posts you want to display at a time, Width of the box (in pixels), and the Color Scheme of the box (light or dark). All the options set in the code generation box, could be changed later in the code itself. After setting all the options, click on Get Code. A pop-up box would appear similar to the one below.
Step 2: Place the Code
As you could notice, there are two different pieces of code provided, in the pop-up box. Make sure you’ve HTML5 tab selected, because the other techniques either aren’t available for this plugin, or depreciated. Copy the first code, and go to Appearance >> Editor, in your WordPress back-end. Open the header.php file, and look for the <BODY> tag in that file. Paste the code, right after the opening <BODY> tag, and save changes to the file. This code acts as a bootstrap, which loads up necessary JavaScript code for Facebook plugins to run on your website. If this code is missing, the plugin won’t work.
The second piece of code is the actual code which places the Facebook comment box, wherever you want it to be displayed. To place this code under every single blog entry, navigate to the Single Post file (usually single.php), and look for the function call to the comments template, similar to the one below.
<?php comments_template( '', true ); ?>
Replace that function call (including the PHP tags) with the second piece of code. Now, regarding the data-href property, replace the domain-name, which you set earlier with “<?php the_permalink(); ?>”, i.e. your code should look something like this.
<div data-href="<?php the_permalink(); ?>" data-num-posts="10" data-width="550"></div>
The the_permalink() function is a WordPress core function, which would make sure that the correct comment box is loaded for each post. Save changes to the file, and that’s it. You’ve successfully added Facebook Comment box on your WordPress site.
To place the Facebook Comment box on WordPress Pages, replace the comments_template() function call inside the Page Template file (usually page.php) with the above code.
Plugin Alternative
On a personal note, I recommend adding features “manually” to your WordPress site. Installing plugins increase overhead on your website, thus, significantly affecting your page load-time. Hence, it’s often advised to avoid plugins whenever possible. But, if you feel uncomfortable with the above method, you could try the Facebook for WordPress plugin, which would allow you to integrate Facebook plugins to your WordPress site, including the Comment box feature. The plugin configuration is easy, and detailed documentation on how to install or use, is available.
Try adding the Facebook comment box on your site, and you’d notice a significant increase in the number of comments posted on your website.