Add Facebook Comments To Your WordPress Theme

naveen
05/01/2013

Using Facebook Comments on your website/blog offers your readers a way to instantaneously comment on posts, as well as to share them without having to do any work. Here is a list of features:

Facebook notification for likes/replies to comments
Comments can be posted to the Facebook wall with one click
Replies to the comment on the wall will be shown on your site as well
User authentication through Facebook or services like Yahoo!, AOL & Hotmail
Grammar filter (adds punctuation, trims extra whitespace, fix common grammar mistakes etc.)
Less trolling, more discussion

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 http://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.

Step 2: Add the Meta tag to your Theme

In your header.php file add the below

<meta property="fb:app_id" content="FACEBOOK_APPID_GOES_HERE"/>

Step 3: Insert the Facebook Comments Code into Your Theme

Add the below in your comments.php file. Change the FACEBOOK_APPID_GOES_HERE below with the APP ID which you created.

<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
(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=FACEBOOK_APPID_GOES_HERE";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]></script>

Step 4: Place the code for your plugin wherever you want the plugin to appear on your page.

<div class="fb-comments" data-href="<?php the_permalink() ?>" data-width="645px" data-num-posts="2"></div>

Thats it you are done. Simple as that :) For more reference go to https://developers.facebook.com/docs/reference/plugins/comments/

Add Facebook Comments To Your WordPress Theme