Install Multiple Comment Systems In Blogger

Comments play a very important role in search engine optimization of your blog because they represent users' interaction to the site and give an idea about the popularity of your website. An adequate commenting system is necessary for a struggling website. There are many commenting systems available on the internet to embed in your site among which we have already learned to install in your blog.

• Install Disqus Comments System To Blogger
• Enable Google Plus Comment System In Blogger
• Install Facebook Comments Box To Blogger

In this article, I am going to share a method to add multiple comments system in blogger that works at the same time along with blogger default commenting system as you can see in my blog.

Before implementing this system to blogger, you must know its pros and cons. The major benefit of using all these comments system is that interaction is increased on your blog because it allows users to comments with multiple social plugins. With this you enjoy advantages of all major comment systems.

Major loss which you can experience is decrease in loading speed. As all systems are run by third party websites and their coding takes some time to load thus when they load collectively, they might give a notable decrease in page loading speed. To avoid this from happening, we advise you to avoid other factors which slow down page loading speed. These factors include use of custom fonts, excessive use of third party codes, use of heavy images etc.

You can see the demo here.

Now we proceed to the method.

How To Add Multiple Comments System In Blogger:

1. Login to your blogger account. Go to blogger dashboard > Template > Edit HTML.

2. XML template coding of your blog will be opened. Now click anywhere inside the template and press CTRL+F. In the search bar, type </head> and press enter.

3. Just above the </head> tag in the template, paste the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.disqus-comment-style,.fbcommentsys,.gcontainer {
display:none;
}
.showme {
display:block;
}
.hideme {
display:none;
}
.dfcommt,.discmmt,.fbcommt,.gcommt {
width:25%;
color:#fff;
padding-top:10px;
padding-bottom:10px;
float:left;
text-align:center;
font-family:&#39;
font-style:normal;
font-weight:700;
cursor:pointer;
}
.dfcommt:hover,.discmmt:hover,.fbcommt:hover,.gcommt:hover {
opacity:.5;
}
.cmtpickerbox {
margin:0 0 30px;
padding-bottom:40px!important;
width:100%;
}
</style>
</b:if>

4. Now type <div class='post-footer'> in search box and press enter 2 times. You may find this tag two times in your template so remember to find second <div class='post-footer'> tag. You can also see the line numbers at the left side of coding to confirm it.
Just above this tag, paste the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
$(document).ready(function() {
    $(".dfcommt").click(function() {
        $(".comments").addClass("showme"), $(".disqus-comment-style").removeClass("showme"),
        $(".fbcommentsys").removeClass("showme"), $(".gcontainer").removeClass("showme"),
        $(".comments").removeClass("hideme");
    }), $(".fbcommt").click(function() {
        $(".fbcommentsys").addClass("showme"), $(".disqus-comment-style").removeClass("showme"),
        $(".comments").removeClass("showme"), $(".gcontainer").removeClass("showme"), $(".comments").addClass("hideme");
    }), $(".discmmt").click(function() {
        $(".disqus-comment-style").addClass("showme"), $(".fbcommentsys").removeClass("showme"),
        $(".comments").removeClass("showme"), $(".gcontainer").removeClass("showme"), $(".comments").addClass("hideme");
    }), $(".gcommt").click(function() {
        $(".gcontainer").addClass("showme"), $(".fbcommentsys").removeClass("showme"), $(".comments").removeClass("showme"),
        $(".disqus-comment-style").removeClass("showme"), $(".comments").addClass("hideme");
    });
});
</script>
<div class='cmtpickerbox'>
<div class='dfcommt'><img alt='blogger-comment, blogger-logo. blogger-bubble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiThPYwmUOP6qFXq5jSqXTARwcTCc1vnj7KloYaZrqIInISP5gQM3dJoT-fOP2rQ7rDrmFDMIxnetIlWPpfQdieUaVrEfi7WJG7-kMFsKWGsLW5yrTnSHrUlFYkoUfEo1abnz_HiXbe2RS5/s1600/bubble-309556_640+copy.png'/></div>
<div class='fbcommt'><img alt='facebook-comment, facebook-logo. facebook-bubble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjigBOOGY_WBs1_BKjAKSLOqpS3hHB7vrBU95OSiAdsarkT50dwiIbu2qETfr6vNyYHA3a-4ufyNPw1JIyen6AhX8pFNvKooRgs9vhKbZzrZ7g2zl3qzk2B5VIBbv9Rvl8WZsRStAvn-Sxu/s1600/bubble-309556_640+copy.png'/></div>
<div class='discmmt'><img alt='disqus-comment, disqus-logo. disqus-bubble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB3yu3_10xDycIlmb6uX1XJrVxgHFONWoETjvbS5EdSEcZc9aHJbImNfJbeXycS2-ox70pktQWqQpHwaeQ7OwBuve_wwhi9fbTz4xR8OjrQIzWNo-YocOx6qHwjbjtJf_flSxoyskESMMj/s1600/bubble-309556_64.png'/></div>
<div class='gcommt'><img alt='googleplus-comment, googleplus-logo. googleplus-bubble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAFE5Dt2GyBteQik2GB0OE6SzlAr6Xs9XwEaSwzOa-iFDC6X2YNhp6dcSqNcl_hUdu_vciKun7C0AG1fQ0gxaFGhSrU096KcBmL8FPnJrZkawUYnu0Ft2vmLgl3ZszHa-k3ugXMYFb6Vfa/s1600/bubble-309556_=.png'/></div>
</div>
<br/>
<div class='gcontainer'><div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='650' expr:data-href='data:post.url'/></div>
<div class='disqus-comment-style'>
<div id='disqus_thread'/>
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = &#39;ithelpzone&#39;; // required: replace example with your forum shortname
/* * * DON&#39;T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
dsq.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[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>
<div class='fbcommentsys'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='650'/>
</div></div>
</b:if>

Replace "ithelpzone" with your own Disqus short name. Learn how to find your Disqus short name.
Replace values highlighted with yellow to set the desired width of Google plus and Facebook comment boxes according to your template. If they are satisfying enough, then no need to make any change in it.

5. Search for </body> tag, just above this tag, paste the following code.

<div id='fb-root'>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'Your_FB_App_ID',
      xfbml      : true,
      version    : 'v2.2'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = '//connect.facebook.net/en_US/sdk.js';
     fjs.parentNode.insertBefore(js, fjs);
   }(document,'script', 'facebook-jssdk'));
</script>
  </div>

Replace red highlighted Your_FB_APP_ID with your own app ID. Learn how to get your FB app ID.

6. Then search for </head> tag and just above it, paste the following meta tag.

<meta content='Your_FB_App_ID' property='fb:app_id'/>

Replace red highlighted Your_FB_APP_ID with your own app ID

7. Click on "Save Template". You will see Disqus, Facebook and Google Plus commenting systems activated in your blog.

That's it. Hope you like this tutorial. If you are facing any problem in implementing it, feel free to ask us. We will try our best to solve your problem. Stay tuned with us to get more from us.