How to Add Facebook and Disqus Comment Systems to Blogger in Tabs Using JQuery

Ever since I've learned to blog, I've been customizing my blogger comment section a lot of times to get that certain desired look. The look is one thing, choosing what comment system for my blog is quite another. There's facebook comment box and there's the famous disqus commenting system.  So then I thought, why not mash them altogether?

• For November 2015, I've made a fresher and better tutorial through this link. It showcases step-by-step instructions on the things needed to add for Blogger coding. If you want to understand what are added and how they are added, I suggest for you to head over that tutorial instead.

I've learned a few tricks scouring some tutorials. Trust me, it wasn't that easy like what most would claim especially if you get "little codes" from Github or look up your problem at StackOverflow. You'd come across some problems which are hard to address especially for dummies. Like myself. And now I've finally come up with a sleek design for my blog in a much convenient way to deliver which I'm going to share.

Some tutorials out there will teach you to REPLACE blogger comment section with facebook social plugin or with disqus commenting system. As to integrate the three? Good luck. What makes this tutorial different from other tutorials? Aside from the idea that we won't be replacing our blogger comment section with another, we'll employ a tiny jquery script that will make the tab selection work not just properly but with animation.

I could ask you to just search tutorials that will help you put facebook or disqus comment section to blogger. But then, why don't I just do that part myself?

This post is practically my future reference shall I make any changes (again!) to my comment section.

This tutorial is intended for dummies who don't have much knowledge in coding (or blogger for that matter). So pardon me if I'm going to treat you like a fool.

Here's how it looks when blogger comment tab is activated:

When facebook comment tab is activated (I made 3 test comments to make sure that the comment counter of facebook works.):

When disqus is activated:

Note: You can always change the color of each tab. I also expect you already know how to tweak your blogger template and that you have activated threaded commenting in blogger. Wait, didn't I say this tutorial is for dummies? Ok, scrap that. I'll get to that later.

So here's what you are going to do:

1. Create a Facebook Application
2. Register at Disqus for your website
3. Enable Threaded Comments in blogger (Optional)
4. Add meta tags in your blogger template (Facebook, Font-Awesome Library from BootStrap and JQuery Source)
5. Change codes in comments includable section
6. Apply changes
7. OPTIONAL: Add Google+ System (so there are now 4 comment systems)

For Facebook Comment System

1. Login to Facebook Developers

2. Click on Apps then click Create New App

3. Fill out the Form then click on Create App

The Display Name could be a few words. The namespace is one word.

4. After submitting, you'll be directed to your App Dashboard. Copy your App ID and save it somewhere. If you have a photographic memory, I mean good memory, you might as well just memorize it.

5. Click on Add Platform then Choose Website.

6. Fill in the details. Basically, you just have to put your website URL in both the Site URL and Mobile Site URL. (I only had mine on Site URL)

Input your own details on the boxes I highlighted. Notice how I added /* to the url? That's to ensure all pages on the website are accounted for. But it wouldn't hurt if you don't add that, just your URL as is. For new bloggers, your URL is something like this: http://DOMAINNAME.blogspot.com *rolls eyes* whatever your domain name is. I know, I know. I expect you have gone like this now:

7. Hit Save Changes.

8. You can moderate your FB APP comments here.

For Disqus Comment System

1. Signup for Disqus (for website) here: Disqus Signup

2. Choose platform: Universal Code

3. You don't have to do anything from hereon. You will be directed to this page: Disqus Universal Code and you'll see the instruction for installing disqus to your site. I got that covered in the next Steps. Basically, you're done! (Just for this part)

4. At this point, make sure you are signed in to your Disqus Account. Disqus Comment count link text can be customized at your
Disqus admin's Settings > General page.

Change everything to this image:

In short, just delete the word Comments in all the Count links.

5. Moderate Disqus Comments here.

Adding Meta Tags

1. Find <head> and add these things below it:
(Note: click on the text area then Ctrl + C)

<meta content='YOUR_FB_ID' property='fb:admins'/><br /> <meta content='YOUR_FB_APP_ID' property='fb:app_id'/><br /> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><br /> <link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>

2. Replace YOUR_FB_ID with your facebook ID and YOUR_FB_APP_ID with the APP ID I told you to memorize earlier. You can choose 2 facebook ID (fbid): your personal fbid and your apps' fbid.

If you have already added a different Jquery pack in your template, then go to this tutorial, How to Use Multiple JQuery on the Same Page to Avoid Conflict. Updated!

Enable Threaded Comments in Blogger

This part is optional, your choice.

1. Go to your blogger home

2. Go to Settings:

3. Click on Post and Comments under Settings. Then toggle Comment Location and choose Embedded:

That's it!

Changes in the blogger template

I already said this tutorial is for dummies, right?

That's because I'm lazy going over the details from hereon. So just bear with me. And by lazy, I don't want to discuss which part inside a section needs to be eliminated and how to replace with another html code. Rather than going through the hassle of changing each of the tiniest detail inside the includable section, I'd rather have you replace the entire includable section with something akin to a single click.

Step 0:

Go to Blogger Home TemplateBackup/RestoreDownload full templateCloseEdit HTML.

Step 1:

Add this CSS BEFORE ]]></b:skin>

/* Tabbed Comments */ .comment-count { padding-right: 1.0em; } .comment-count a{ color: #fff !important; } .blog-comment-tabs { list-style: none; float: left; margin: 15px 0; display: inline-block; padding: 0; width: 100%; background: #444; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .4); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .4); box-shadow: 1px 1px 5px rgba(0, 0, 0, .4); } .blog-comment { font-family: 'Open Sans Condensed'; float: left; font-size: 1.2em; list-style: none outside none; text-transform: uppercase; width: 27.5%; margin: 1px; padding: 10px 20px !important; font-weight: normal; color: #fff; cursor: pointer; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .blog-comment.selected { cursor: pointer; padding: 11px 20px !important; margin: 0 0 0 -8px; } .blogger-comment.selected { background: #FC9F4E; } .fb-comment.selected { background: #3E5C9A; } .disqus-comment.selected { background: #67C0E0; } .commenticon { margin-right: 15px; }

Edits:

1. In .blog-comment, change font-family: 'Open Sans Condensed'; to whatever font you like or whatever is available in your blogger site.
2. If the Comment Tabs collapse, in .blog-comment, either you change the font-family or the font-size.
3. The margin under .blogger-comment.selected (margin: 0 0 0 -8px;) is for the sliding effect in JQuery as you select tabs. Change the value of -8px if you don't want the sliding effect (or emphasize the effect) and in effect, change the width under .blog-comment.
4. If you want to change the color of the tabs as you hover, then add this:
.blog-comment:hover { background: #EECCE; }
Change #EECCE to whatever color.
5. Update! Someone told me that his blog comment section shows an inappropriate blank space that wasn't there before. Do this: In .blog-comment-tabs, you either delete the margin ( margin: 15px 0;) or change the value to 0 auto or 0.

Step 2:

Search for this code: <b:includable id='comments' var='post'>

Because I'm really lazy...

Step 3:

Click on the space beside the number assigned to that line of code to minimize the whole "includable" section.

Note: The numbering on my template differs from yours.

Step 4:

Highlight the whole "includable" section. We are going to replace all of that: from <b:includable id='comments' var='post'> to </b:includable>. Be careful not to exceed other includable sections. In any event shall that includable section collapse, just keep trying from Step 1.

Step 5:

(Be careful!) Delete that includable section and replace with this After highlighting, paste over this code:

<b:includable id='comments' var='post'> <div id='blog-comment'> <div class='blog-comment-tabs'> <ul> <li class='blog-comment blogger-comment'><span class='comment-count'><data:post.numComments/></span><i class='fa fa-comments commenticon'/>Blogger Comment</li> <li class='blog-comment fb-comment'><span class='comment-count'><fb:comments-count expr:href='data:post.url'/></span><i class='fa fa-facebook commenticon'/>Facebook Comment</li> <li class='blog-comment disqus-comment'><span class='comment-count'><a expr:href='data:post.url + "#disqus_thread"'/></span><i class='fa fa-comment commenticon'/>Disqus Comment</li> </ul> </div> <div class='commtab' id='blog-comment1'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Leave your 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> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>   <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>   <data:post.commentRangeText/>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> </span> </b:if> <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'> <dl expr:class='data:post.avatarIndentClass' id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl> </div> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> <data:post.oldestLinkText/> </a> <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> <data:post.olderLinkText/> </a>   <data:post.commentRangeText/>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> <data:post.newerLinkText/> </a> <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> <data:post.newestLinkText/> </a> </span> </b:if> <p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p> </b:if> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </div> <div class='commtab' id='blog-comment2'> <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' height='110' width='720'/> </div> </div> </div> <div class='commtab' id='blog-comment3'> <div id='disqus_thread'/> <script type='text/javascript'> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'YOUR_DISQUS_SHORTNAME'; // required: replace example with your forum shortname /* * * 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'> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'YOUR_DISQUS_SHORTNAME'; // required: replace example with your forum shortname /* * * 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> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" /> <script type='text/javascript'> var $jq = jQuery.noConflict(); </script> <script type='text/javascript'> //<![CDATA[ $jq(document).ready(function(){ // When user clicks on tab, this code will be executed $jq('.blog-comment-tabs ul li').click(function(){ // First remove class "selected" from currently active tab $jq('.blog-comment-tabs ul li').removeClass('selected'); // Now add class "selected" to the selected/clicked tab $jq(this).addClass('selected'); // Hide all tab content $jq('#blog-comment .commtab').hide(); // Show selected tab along with its assigned content $jq('#blog-comment .commtab').eq($jq('.blog-comment-tabs ul li').index(this)).slideToggle()(200); }); // Default Tab Selection: Hide all tab content $jq('#blog-comment .commtab').hide(); // Shows the first tab content $jq('#blog-comment .commtab:first').show(); // Default Selected Tab: Blogger Comment Section $jq('.blog-comment-tabs ul li:first').addClass('selected'); }); //]]> </script> </div> </b:includable>

If you really want to know what happened, just compare the new includable section from your old template. Besides, instructions are commented in the provided javascript code. More than anything else, that tiny jquery code is the most important part of the tutorial. Without it, you might just as well stick to your old template.

EDIT!

Change the width of facebook-comment-body by changing the value of width='720' to whatever width that is suitable for your blogger site. This occurs in both Steps 5 and 9 so be sure to edit the other one too.

Step 6:

Replace YOUR_DISQUS_SHORTNAME with your disqus shortname. This appeared twice! If you remember from the Install Instruction for the Universal Code of Disqus, I kept the whole codes as pure as possible.

Edits:

1. In fb-comment-box, change width to suit your site.

2. Change this comments h4 'Leave your comment' to whatever heading you want when the comment count is 0.

Step 7:

For those who enabled Threaded Comments, proceed! Otherwise, Click HERE.

Step 8:

Search for this code: <b:includable id='threaded_comments' var='post'>

Step 9:

Highlight the whole includable section as usual and replace with this:

<b:includable id='threaded_comments' var='post'> <div id='blog-comment'> <div class='blog-comment-tabs'> <ul> <li class='blog-comment blogger-comment'><span class='comment-count'><data:post.numComments/></span><i class='fa fa-comments commenticon'/>Blogger Comment</li> <li class='blog-comment fb-comment'><span class='comment-count'><fb:comments-count expr:href='data:post.url'/></span><i class='fa fa-facebook commenticon'/>Facebook Comment</li> <li class='blog-comment disqus-comment'><span class='comment-count'><a expr:href='data:post.url + "#disqus_thread"'/></span><i class='fa fa-comment commenticon'/>Disqus Comment</li> </ul> </div> <div class='commtab' id='blog-comment1'> <div class='comments' id='comments'> <a name='comments'/> <h4> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Leave your 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> <div class='comments-content'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='threaded_comment_js'/> </b:if> <div id='comment-holder'> <data:post.commentHtml/> </div> </div> <p class='comment-footer'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='threaded-comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> </p> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </div> <div class='commtab' id='blog-comment2'> <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' height='110' width='720'/> </div> </div> </div> <div class='commtab' id='blog-comment3'> <div id='disqus_thread'/> <script type='text/javascript'> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'YOUR_DISQUS_SHORTNAME'; // required: replace example with your forum shortname /* * * 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> <a class='dsq-brlink' href='http://disqus.com'>comments powered by <span class='logo-disqus'>Disqus</span></a> </div> <script type='text/javascript'> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'YOUR_DISQUS_SHORTNAME'; // required: replace example with your forum shortname /* * * 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> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" /> <script type='text/javascript'> var $jq = jQuery.noConflict(); </script> <script type='text/javascript'> //<![CDATA[ $jq(document).ready(function(){ // When user clicks on tab, this code will be executed $jq('.blog-comment-tabs ul li').click(function(){ // First remove class "selected" from currently active tab $jq('.blog-comment-tabs ul li').removeClass('selected'); // Now add class "selected" to the selected/clicked tab $jq(this).addClass('selected'); // Hide all tab content $jq('#blog-comment .commtab').hide(); // Show selected tab along with its assigned content $jq('#blog-comment .commtab').eq($jq('.blog-comment-tabs ul li').index(this)).slideToggle()(200); }); // Default Tab Selection: Hide all tab content $jq('#blog-comment .commtab').hide(); // Shows the first tab content $jq('#blog-comment .commtab:first').show(); // Default Selected Tab: Blogger Comment Section $jq('.blog-comment-tabs ul li:first').addClass('selected'); }); //]]> </script> </div> <div style='clear: both;'/> </b:includable>

Again, replace 'YOUR_DISQUS_SHORTNAME' with your disqus shortname.

Step 10:

Go back to Step 6 then jump to Step 11.

Step 11:

Hit Save Template.

Step 12:

Complain when something is wrong.

Step 13:

Check out the Comment Section below for reaction.

Done!

OPTIONAL: Add Google+ Comment System
1 From Step 1 from above, edit in CSS the width for .blog-comment from 27.5% to a value of at least 20%. The value is your call. Just play around.
2 Still from Step 1, in the CSS after .disqus-comment.selected, add .gplus-comment.selected {background: #D34836;}
3 From Step 5 from above, use this instead of that:

<b:includable id='comments' var='post'> <div id='blog-comment'> <div class='blog-comment-tabs'> <ul> <li class='blog-comment blogger-comment'><span class='comment-count'><data:post.numComments/></span><i class='fa fa-comments commenticon'/>Blogger Comment</li> <li class='blog-comment gplus-comment'><span class='comment-count'><div class="g-commentcount" expr:data-href='data:post.canonicalUrl'> </div> </span><i class='fa fa-google-plus commenticon'/>Google+ Comment</li> <li class='blog-comment fb-comment'><span class='comment-count'><fb:comments-count expr:href='data:post.url'/></span><i class='fa fa-facebook commenticon'/>Facebook Comment</li> <li class='blog-comment disqus-comment'><span class='comment-count'><a expr:href='data:post.url + "#disqus_thread"'/></span><i class='fa fa-comment commenticon'/>Disqus Comment</li> </ul> </div> <div class='commtab' id='blog-comment1'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Leave your 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> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>   <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>   <data:post.commentRangeText/>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> </span> </b:if> <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'> <dl expr:class='data:post.avatarIndentClass' id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl> </div> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> <data:post.oldestLinkText/> </a> <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> <data:post.olderLinkText/> </a>   <data:post.commentRangeText/>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> <data:post.newerLinkText/> </a> <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> <data:post.newestLinkText/> </a> </span> </b:if> <p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p> </b:if> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </div> <div class='commtab' id='blog-comment2'> <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> <div class='commtab' id='blog-comment3'> <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' height='110' width='720'/> </div> </div> </div> <div class='commtab' id='blog-comment4'> <div id='disqus_thread'/> <script type='text/javascript'> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'YOUR_DISQUS_SHORTNAME'; // required: replace example with your forum shortname /* * * 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'> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'YOUR_DISQUS_SHORTNAME'; // required: replace example with your forum shortname /* * * 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> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" /> <script type='text/javascript'> var $jq = jQuery.noConflict(); </script> <script type='text/javascript'> //<![CDATA[ $jq(document).ready(function(){ // When user clicks on tab, this code will be executed $jq('.blog-comment-tabs ul li').click(function(){ // First remove class "selected" from currently active tab $jq('.blog-comment-tabs ul li').removeClass('selected'); // Now add class "selected" to the selected/clicked tab $jq(this).addClass('selected'); // Hide all tab content $jq('#blog-comment .commtab').hide(); // Show selected tab along with its assigned content $jq('#blog-comment .commtab').eq($jq('.blog-comment-tabs ul li').index(this)).slideToggle()(200); }); // Default Tab Selection: Hide all tab content $jq('#blog-comment .commtab').hide(); // Shows the first tab content $jq('#blog-comment .commtab:first').show(); // Default Selected Tab: Blogger Comment Section $jq('.blog-comment-tabs ul li:first').addClass('selected'); }); //]]> </script> </div> </b:includable>

4 Just like from above, use this in place of Step 9:

<b:includable id='threaded_comments' var='post'> <div id='blog-comment'> <div class='blog-comment-tabs'> <ul> <li class='blog-comment blogger-comment'><span class='comment-count'><data:post.numComments/></span><i class='fa fa-comments commenticon'/>Blogger Comment</li> <li class='blog-comment gplus-comment'><span class='comment-count'><div class="g-commentcount" expr:data-href='data:post.canonicalUrl'> </div> </span><i class='fa fa-google-plus commenticon'/>Google+ Comment</li> <li class='blog-comment fb-comment'><span class='comment-count'><fb:comments-count expr:href='data:post.url'/></span><i class='fa fa-facebook commenticon'/>Facebook Comment</li> <li class='blog-comment disqus-comment'><span class='comment-count'><a expr:href='data:post.url + "#disqus_thread"'/></span><i class='fa fa-comment commenticon'/>Disqus Comment</li> </ul> </div> <div class='commtab' id='blog-comment1'> <div class='comments' id='comments'> <a name='comments'/> <h4> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Leave your 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> <div class='comments-content'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='threaded_comment_js'/> </b:if> <div id='comment-holder'> <data:post.commentHtml/> </div> </div> <p class='comment-footer'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='threaded-comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> </p> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </div> <div class='commtab' id='blog-comment2'> <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> <div class='commtab' id='blog-comment3'> <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' height='110' width='720'/> </div> </div> </div> <div class='commtab' id='blog-comment4'> <div id='disqus_thread'/> <script type='text/javascript'> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'YOUR_DISQUS_SHORTNAME'; // required: replace example with your forum shortname /* * * 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> <a class='dsq-brlink' href='http://disqus.com'>comments powered by <span class='logo-disqus'>Disqus</span></a> </div> <script type='text/javascript'> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'YOUR_DISQUS_SHORTNAME'; // required: replace example with your forum shortname /* * * 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> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" /> <script type='text/javascript'> var $jq = jQuery.noConflict(); </script> <script type='text/javascript'> //<![CDATA[ $jq(document).ready(function(){ // When user clicks on tab, this code will be executed $jq('.blog-comment-tabs ul li').click(function(){ // First remove class "selected" from currently active tab $jq('.blog-comment-tabs ul li').removeClass('selected'); // Now add class "selected" to the selected/clicked tab $jq(this).addClass('selected'); // Hide all tab content $jq('#blog-comment .commtab').hide(); // Show selected tab along with its assigned content $jq('#blog-comment .commtab').eq($jq('.blog-comment-tabs ul li').index(this)).slideToggle()(200); }); // Default Tab Selection: Hide all tab content $jq('#blog-comment .commtab').hide(); // Shows the first tab content $jq('#blog-comment .commtab:first').show(); // Default Selected Tab: Blogger Comment Section $jq('.blog-comment-tabs ul li:first').addClass('selected'); }); //]]> </script> </div> <div style='clear: both;'/> </b:includable>