Add Facebook Comment Box to Blogger/Blogspot

Pin It
Facebook Comment Box in Blogger
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 viewer'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, except the extra traffic you get from Facebook.

I just thought you should know that before you implement it on your blog. As you can see, I do use it too. I wrote a post on this particular topic earlier but Facebook has changed since, lots of things on the post may not look exactly as explained. Also, this one has a feature the previous one didn't have – getting notified of every comment made on your blog.

Also Read: Add social media FB buttons in Blogger

How to add Facebook comment box to Blogger Blogspot Blogs

There are about five steps to get this done. Just follow the steps and you'll have a nice Facebook comment box installed on your blog in no time.

1. Creating a Facebook Application:

i. Head on to facebook developer page, you should create a new app by clicking the button at the top right.
ii. Enter your application name and namespace,input the captcha code and proceed.
iii. On the next page, enter your custom domain name (if you’re using a custom domain) or just blogspot.com (if you’re using blogspot sub domain) in the space provided for App domain.

For App website, enter your blog URL. ( http://www.xyz.com/ or http://xyz.blogspot.com/ ). Be sure it starts with http:// and ends with / as shown in the screenshot below:
iv. Scroll down a bit and hit the Save Changes button. Now you're done with creating your facebook application but there's one more thing to do. On that same page, you should see your application ID. Copy it and save somewhere, you're gonna be needing it.
Now let's head to your blog and add following html codes to add facebook comment box.

2. Add html codes to your template for Facebook Comment Box 

Add these four sets of codes into your template to make this comment box work in your blog site.

Step 1. Log in to your blogger account and click on Template > Edit HTML
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='&quot;loading&quot; + data:blog.mobileClass'>
Get Facebook LikeBox Widget

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 == &quot;item&quot;'>
<style>
.blogtipsuk-fb-comments
{
-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='blogtipsuk-fb-comments' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font>
<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://bloggerseotipstraining.blogspot.com/' target='_blank'><small>Blogger Widgets</small></a> | <a href='http://bloggerseotipstraining.blogspot.com/2014/03/add-facebook-comment-box-to-blogger-websites.html' target='_blank'><small>Facebook Comments in 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.

Get Free SEO for Blogger

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.

PLEASE NOTE:

If you have any questions regarding this article,please comment and I'll reply as soon as possible.

We have Zero Tolerance to Spam. Comments with Links will be deleted.

15 comments:

  1. it was very useful information, please visit my blog
    http://healthy-immune-system.blogspot.com

    ReplyDelete
  2. bro, thanks for your tips. however when someone comments on my blog, then the same comments will be duplicate in other posts as well.

    do you mind to take a look?


    http://amadeusbv.blogspot.com

    ReplyDelete
    Replies
    1. Bro, check your settings in your facebook application , where you created your comments app, this problem is solved in fb app developers

      Delete
  3. Replies
    1. All the blogger tutorials and widgets I add here works. First I test all the widgets than add them here.

      So Enjoy and keep visiting. Thanks!

      Delete
    2. wow thankyou so much admin this thing has caused me sleepless night but today beleive it or not i have managed!!!!!!!!!!!!!!!!!! http://wetgossip254.blogspot.com/ thankyou so much en jah bless you........

      Delete
  4. bro, how do we get notification each time people left a comment ?

    ReplyDelete
    Replies
    1. Make this comment app with your original facebook ID (which you normally use and notification will come in this ID)

      while adding this comment box in your site, enter the APP ID as given above in the post. This will enable notifications in facebook.

      You can also check all your site comments in the fb developers page and access the comments settings there as well.

      Delete
  5. Dear Sir,

    I try to add app.but this is what a different screen. I took screen shot but I don't know how to send it to you

    ReplyDelete
    Replies
    1. Facebook app has changed their site design , but the process to make this comment app is still same. So just follow these points and all the html codes are working.

      Read my contact us page at the footer to contact me.

      Delete
  6. Really very important bloggers who do not want spam on their blogs. I will try on my blog.

    ReplyDelete
  7. I very thank full to your tips which is given in this blog. blog creating is a small part of seo.

    ReplyDelete

  8. is important in digital marketing, thank you for sharing this blog.

    ReplyDelete
  9. Thank you for sharing source of information which is used in .digital marketing

    ReplyDelete
  10. Ever wanted to get free Twitter Followers?
    Did you know that you can get them AUTOMATICALLY AND ABSOLUTELY FREE by getting an account on Like 4 Like?

    ReplyDelete
Emoticons Smileys for Blogger Comments
Show Emoticons >>

PLEASE NOTE:

If you have any questions regarding this article,please comment and I'll reply as soon as possible.

We have Zero Tolerance to Spam. Comments with Links will be deleted.