How to Install and Moderate Facebook Comments on WordPress

Adding Facebook Comment box to your WordPress blog is not a bad idea, its a good idea in fact. Facebook Comment box gives your the user the chance to discus the topic with them who matters to her/him. This way the user as well as her/him circle also gets involved to your site. The comment box increase your site’s popularity almost the same way the “Like” button does. So here we will focus on how to install Facebook comment box in WordPress blog and how we can moderate the comments posted via this comment box.
Before we start lets have look at what we need to do this.
1. A Facebook Application for comments
2. Your profile ID to moderate comments
3. Permission to edit WordPress theme files

I’ll explain about the first two topics here. You have the permission to edit your themes right?

Creating an Application for Facebook Comments in WordPress

To get your very own Facebook application go to https://developers.facebook.com/apps/ while you are logged in with your Facebook account.

Click on the Create New App button on top right corner.
Create new application on Facebook
This will open a pop-up window like the one in the image below. Put your desire name in the App Name field. You can leave other two options blank and click Continue.
Create new application for WordPress comments
You may be asked to enter a captcha for security purpose. Enter it and click Submit.
This is the final step to get your Facebook Comment App ready. Copy the App ID given just under the Application name and fill up the details like the image below and click Save Changes at the bottom of the page.
Facebook comment filing the details
Now your Facebook comment application for WordPress is ready.
Copy the App ID given just under the Application name. You have to put this App ID in your <head> section latter.

Lets see how to install the comment box in WordPress. We will talk about the comment moderation after this.

Installing the comment box in WordPress

Believe it or not installing the Facebook comment box is one of the most simple job to do. If you have the authority to edit your site’s theme files then it should not take more than 60 seconds to install the comment box.
To make this job more easy here is the code to for you. You can just simply copy and paste it where you want the comment box to appear. Best option is to put it in the comments.php file of your active themes folder.

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

data-num-posts=”5″ allows you to set the numbers of comment you want to display. Setting 5 will add a link of View More at the bottom of this box once it has more that 5 first level comments See the Image below.
Live Facebook comment box on WordPress
You can set the Width of this comment box by changing the value of data-width=”750px” field.
That is it! Your comment box is installed, but wait it is not ready to work yet.
You can see that there is no script that will comment to Facebook, it is just a simple html division that links to the page’s permalink. So how this can work?
To make this comment box work you have to add a little more script in to header file (header.php) of your WordPress theme.
Add this code just after the opening of <body> tag

<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=Your_app_ID_here";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

You can see that the above code requires an Application ID on line 6. Just paste the App ID you copied from the Facebook application page here.

Moderate posted comments on WordPress using Facebook Comments box

To moderate comments posted in this box you have tell Facebook about who is the admin of this application you just created and you also have to mention the admin of this app in every page where this application is added.

Telling Facebook about the admin of your application

By default Facebook will add the user who created the application as it’s moderator and administrator but you can add other users as administrator of this application. Remember that all the administrator will have the complete control over your application and he/she can even delete the application, so use it wisely.
To add a new admin to your application go to the Roles tab from the left navigation bar. There you can see current admins and you can add others as admin too. Click on the add button in the Administration section to add admins.
Add admins to Facebook Applications
With this Facebook knows who are the administrators/moderators of this application.

Adding Facebook Admin in every page of your site

To make this comment box works smoothly you have to add your admin id before the end of <head> tag.
Put this line before <head> tag.

<meta property="fb:admins" content="your_profile_ID"/>

If you don’t know your Facebook profile ID then here is a guide about how to find it.

Find your Facebook profile ID

If you don’t have vanity URL for your account the hovering the link of account will show something like this -

https://www.facebook.com/profile.php?id=1000035567825181

The last id=1000035567825181 part is your profile ID. Copy this ID (just the numbers) and replace the Your_User_ID in fb:admin_id meta tag with it.

If you are using Facebook vanity URL for your profile then go to https://graph.facebook.com/your_user_name_here. The link will render my profile data. Something like this.

{
"id": "1487012958",
"name": "Rabin Biswas",
"first_name": "Rabin",
"last_name": "Biswas",
"link": "https://www.facebook.com/rabinbs",
"username": "rabinbs",
"gender": "male",
"locale": "en_US"
}

Just replace the last part with your vanity URL and you will get your profile ID. Put it in the fb:admins content field and your site is ready for Facebook Comments and you can moderate it the way you want.

Add a Comment

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.