Add Facebook and Blogger Comments As Tabs In Blogger

Having multiple comments box on your posts make more comments. The most popular of Comments are Facebook. Why not add Facebook comments with Blogger comments on your blog. This can be easily done if you follow this tutorial carefully.

Demo

Go to Blogger -> Template -> Edit HTML.

Paste the following code below “” tag :

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script> 
<script src='http://code.jquery.com/jquery-latest.js'/>
<script type='text/javascript'>
 function commentToggle(selectTab) {
  $(".comments-tab").addClass("inactive-select-tab");
  $(selectTab).removeClass("inactive-select-tab");
  $(".comments-page").hide();
  $(selectTab + "-page").show();
 }
</script>

Search for <html and replace it with the following code :

<html xmlns:fb='http://ogp.me/ns/fb#'

Add the following HTML code above “” :

<style>
/*--- Tabbed Facebook Comments By subinsb.com ----*/
.comments-page {
 background-color: #f2f2f2;
 width:450px;
}
#blogger-comments-page {
 padding: 0px 5px;
 display: none;
}
.comments-tab {
 float: left;
 padding: 5px;
 margin-right: 3px;
 cursor: pointer; 
 background-color: #f2f2f2;
}
.comments-tab-icon {
 height: 14px;
 display: inline-block;
 vertical-align: top;
 margin-right: 3px;
}
.comments-tab:hover {
 background-color: #eeeeee;
}
.inactive-select-tab{
 background-color: #d1d1d1;
}
</style>

By using the Blogger shortcut key **CTRL + F **find this code :

<div class='comments' id='comments'>

Note : If you found two codes like above, you have to paste the code shown below after the two codes you found.

<center>
 <table>
  <tbody>
   <tr>
    <td>
     <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' style='float:left;' title='Facebook Comments'> 
      <img class='comments-tab-icon' src='https://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/s400/fbcomment.png'/>
      <fb:comments-count expr:href='data:post.url'/> Comments 
     </div>
    </td>
    <td>
     <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle('#blogger-comments');' title='Blogger Comments'>
      <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/>
      <data:post.numComments/> Blogger Comments
     </div>
    </td>
   </tr>
  </tbody>
 </table>
 <div class='comments-page' id='fb-comments-page'>
  <b:if cond='data:blog.pageType == "item"'>
   <div id='fb-root'></div>
   <script>
   (function(d){
   var js, id = 'facebook-jssdk';
   if (d.getElementById(id)){return;}
   js = d.createElement('script');
   js.id = id;
   js.async = true;
   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
   d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
   </script>
   <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/>
  </b:if>
 </div>
 <div class='comments comments-page' id='blogger-comments-page' style='display:none;'>

Save the template. You will get an error. Blogger will automatically highlight a code (). Paste the following code above the code Blogger highlighted :

</center></div>

Save the Template and check out a post on your blog. Every post on your blog will now have a Facebook & Blogger Comments tabbed. If you want help, post a comment.