Home » Internet » Blogging » How to use Facebook comments in WordPress blog

How to use Facebook comments in WordPress blog



Facebook now allows you to use its comments system in your WordPress blog. Up till now you must have been using the commenting feature of either WordPress itself, or some third party comment applications such as Disqus. Although these applications allow you to login to your Facebook account and then leave comments, it is not same as using the original Facebook comments.

Benefits of using Facebook comments in WordPress

The greatest benefit is of course there is no spam. So far no bots have been created that can post automatic comments using Facebook. So that is a big plus.

Secondly, since most of the people surfing the Internet, provided they are using their own computers and laptops, are already signed in so when they have to leave a comment they don’t have to sign in to another program (even WordPress). Leaving a comment on your WordPress blog is as simple as using the usual Facebook post box. So it doesn’t create hindrance for people and consequently, increases the number of people leaving comments on your blog.

Using Facebook comments in your WordPress blog

You will need a little bit of coding knowledge in order to use Facebook commenting system from within your WordPress blog. When you go to the social plug-ins section of Facebook the interface asks you to enter the URL of the web page where you would like the Facebook comments to appear. But the problem here is pages in WordPress (blog posts) are multiple and constantly being created. So before you can add Facebook comments to your WordPress blog, you need to prepare yourself for a little bit of coding, in PHP. Don’t worry, it is not as daunting as it sounds. Anyway, coming back to the basics.

Before you can use Facebook comments whether you want to use them in a regular website or in a WordPress blog, you have to create an app. This has got nothing to do with WordPress.

So you go to the applications section of Facebook and create a new application

Facebook create new application

Once you are there click the “Create New Application” button you get this screen:

Facebook creating application – pop-up

As you can see, you need to enter the app display name. Since the other field is optional, for the time being you can leave it blank. In the proceeding screen you will have to enter a CAPTCHA value.

Once you have created the application, you will be provided with some cryptic information including app ID and app secret. You don’t need to necessarily note them down because they will be automatically inserted once you generate the code via this application. Now you’re almost ready.

Head to this Facebook comments code generation section and this is the section you should be interested in:

Code setting for Facebook comments

In the image above if you see “http://howtoplaza.com” don’t worry as I have temporarily added this URL to generate the code. Inside single.php (the WordPress file that is used to display particular blog posts) this URL will be dynamically generated using a WordPress template function. Click the “Get Code” button and you will be presented with this window carrying the code:

Facebook comments code

I have purposely blurred the app ID to avoid any kind of misuse. As you can see there are two sections of code in the window and you have to insert the code into different files in WordPress, namely header.php and single.php. These two files can be located in your current theme folder (/blog/wp-content/themes/your_theme). First go to your theme folder and in a text editor open header.php and just after the <body> tag insert the code contained in the bigger window. You don’t have to do anything with that code.

Then open single.php.

You would most probably use the Facebook comments along with the traditional WordPress comments or whatever comments system you’re using because you wouldn’t like to lose your existing comments. Unlike commenting systems like Disqus you don’t have an option of importing your existing comments into the Facebook comments system.

So in the single.php file go to the section where your current comments-related code exists. It’s a big chunk of code at the bottom of your file and it is most probably enclosed within <small></small>. Even if not, the first PHP code for displaying original comments looks something like this:

<?php if ((‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status))

So you can paste the Facebook comments code above this line:

<div class=”fb-comments” data-href=”http://howtoplaza.com” data-num-posts=”10″ data-width=”470″></div>

As I have told you above, we will have to change the data-href link to the dynamic link generated by the WordPress function, and this is how you change that code:

<div class=”fb-comments” data-href=”<?php the_permalink(); ?>” data-num-posts=”10″ data-width=”470″></div>

Save both the files, and if you want editing these files on the server you will need to upload them onto your current theme folder. Once you have done that, your WordPress blog is using the Facebook comments system.