Add Facebook Comments to Your WordPress themes

October 10, 2012 // In: Web Design

As we know this is the age of social networking. Almost every web user have facebook account. So using facebook commenting is helpfull for users. User don’t need to enter Name, Email etc. or even don’t need to register for commenting. User having facebook account can easily comment without registering or filling form.

Here is some features of facebook commenting

  • User Authentication through facebook, Yahoo, AOL and Hotmail
  • Comment can be posted to the facebook wall
  • Replies to the comment also show on website
  • Facebook notifications for likes and replies

To use Facebook Commenting you need to create and an App on facebook.  Then you can use App ID for facebook commenting.  In Facebook Commenting Comments load through an iframe from facebook server, not stored on your webserver.

Now lets start,

Create a Facebook App

As I told you earlier, to use Facebook commenting we need to create a Facebook App. To create Facebook App go to https://developers.facebook.com/apps/ and click on Create New App. 

In Popup window, Enter name for App (you can use any name for app because it will not display on the website) and click on Continue button.

Enter the Captcha Text and click on Continue button.

Now you have to configure website URL in App. Click on Website with Facebook Login and Enter your website URL.

Now Note App ID, we will use that App ID in our website for commenting.

Modify Your Theme

Step-1

Now, You need to add Facebook App ID to your header.php file. You need to place following tag to your header.php before the </head> tag. Replace Your App ID to Your Recently created Facebook App ID.

Note: You can edit your header.php file via wordpress admin panel -> Appearance -> Edit, and click on Header file. Or you can edit header.php file through ftp.

Step-2

Now, Lets place comment box, but first look at this code

In second line locale reference en_US is given, You can change it to any specific language. And third line fb:comment  tells the comment box to show comments only related to specific url. You can also modify width for your comment box.

We need to place this code in comment.php file. As we know, every theme have different code in comment.php so how we know where to place this code? just remember one rule

  • Comments are allowed on the page and page is not password protected

place this code in your comment.php file, I’ve added following code to my comment.php

and complete code for my comment.php file in tewenty ten theme

Note: You can moderate comments on every page or all comments from this link. http://developers.facebook.com/tools/comments

 Display Comment Count

If you want to display comment count you can also do this by using following code

 Demo:

Convert an array to JSON data with PHP
How to Open a Link in a New Window using jQuery
  • Its worked 100% for all my wordpress blogs..

  • wow.. it’s good…
    thanks