12/22/2014

How to add Facebook Comment box in Blogger


Facebook not only provide chatting and sharing facility but also provides their sdk to webmaster such Like button, comment box. Your visitors can comment on your blog through their Facebook account. Facebook comment feature helps you a lot to increase your blog traffic because when someone comment on your blog then his/her comment also visible by their friends.


Now follow the below tutorial to add Facebook comment box on your blog . The below steps is divided into two parts;

Related : 'Add Facebook Like Box below every post on blogger'.

Note : Backup your Blogger Blog Template

Part 1 : creating a Facebook apps id

 1. First of all to create a Facebook apps id , go to Facebook developer page .and register their a Facebook apps developer .

 2. Now, click on Add a new app . Now, you will get 4 option, then click on Website.

 3.  Now, Enter your apps name My Comment box. Then click on Create a New Facebook apps id. see below picture
                              
How to add Facebook Comment box in Blogger
                            
  4. Then, again a pop up message will appear. Then choose your category Apps for pages. Then click on Create app ID. see below picture,

                                 

How to add Facebook Comment box in Blogger

 5. Now, a message will ask for Captcha. Then enter Captcha and then click on Submit.   And wait for sometime.
                                  
 6. Now, Your apps id is created. Then Copy and Paste the code on your Notepad. See below picture,
                                       
                      How to add Facebook Comment box in Blogger                     


 Part B : Add comment box to your blogger blog

Note : First Backup your Blogger Template, if you don't know, then click on the below topic, 'How to backup blogger blog and Template'


1. First, Login to your blogger account.

2. Go to Dashboard > Template > Edit template.

3. Now, Search for <html

4. And then, Replace the Above code with the below code. .

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

              
5. Now, again Search for < body >  And Paste the below code just after it.


<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;FACEBOOK-APPS-ID&#39;,
      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(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script>


Note : Replace FACEBOOK-APPS-ID with your Facebook app id which you copied in Notepad.


6. Now, again Search for < /head > And then Paste the below code just above it.           
                               


<meta expr:content='data:blog.pageTitle' property='og:title'/> 
<meta expr:content='data:blog.url' property='og:url'/> 
<meta content='Hugestreet' property='og:site_name'/> 
<meta content='Your Blog Logo Image here' property='og:image'/> 
<meta content='FACEBOOK-APPS-ID' property='fb:app_id'/> 
<meta content='http://www.facebook.com/hackerz.worldd' property='fb:admins'/> 
<meta content='article' property='og:type'/>


Note : 

    * Replace Hugestreet with your Blog name.

    * Replace Your Blog Logo Image Here with your Blog logo image URL.

    * Replace FACEBOOK-APPS-ID with your Facebook apps id which you copied in Notepad.

    * Replace hackerz.worldd with your Facebook page .


7. Now again Search for <b:includable id='comment-form' var='post'>  And then Paste the below code Just after it.



<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='540'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:530px;'>Facebook Blogger Plugin by <b><a
alt='blogger templates' href='http://hugestreet.blogspot.com' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger
templates'>hugestreet</a></b> Enhanced by <b><a alt='blogger widgets' href='http://hugestreet.blogspot.com/2014/12/add-facebook-comment-box-in-blogger.html'
style='text-decoration:underline;
color:#fff;' target='_blank' title='Blogger Widgets'>Get this widget</a></b></div></div>
</b:if>


Customization  :  

 * Scheme is in light, If you Want to change to dark, then simply replace light with dark.

 * Width is 540, Change the width size accordance to your blog template.

 * Change footer width size. Size is 530.


8. Now Save the Template. You have done now.