How To Add Facebook Comment Box on Blogger/WordPress Blogs

Facebook comment for your blog can serve as a good way to make your site more engaging and encourage readers to drop comments if they’re already logged in to Facebook. It also serves as a source of traffic since using Facebook comment shares the comment and post page on the visitor’s Facebook wall. One thing should be noted though: Facebook comment has no SEO value since it’s being displayed in an iframe which Google won’t index. Comments made with the regular comment box on your site has more advantages especially if you get loads of comment, more keywords you didn’t actually mention in the post content but appearing in comments do bring more search engine traffic. This is something Facebook comment lacks, execept the extra traffic you get from Facebook. As you have probably noticed, more and more blogs, e-commerce websites and all kinds of applications online are taking Facebook integration more seriously. One of those popular elements is Facebook Comments.

But what you probably don’t know is that it’s not that complicated to add them to your blog yourself. We’ll tell you how to do it easily within short time!

Before we start this mini-tutorial, let’s go over a couple of things…

What are the Pros?

There are a few reasons you might be considering the possibility of integrating Facebook Comments into your blog posts.

Exposure

Comments are easily published on the commenter Facebook ~~Wall~~ Timeline. This helps increase awareness, you are now in front of that user’s network of friends
The comment is posted on the user’s Timeline along with a thumbnail, headline and excerpt from the blog post as if the user was sharing your post

Engagement

Replies to those comments can take place either on the same post in your blog or on that user’s Facebook Timeline. This motivates conversation not only inside your blog but also on Facebook
Those comments can also be Liked by other users

Authentication

Most people are on Facebook and are already signed up to their account, which means they don’t need to authenticate to any commenting system. Users that are not logged to Facebook can log in from your post comments
Most people are familiar and trust Facebook

And the Cons?

The issue for me is not that this is a 3rd-party solution living in your blog. If you think about it, most of us bloggers already use 3rd-party apps to support our comments. I use Disqus in this blog but you’ve seen others like Livefyre or IntenseDebate. Very few blogs still rely on the WordPress native comment system.

But in this case you need to consider that your comment system belongs and it is a vital element of a social network.

Not everybody is in love with Facebook, some people actually prefer Google+, some are hardcore Twitter users. The invitation to interact via a network that is not their preference might not be welcomed with open arms
Totally depending on Facebook might not be such a good idea, you know how they change things around from time to time. What if tomorrow they dramatically change one of those elements you have deeply integrated into your blog? #goodtimes

That’s why some blogs offer the the possibility to comment through Facebook while they still have a more universal commenting system.

So there you have it, advantages and disadvantages I see and share with you to help you make a better decision.

Are you ready to get started? Let’s do this thing then!

1. Become a Facebook Verified Developer

Becoming a Facebook Verified Developer is very easy, don’t let the fancy terminology scare you. Let me take you step-by-step:

Go to the Facebook Developer website
click on “Apps” on the top blue navigation
Click on “Create an App” (this will be as far as you can go without being a developer)
You will see a “Your account must be verified to perform that action” message and you will be offered two methods: Phone or Credit Card
If you go with the phone option, you will provide your number, Facebook will send you a code via text and you will submit that code back to them. Boom! You’re in business
If you choose Credit Card just provide your information and follow the instructions. Sometimes this is the best option, specially if you’re outside the US

That’s it, you wanted more? Call your spouse and share the news: You are a Facebook Verified Developer…

Cool, now we can move on to more important things…

2. Create a Facebook App

Since you are now a verified developer, you can continue to create a Facebook App. The first thing you’ll see is a little popup so you can indicate the name of your app.

App Display Name is simply the name that is displayed for others to see and the App Namespace is used for Open Graph and Canvas Pages. Do NOT sweat this stuff because we are not really building an actual App and we don’t need to display anything to anybody. Just come up with a name that represents what we’re doing so you can quickly identify it in the future.

Good example: “your website comments”.

And we need to make sure these names are valid and available, as you can see in green text on the previous image. If they’re not, just come up with something different.

Your App ID

This will give you the most important piece of information you will need: your App ID and your App Secret. Save them for your records.

Configure your App

Now we just need to do a little configuration for your App. On the same page, scroll down to the “Basic Info” section. Since we already have a Display Name and a Namespace, all we need to add here is the contact email and the App Domain, which is your blog’s domain (yourdomain.com) without the “http://”.

Scroll down a little more to the section “Select how your app integrates with Facebook”. Select “Website” and add your blog’s URL, this time including the “http://” so it looks like this: “http://www.yourdomain.com”.

Save Changes. And we’re done configuring the Facebook App. Congrats!

# Adding the Code to your Blogger Site

We’re adding four sets of codes into your template to make this work the way we want, aight?

i. xmnls attribute

ii. SDK script

iiI. Open graph meta tag

iv. Comment form iframe code

i. Press Ctrl + F and search for this code:

<html

This should be found on the second or third line of your template.

- Right in front of this, add the following code:

xmlns:fb='http://www.facebook.com/2008/fbml'

-Be sure to have a space before and after this code. Take a look at the example below:

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog…………..2005/gml/expr' >

ii. Press CTRL + F on your keyboard and search for this:

<body>

If you can’t find this, search for something similar. You should search for this instead:

<body expr:class='"loading" + data:blog.mobileClass'>

In the next line, paste this code:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Be sure to replace YOUR APPLICATION ID HERE with the application ID I asked you to copy earlier, remember?

iii. Now, let’s add the open graph meta tag. Search for this code in your template:

</head>

In the line above it, paste this piece of code:

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

Replace YOUR_APP_ID with that same application ID you previously copied.

iv. Now here’s the last part of tweaking your template your template to make it display Facebook comment box. The last thing is the iframe to display the comment box where you want. Search for this in your template:

<data:post.body/>

If you’re using a magazine style template, you’re likely to have more than one occurrence of this. Using the wrong one won’t make the comment show up. If you’re not sure about which one to use, search for this instead:

<div class='post-footer-line post-footer-line-1'>

In the line just below it, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<style>
.bh24-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div align='center' class='bh24-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAprih3tbZAj7XG43Aj46INzc4uHxHo8Rep3ONpg3Skc8HGALO0HP7wyc0MH4GltXO7tljLTf2PkcSHyMFvvY0s9O6vu6Aur89OH5wPJ6Q-kbgn-P7elMv5JPG9Iid3WQmNFdWywsOrCM/s1600/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div><div align='right'><a href='http://bloggerhelp24.blogspot.com/2013/03/how-to-add-new-facebook-comments-on.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div></div></p></b:if>

Save your template, the Facebook comment form should now appear. If it looks rather small, replace width=’450′ with width=’600′. This increases the width from 450px to 600px.

Enabling notification for comments on every post

This is the last part and it’s optional but I recommend it. Enabling this lets you know whenever someone comments on your blog. You get a regular notification on Facebook and you can visit your blog to reply the comment.

- Visit this URL: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID

- Be sure to replace YOUR_APP_ID with your real application ID

- On the page that opens, click on settings and add yourself as moderator

- Click on your name when it shows up and save the changes you made. When someone drops a comment on your blog, you should be notified that instant on Facebook.

facebook comment box for blogger with notification enabled

# Adding the Code to your WordPress Site

1. Get Your Code

Now we’re going to a different section on the Developer’s site. Click here so you can get your comments code. If you’ve added the Like button or the Like Box on your blog, you’ll probably be familiar with how this tool looks. If you’ve never seen this, don’t worry, this is very easy.

First thing is to configure how the comment box is going to look on your blog:

Start by adding your blog’s URL again (http://www.yourdomain.com)
Specify the number of comments you want to display on your blog post
Set the width of the box depending on how wide the content area is on your blog
The “Color Scheme” will usually stay as “Light” unless you have a dark background on your site and prefer to go that way

The section on the right of the screen (see image below) gives you a preview of how things are going to look once you install on your site. As soon as you’re happy with it, click on “Get Code”.

And a new box will pop up, this one is to grab your code but before you do:

You get 2 options for code: HTML5 and XFBML. My preference is HTML5
And very important, Select the correct App from the dropdown menu, specially if you have more than one

Now you’re ready to copy the code from the first box, there is no need to change anything since Facebook already integrated the App ID in the code for you. Your code should look a little something like this:

<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]“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

2. Adding the Code to your template

Two more steps and we’re golden.

Now we are going to have to paste this code into your PHP code, inside your “header.php” file to be more exact. I know it sounds like we’re stepping into another dimension but it’s actually pretty easy. Stay with me…

There are two ways you can do this, if you’re comfortable connecting and managing files on your server via a FTP Client you can do that. Connect to your server and locate the “header.php” file.

The second option is from your WordPress Dashboard. This sounds more human, right? Most themes have a section called “Editor” under the “Appearance” tab on the left menu. Again, that’s WordPress Dashboard > Left Menu > Appearance > Editor.

On the right side of your screen you’ll see a list of all the theme files, find and click on “Header (header.php)”, that will display the actual code in the file in the center of your screen.

Now, paste your piece of code right after the <body> tag as shown in the following image.

Save when you’re done.

3. Adding the Facebook Code to Your Comments

Let’s go back to Step 3 to grab the other code from Facebook which should look like this:

<div data-href=”http://yourdomain.com” data-num-posts=”10″ data-width=”550″></div>

In this case we do need one minor tweak. What happens with this code is that Facebook is providing it ready to work for that specific domain but, what we want to do is install the comments on every post in our blog. So we’ll replace the section that contains your domain (http://yourdomain.com) for this: <?php the_permalink() ?> and now you’re code will look like this:

<div data-href=”<?php the_permalink() ?>” data-num-posts=”10″ data-width=”550″></div>

That will do the trick. Now your Facebook Comments will automatically appear on every blog post you publish.

We need to go back to our WordPress Editor now. Locate the file named “comments.php” from the menu on the right.

Add Facebook Comments code into your blog posts

In this case the positioning of our code really depends on where we want the comment box to go, I wanted them on top of the WordPress native comment system so that’s where I placed it (above image).

Don’t forget to save.

And with that, we are done. No high fives yet…

Results

It’s the moment of truth, we need to go to our site and see if the Facebook Comment Box is showing up in our posts. And this is what you should see:

Let’s Test It!

Let’s test the comment system just to make sure everything is working properly. First just add a comment right there in your blog post and make sure you checkmark the “Post to Facebook” option right below the comment box.

Now check if the comment is displayed on your Facebook Timeline.

As you can see, besides the comment, the post image, headline, and the meta description for the post are also displayed on the Facebook Timeline. Very similar to a share. Shiny!

Reply from the Timeline

Now try interacting with that same comment right from the Timeline to see if it also gets displayed on the blog post page. In this example, I’m replying with my wife’s account, check it out.

And now you have a conversation about your post that is happening in two different places. Isn’t the Internet beautiful? I think so too…

Authentication

Remember, if the user is not currently logged into his/her Facebook account, they will be presented with the option to sign in right from your blog post. So let’s sign out of Facebook and go back to your post to see if this works.

If this works for you, you can say thank you by sharing on Facebook, hitting the Google +1 button or simply using the comment box. Also, it would be nice of you not to remove the credit link to allow others find this useful widget. If you’re having problems implementing this as well, don’t hesitate to let me know maybe I can be of help.

W3Examiner

Search This Blog