Facebook
RSS

How To Add Facebook Comment Box In Blogger

0 comments
-
Unknown


You might be thinking that what is the purpose of using Facebook comment box in blogger?
Their are many reason for using this but i am describing some main reasons.
1. Old blogger comment box uses Google account.And most of the visitors of your blogger don't have Google account.

2. On the other hand if you are using FB Comment box you will get more comments.

Adding Facebook comment box to blogger is as easy as 123 :).

You  can add FB Comment box to your Blogger blox by following these easy & simple steps.




Step 1: Goto Facebook Developer Page. A box will popup as shown in image below.Type your App name.




Step 2: Now copy your App ID as shown in image below.Also Add your site address in website login field.



Step 3: Now login to Blogger Dashboard & navigate to  
  • Template>Edit HTML

Step 4: Mark option "Expand Widget Template" Now search for <data:post.body/> In Template Code and paste the follwing code below <data:post.body/>.


Code:



<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <p align='left'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib7FaY86VFrIsH0H6vmqFBtDc6p6vq3aQdMzqHUP6u2tibXQyuIV-tAt9Xx78cAIKzzDyBOU455iIZ2dqUkUSaeoo_toXl8_uXzo4JM4-YGBh_3uD9tVhnzJ7ieg3L9jQhfmEESgFpq9Ka/s1600/cmds.png'/></p>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
  FB.init({appId: &#39;APPID&#39;, status: true, cookie: true,
  xfbml: true});
  };
  (function() {
  var e = document.createElement(&#39;script&#39;); e.async = true;
  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>
  <fb:comments/>
  </b:if>



Step 5: Copy your App ID as show in picutre above & Replace it in code with APPID.


Step 6: Now you need to hide your old Blogger Comment Box.For this puropose Goto

  • Blogger Dashboard>Settings>Posts&Comments>

Their your will see an option for Comment box to Show or Hide. Checkmark 'Hide' & Save Changes.

Thats It You'r Done........

This is my first post so please must like & share it.....



EXTRAS:

If you want to change Image that's shown above comment box you can also use these images that we i have created for you.... :P

Right click on image you want to choose & click on Copy image location or Copy image link. And Replace copied link with the following link in the code

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib7FaY86VFrIsH0H6vmqFBtDc6p6vq3aQdMzqHUP6u2tibXQyuIV-tAt9Xx78cAIKzzDyBOU455iIZ2dqUkUSaeoo_toXl8_uXzo4JM4-YGBh_3uD9tVhnzJ7ieg3L9jQhfmEESgFpq9Ka/s1600/cmds.png
 
 
 



 


You Can Also Add Me On Google +

Categories: , ,