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.

84 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. This comment has been removed by a blog administrator.

    ReplyDelete
  3. 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
  4. 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
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. This comment has been removed by a blog administrator.

    ReplyDelete
  18. This comment has been removed by a blog administrator.

    ReplyDelete
  19. This comment has been removed by a blog administrator.

    ReplyDelete
  20. This comment has been removed by a blog administrator.

    ReplyDelete
  21. This comment has been removed by a blog administrator.

    ReplyDelete
  22. This comment has been removed by a blog administrator.

    ReplyDelete
  23. This comment has been removed by a blog administrator.

    ReplyDelete
  24. This comment has been removed by a blog administrator.

    ReplyDelete
  25. This comment has been removed by a blog administrator.

    ReplyDelete
  26. This comment has been removed by a blog administrator.

    ReplyDelete
  27. This comment has been removed by a blog administrator.

    ReplyDelete
  28. This comment has been removed by a blog administrator.

    ReplyDelete
  29. This comment has been removed by a blog administrator.

    ReplyDelete
  30. This comment has been removed by a blog administrator.

    ReplyDelete
  31. This comment has been removed by a blog administrator.

    ReplyDelete
  32. This comment has been removed by a blog administrator.

    ReplyDelete
  33. This comment has been removed by a blog administrator.

    ReplyDelete
  34. This comment has been removed by a blog administrator.

    ReplyDelete
  35. This comment has been removed by a blog administrator.

    ReplyDelete
  36. This comment has been removed by a blog administrator.

    ReplyDelete
  37. This comment has been removed by a blog administrator.

    ReplyDelete
  38. This comment has been removed by a blog administrator.

    ReplyDelete
  39. This comment has been removed by a blog administrator.

    ReplyDelete
  40. custom pre roll joints boxes are printed packaging for your products. custom pre roll joints packaging is designed with logo and your specification. custom pre roll joints packaging boxes are available at wholesale rates. custom pre roll joints box packaging is inspiring packaging solution for your product. Get custom printed pre roll joints boxes at wholesale rate with free shipping cost all across the United States and Canada.

    ReplyDelete
  41. We're energatic about making products that really work. Every product we make is not only elegant and safe for sensitive skin, but is highily effective at getting the job perfact.
    Custom boxes
    Lipstick boxes
    Cardboard Cigarette boxes
    Custom Lip balm
    Cigarette boxes
    Cardboard box with handle

    ReplyDelete
  42. Remembering diverse geographic markets for a similar battle. Market division is one of the means that goes into characterizing and focusing on explicit markets. Google Ads Expert

    ReplyDelete
  43. The test for most organizations is the way to Best SMM panel utilize Facebook as a business instrument to accomplish the outcomes they need.

    ReplyDelete
  44. Video marketing on Facebook is progressively powerful when your recordings are short,Facebook video downloader close to a moment or two.

    ReplyDelete
  45. "I like your content its unique and interesting, I have been always a fan of those who have this unique talent of writing unique content. Check this: Buy google voice accounts

    ReplyDelete
  46. Thank you for sharing superb information. Your blog is very cool. I am impressed by your blog and detail that you have on this site. Thank you…
    Custom Printed Boxes
    Custom Boxes with Logo
    Custom CBD Boxes

    ReplyDelete
  47. The new policy collapsed all Google services into one, overarching privacy statement. (Google Books, Chrome and Wallet, while consistent with this policy, will maintain additional, separate policies, linked at the bottom of the webpage.) how to search google for email addresses

    ReplyDelete

  48. This is very helpful. To keep the brand at a high position everyone is concerned about the printing and packaging of the boxes. Our service has been very helpful to our customers and, in particular, to solve their problems and to provide them with the best
    custom-cbd-boxes, that is truly trustworthy and worthy of their trust.
    Pre Roll Packaging,
    Cardboard Cigarette boxes,
    Blank Cigarette Boxes,

    ReplyDelete

  49. We offer custom boxes that give you full liberty of customizing the entire packaging at every step. Packaging is the first thing a customer notices. It has to be spot on to appeal to the customers. The visual appeal ticks a customer before they could actually choose a product. Packaging is the first impression we are committed to make that leaves a lasting impact on the customers.
    Custom Packaging Boxes USA
    Soap Boxes
    Slider Boxes
    Nail Polish Boxes
    Lipstick Boxes
    Pillow Boxes
    Custom Lip Balm Boxes

    ReplyDelete
  50. This is such an excessive support. What an attractive idea behind this tremendous shop. What a way to provide such type of productive methodology.
    bath bomb boxes
    Sleeve boxes
    Eye Shadow boxes
    Custom Presentation Boxes
    Custom Book Boxes
    Custom Boxes are animate, atmosphere friendly and easy to neutralize. Recycling process is very favorable and cheap so free from fair of trash pollution. Easy to cart, comfortable and reasonable for the user.
    Custom Printed Boxes

    ReplyDelete
  51. Such a great post I like it very much to keep it up.
    buy packaging boxes - Packhit

    ReplyDelete
  52. very informative blog. Thanks for sharing this knowledge.
    by:custom hemp oil boxes

    ReplyDelete
  53. You have made a good effort. And I think it should be like that because people are very busy in today’s life and they can get more benefit by getting such information in a short time. Here I want to tell you about my business which is all about Custom Boxes. These boxes are made of very reliable and good material and they are well manufactured.
    Eyeliner Boxes
    Custom Cream Boxes
    Custom Hair Spray Boxes
    Our most important thing is that we want to protect our customers and we make these boxes according to their demand. Designing, Printing, Sampling and Shipping we are providing you all these things in one place.
    Custom Boxes

    ReplyDelete
  54. This comment has been removed by a blog administrator.

    ReplyDelete
  55. You have made endless practice. And I guess it should be like that because bodies are hectic in today’s development and they can notice more advantage by acquiring such knowledge in a quick time. Here I need to notify you about my trade which is all about Custom Boxes. Certain boxes are fashioned of very permanent and good materials and they are extremely contrived.
    Custom Lotion Boxes
    Custom Eye shadow Boxes
    Custom Hair Spray Boxes
    Our most valuable point is that we desire to defend our clients and we offer certain boxes according to their desire. Drawing, Printing, Sampling, and Freighting we are giving you a total of certain objects in 1 station.
    Custom Boxes Uk

    ReplyDelete
  56. PackagingNinjas provide the best Custom Lip Gloss Boxes with custom printing and designing. You have the liberty to choose your lamination requirement from matte, gloss, and aqueous options.

    Nail Polish Boxes

    Cream Boxes

    Custom Boxes

    Die-cut, Custom window die-cutting, gold and silver foiling, embossing, PVC sheet, and many other options are available for you in your lip gloss boxes.

    ReplyDelete
  57. We have designed our website according to the requirement of your order. You can easily select the size, shape, design and color of the Cream Jars Cosmetic Packaging. The options of Custom Cream Boxes are also clear to the customers. You can place your order without taking tension because the things which confuse you can be sort out by our customer care center.To get Custom Boxes USA check our packaging strategies and techniques. They are available 24/7 for you.
    After Shave Boxes
    Hair Spray Boxes

    ReplyDelete
  58. Trust me, for beginners, you might be overwhelmed by all the amount of data shown in Google Analytics. To be frank, sometimes you just need a simple report with chart, graph or pie to summarize the performance of your website.Lead generation website

    ReplyDelete
  59. I just had to show my appreciation for the writer's point of view on this subject by leaving a comment. Thank you for writing such top-notch content for your readers. Thank you so much. CBD Oil Boxes

    ReplyDelete

  60. In this modern era, no one has ample time to waste on trivial matters so in this perspective RushPackaging has developed its own website. Our name in burger box manufacturers stood at the top for ages. Visit our website that will help you properly in the customization of Burger Boxes. All features that are important for customization will be showing to you prominently. To keep your burgers hygienic and warm get our best quality Burger Boxes. We design these Custom Boxes at wholesale rates. You will avail yourself of all feasible choices in choice of material, shape, size, and design.

    ReplyDelete
  61. Flamboyant and flawless window pillow boxes for your products will add eye-catching packaging. Custom window pillow boxes in your desired shape and designs can be ordered at a competitive rate. Window pillow boxes offer a glimpse inside the packaging without the need to open the box. Matte and gloss finish add a smooth finish to the box while the text can be added with shine using spot UV. Free design services allow you to get distinctive packaging that can lure customers towards your products.

    ReplyDelete
  62. I've read several articles on this topic over the past few days, but yours is the only one that makes sense to me. Thank you. Custom Burger Boxes

    ReplyDelete
  63. It is an informative article and it would be useful for readers and optimum solution provided in this article.Here i want to show you my business which is about Pillow Boxes.You can customize and print pillow boxes with GoToBoxes easy box. Smoothly modify the dimensions to match your specific requirements. The pillow box form is perfect for transferring exhibition cases, watches, jewelry, and assistants, and further! Pillow Boxes from GoToBoxes lightboxes are the classic product packaging and gift packaging.
    Soap Boxes
    Custom Popcorn Boxes
    Hot Dog Boxes
    custom paper boxes
    Paper Cigarette Boxes

    ReplyDelete
  64. Boost your sales by using our high-quality Custom Lotion Boxes at discounted rates. We have numerous customization options available for Lotion Boxes with free shipping.Lotions or moisturizers are an essential part of the daily skincare routine. They are used to treat dry skin issues and make your skin soft and smooth. They also provide necessary hydration and moisture level to our skin.
    Eyeshadow Boxes
    Hair Extension Boxes
    Our customer care staff is always ready to help you regarding the selection and designing of your Custom Boxes.

    ReplyDelete
  65. Very nice article which might be helpful for readers. Here I want to show you some informative things about Cereal Boxes. GoToBoxes is providing you a different type of customization of Custom Cereal Boxes.
    You just need to tell us about your requirements and the rest is our concern.
    Here some related products are given below:
    Hot Dog Boxes
    Noodle Boxes

    ReplyDelete
  66. tsplus
    tsplus software are used to share the data remotly.

    ReplyDelete
  67. The content you have shared with us is really worth. I have read about a mens skins brand named as Black Wood for Men which offers quality men skin care products in USA.. I have used Black Wood for Men and found it really an amazing skin product which worked really awesome on my skin. Its always been a problem of trusting skin brands but Black Woof for men skin care products done wonder for me.

    ReplyDelete
  68. RushPackaging offers quality and error-free packaging services with free transportation in the whole USA. Get Your Custom Pie Boxes Wholesale Boxes with Logo Made in Custom Shapes, sizes, and designs. Shows off your pie things in delightfully planned custom pie boxes that secure your pies as well as give a remarkable encounter to your clients. Get Your Custom Pie Boxes Made of Custom Shapes, sizes, and formats. We offer the best quality and mistake-free Custom Boxes bundling services with free shipping on the whole USA. We assist you with boosting up your business through our astonishing Custom Pie Boxes Wholesale. We offer free delivery services of pie packaging boxes across the USA.

    ReplyDelete
  69. Hi, You are doing Great I saw your Post I have Offer for all of you mascara-boxes
    We are offering incredibly designed Custom Lotion Boxes with free shipping services. We give wholesale discounts on these amazing sturdy boxes perfect for shipments and order Custom Boxes USA from all over the world.
    mascara-boxes
    lotion-boxes
    Custom Boxes USA

    ReplyDelete
  70. The establishment is such cosmetics that are applied to the face, as a rule, to even the skin and make a reasonable tone to the appearance. Cosmetics establishments shift in the scope of tones and types too. Custom Boxes are needed to pack colored lotion, cream, powder, fluid, or mousse establishments. We are here to deliver custom boxes engraved with item details and capacities that make your establishments conspicuous and imperative among other corrective brands. Get Affordable <a href="https://gotoboxes.co.uk/Custom Foundation Boxes</a>
    taking all things together shapes and sizes with organization logo and item description.GoToBoxes Provide you the best quality of Custom Boxes packaging at a Rate Cheap rate go order and visit our website

    ReplyDelete

Post a Comment


  • SHARES





More from Zirev