Add Facebook Comment box in Blogger

There is lost of plugin provide Facebook for the webmaster like facebook like button, share button and facebook comment box for web sites and blog. by this plug in Your visitors can comment, like and share for your blog through their Facebook account. To day i m gonna say say about facebook comment box. Facebook comment box 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 some steps to add Facebook comment box on your blog .


#1 : creating a Facebook apps id

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

2. Click on Add a new app . Now, you see 4 option, then click on Website.

3. Then, Enter your apps name 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 </headAnd 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='best Solution' 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='your fb url here' property='fb:admins'/> 
<meta content='article' property='og:type'/>



Note : 


    * Replace Best Solution 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 your fb page url here 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://best-solution-here.blogspot.com' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger
templates'>Best Solution</a></b> Enhanced by <b><a alt='blogger widgets' href='http://best-solution-here.blogspot.com/2016/09/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.







Previous
Next Post »

1 comments:

Click here for comments
Unknown
admin
March 27, 2018 at 10:48 PM ×

Hello, it is an excellent post. I got many things form your post today, and as always your posts are very active and useful.
Seo Services In DelhiSeo Services Company In Delhi

Congrats bro Unknown you got PERTAMAX...! hehehehe...
Reply
avatar