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

Add Facebook, Disqus and Google-plus Comments to Blogger

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.

22 Comments

  1. After some trouble, the thing is working like a clock... except for one thing... Liezl-sensei, how am I supposed to remove that accursed 0 comments from before the Google+ button again?

    ReplyDelete
    Replies
    1. Sorry for the late reply. The notice went straight to my spam folder. Anyway, just delete this line from Step 6:
      <div class="g-commentcount" expr:data-href='data:post.canonicalUrl'/>

      Delete
    2. Thanks for the answer! Anyway after verifying that all my Google+ comments were duplicates of my blogger comments I just deleted everything... but well now I am faced with a different question... How I can place the disqus or the facebook comment plugin first?

      Apparently I don´t get many comments cause people nowadays don´t use their blogger accounts anymore... preferring to comment via facebook and disqus that are severely more common... or so I would like to think...

      Once more thank you
      Até mais ver
      mr. Poneis

      Delete
    3. And yep just putting comment-tab2 before comment-tab1 didn´t did the trick... Just reread that part of the post...

      Delete
    4. How about interchanging the number assigned to the "id" of the tab say if your Blogger commenting system has an id of comment-tab1 and Facebook of comment-tab2, swap their IDs. Now, your ID for Facebook would be comment-tab1.

      Delete
    5. Sorry... didn´t work either...

      Delete
    6. I have another blog and in that blog, I put the Facebook div (comment-tab1) above the Blogger div (comment-tab2):
      https://3.bp.blogspot.com/-gj8E51nkBvM/V6O2TekZTsI/AAAAAAAAEXw/OhDikiVjWawlgthefF3BaSrnJIvysY6JwCLcB/s1600/comments.png

      Delete
    7. Have you enabled threaded comments? I've added Step 8 for that. Do this or else when one comments in blogger, all the other tabs will be gone (no toggle-able tabs, no other commenting systems present).

      Delete
    8. That image really did the trick! Thank you very much!

      Delete
  2. Hey,
    i wanted to add Disqus and Facebook Comments as Tabs on my Blog www.gooloo.de. But it will and will not work. Can i maybe send you a saved Template so you can look at that? For now i had to go back to the old Template with only Disqus, since i wouldn't have Comments without that. :)

    ReplyDelete
  3. this trick is available to wordpress site?

    ReplyDelete
    Replies
    1. Except for Blogger comments, since JQuery is already embedded in Wordpress, the code here should work there. If there's any HTML, just make sure to convert it properly to PHP. That should be easy to do.

      Delete
  4. AZCO Real Estate Manages Exclusive Premium Properties For Buying, Selling, buy apartment in dubai Renting & Inhouse Mortgage Services Across The United Arab Emirates.

    ReplyDelete
  5. Do you want to Trim your Bangs more easily and precisely at home than this product is right for you fringe trimmer

    ReplyDelete
  6. Find out why Better Gardens is the best company to build beautiful swimming pools in Dubai. Top landscape company

    ReplyDelete
  7. Thanks for sharing great information. If you are seeking affordable and premium properties in Dubai? We have many option our real estate brokers in Dubai provide expert guideless in every matter of property. Contact us: info@xsite.ae

    ReplyDelete

Post a Comment


  • SHARES





More from Zirev