How to add Facebook, Disqus and Google-plus Comments in toggleable tabs on blogger with jQuery

I've already made a post about it here. Be sure to read that post to [1] register for the commenting systems of facebook and disqus, [2] add library resources and meta tags on the head of your template, and [3] view the images as to how this should work. Basically, after you add the meta tags as instructed from that post, head back over here. That post was meant for dummies.

Note that you don't have to add all 3 commenting systems. You can add just one or two. You will be instructed how to.

This is the more exhaustive version (if the previous post isn't exhaustive enough) for veteran bloggers. And an improved version too. I noticed that instead of following the straigthforward instructions of my previous post, most people would rather change things based on their intuition (copy-pasting codes here and there inside the includable section), instead of highlighting and pasting the code over as instructed, guaranteeing for their actions to fail in implementing the code.

So, for those who are like that, here's the blow-by-blow instructions on how to change things inside the includable section to add Facebook, Disqus and Google-plus Comments on blogger. Note that I will no longer cover how to register for Facebook and Disqus, and how to add things such as meta tags on the head of your template. To reiterate, please read the previous post for that.

Before you do anything, make sure to backup your template first. This whole thing is dependent on jQuery so make sure to add the jQuery library on your template's head.

Basic rundown of Steps:

1. Add CSS style.
2. Add jQuery script to make toggle-able tabs.
3. Add toggle-able tabs.
4. Add divs for Facebook, Disqus and Google-plus comments.

Now, let's begin:

Step 1: Add this style above ]]></b:skin>:

/* Tabbed Comments */
.comment-tabs {
  list-style: none;
  overflow: none;
  margin: 15px 0 0;
  padding: 0;
  display: inline-block;
  width: 100%;
  background: #323232;
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .4);
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .4);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .4);
}
.comment-tabs ul li {
  float: left;
  width: 25%;
  padding: 1.5% 0;
  font: normal 1em 'Oswald';
  text-align: center;
  list-style: none outside none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
comment-name:before {
  padding:0 2%;
  font-family: fontAwesome;
  position:relative;
}
.comment-tabs ul, .comment-tabs ul li * {padding:0; margin:0;}
.comment-tabs ul li, .comment-tabs ul li a {color: #FFF;text-decoration:none;}
.blogger-comment comment-name:before {content:'\f0e5';}
.fb-comment comment-name:before {content:'\f09a';}
.disqus-comment comment-name:before {content:'\f0e6';}
.gplus-comment comment-name:before {content:'\f0d5';}
.blogger-comment:hover, .blogger-comment.selected {background: #FC9F4E;}
.fb-comment:hover, .fb-comment.selected {background: #3B5998;}
.disqus-comment:hover, .disqus-comment.selected {background: #67C0E0;}
.gplus-comment:hover, .gplus-comment.selected {background: #DC4E41;}
Change the font 'Oswald' to whatever font you can use from your template.

Step 2: Ctrl + F <b:includable id='comments' var='post'>
Four lines after that is the h4 heading (<h4>). Change the h4 contents to:

     <h4>
        <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
          <b:if cond='data:post.numComments == 0'> Leave a comment </b:if>
          <b:if cond='data:post.numComments == 1'> 1 Comment </b:if>
          <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if>
        </a>
     </h4>
Step 3: Minimize (or collapse) this whole div: <div class='comments' id='comments'> by clicking on the number on the left of the template editor.

Step 4: Enclose that whole div with another div (with class='comment-tabs-content' and id='comment-tab1').

The whole thing should look like this:

<div class='comment-tabs-content' id='comment-tab1'>
  <div class='comments' id='comments'>...</div>
</div>
Highlighted in green are the added codes.

Step 5: Add the jQuery script for toggle-able tabs by adding this code immediately below
<b:includable id='comments' var='post'>:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $('.comment-tabs-content').hide();
    $('.comment-tabs-content:first').show();
    $('.comment-tabs ul li:first').addClass('selected');
    $('.comment-tabs ul li').click(function(){
        $('.comment-tabs ul li').removeClass('selected');
        $(this).addClass('selected');
        $('.comment-tabs-content').hide();
        $('.comment-tabs-content').eq($('.comment-tabs ul li').index(this)).slideToggle()(200);
    });
});
//]]>
</script>
Step 6: Add toggle-able tabs below the above script:

<div class='comment-tabs'>
  <ul>
    <li class='blogger-comment'><data:post.numComments/><comment-name>Blogger</comment-name></li>
    <li class='fb-comment'><fb:comments-count expr:href='data:post.url'/><comment-name>Facebook</comment-name></li>
    <li class='disqus-comment'><a expr:href='data:post.url + &quot;#disqus_thread&quot;'/><comment-name>Disqus</comment-name></li>
    <li class='gplus-comment'><div class="g-commentcount" expr:data-href='data:post.canonicalUrl'/><comment-name>Google+</comment-name></li>
  </ul>
</div>
Note that you can eliminate the child list (li) comment system that you don't want to use from above.

Scenarios:

• If you only want to use 3 comment systems, change the width of (from Step 1) .comment-tabs ul li to:
  
  width: 33.33%;

  
• If you only want to use 2 comment systems, change the width of .comment-tabs ul li to:
  
  width: 50%;


Step 7: Add the divs for Facebook, Disqus and Google-plus below the closing div (</div>) for
<div class='comment-tabs-content' id='comment-tab1'>.

Note that the id comment-tab1 is for Blogger, comment-tab2 for Facebook, etc. Add each div below each other. Moreover, you can arrange them in any way you like. For example, if you want Disqus comment system to appear first, put the div for comment-tab3 before other divs. Likewise, rearrange the tabs from Step 6.

Facebook Comment System:

<div class='comment-tabs-content' id='comment-tab2'>
   <div class='fb-comment-box'>
     <div>
       <div id='fb-root'/>
       <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' data-height='110' data-width='600'/>
     </div>
     </div>
</div>
Change the value for data-height and data-width to your liking.

Disqus Comment System:

<div class='comment-tabs-content' id='comment-tab3'>
   <div id='disqus_thread'/>
   <script type='text/javascript'>
     var disqus_shortname = 'YOUR_DISQUS_NAME';

     /* * * DON'T EDIT BELOW THIS LINE * * */
     (function() {
       var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
       dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);      })();
   </script>
   <noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>

   <script type='text/javascript'>
     var disqus_shortname = 'YOUR_DISQUS_NAME';

     /* * * DON'T EDIT BELOW THIS LINE * * */
     (function () {
       var s = document.createElement('script'); s.async = true;
       s.type = 'text/javascript';
       s.src = '//' + disqus_shortname + '.disqus.com/count.js';
       (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);      }());
   </script>

   <a class='dsq-brlink' href='http://disqus.com'>comments powered by <span class='logo-disqus'>Disqus</span></a>
</div>
Change YOUR_DISQUS_NAME to your Disqus name.

Google-plus Comment System:

<div class='comment-tabs-content' id='comment-tab4'>
  <script src="https://apis.google.com/js/plusone.js"></script>
  <div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='600' expr:data-href='data:post.canonicalUrl'/>
</div>
Change the value for data-width to your liking.

For threaded comments

Step 8: Ctrl + F <b:includable id='threaded_comments' var='post'>

Repeat the same process done with <b:includable id='comments' var='post'> starting from Step 2. I suggest you do it simply by copying the now-changed contents of <b:includable id='comments' var='post'> and pasting it over to the contents of <b:includable id='threaded_comments' var='post'>.

For the placement of the codes, for example if you have Facebook commenting system as your first tab, then it should look like this:

That's it! Now tell me how you're doing and comment below.