How to Add Facebook Comment Box On Blogger Blog

If you are looking for a way to add facebook comment box to your blogger blog then you can follow this complete guide.As facebook offers us so many plugins like share button, like button facebook fan page plugin.Facebook comment box is also one of the top plugins provided by facebook.If yoBlogspotuser then you must be familiar with facebook comment system.If you except more comment on your blog then you can add this plugin to your blogger blog also but facebook comment box plugin has several good and bad effect also.If you use facebook comment box on your blog then you can easily get good number of visitor to your blog from facebook only because when someone comment on your blog it will be updated to their facebook timeline.The only bad effect is Googlebot can't crawl comments from your blog still it is good because you can prevent spam comment on your blog.So if you want to add third party comment box on your blogger blog then facebook comment box plugin is good you must try this plugin.This tutorial will help you add facebook comment box plugin to your blogger blog.

Steps to Add Facebook Comment Box To Your Blogger Blog:

Step 1: Create Facebook App
First of all you need to add create facebook app in order to get facebook Application ID
Go to facebook developer page from here Then click on Add a New App you will get a popup window.

Then fill Display Name, Contact Email in the box and select the Category of your application.

Now Click on Create App ID
Then go to App Review tab in that page.As you can see on the image.


Now Make your comment box public by changing the App Review status.
You have completed your first step now copy the APP ID.



Step 2: First go to your blogger template section by logging in your blogger account now click on Edit HTML
Now find <html by pressing Ctrl+F
Replace <html with below code

<html xmlns:fb='http://www.facebook.com/2008/fbml'
Now try to find <head> and Paste below code after <head>

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='TricksCloud' property='og:site_name'/>
<meta content='APP ID' property='fb:app_id'/>
<meta content='http://www.facebook.com/TricksCloud' property='fb:admins'/>
<meta content='article' property='og:type'/>

In this code replace TricksCloud with your blog name and APP ID with your Comment box Plugin APP ID which you have copied in Step 1 and also replace your facebook page username.



Step 3:Now find <body> or <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’> by Ctrl+F


<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'APP-ID',
      xfbml      : true,
      version    : 'v2.7'
    });
  };

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


Now Replace APP ID

Now add above code below <body> or <bodyexpr:class=’&quot;loading&quot;+data:blog.mobileClass’>
Now search this code  <b:include data='post' name='post'/>
Then add below code after searched code.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div>
</div>
</b:if>

If you want you can change the width of your comment box in above code.
Now Click on Save template

You have added facebook comment box plugin on your blog.


Hide your Default Blogger Comment Box:

First go to Setting tab on your blog dashboard
Then post comments and sharing Now change comment location to Hide


Now blogger default comment box is hidden you can see only facebook comment box.

I hope this guide was helpful to you.So please share this post using share button below.

2 comments:

  1. Nice article. It really helpful to add facebook comment box on Blogger Blog. Please tell how to add in wordpress.

    ReplyDelete
    Replies
    1. Thanks Ashutosh,
      You liked this...You can use "Facebook Comments" plugin to add facebook comment box to wordpress.

      Delete