Use Disqus and Google+ Comment Systems Tgether in Blogger

Views:

As I discussed in the previous post about the benefits of adding Disquscommenting system in your blog. We also likesGoogle+ Commenting System also because of its advantages and lot of Google+ users. But we can install only one comment system in our blog so we have to choose one and it is really a difficult task. But now the using a little trick we can use both Disqus and Google+ Comment Systems together in our blogs. 

Disqus increases the visibility of our posts and comments because it is connected to major social media like Facebook, Twitter and LinkedIn and now we are adding one of the most social media to our comment system. It is just an blasting trick which is designed by David Kutcher and i just make some customization to make it work perfectly. So lets start the tutorial to add both comment systems in your blog.

How To Install Disqus Commenting System In Blogger? 

How To Use Blogger and Google+ Commenting Systems Together?

How to Install :

• First You'll need to install disqus in your blogger blog.
• Then open your Blogger Dashboard → Template → Html editor
• And search for: (As shown in below screenshot)

<b:includable id='comment_picker' var='post'>

.

.

</b:includable>

• Select the whole piece of code as shown in screenshot and replace it with below given code.

<b:includable id='comment_picker' var='post'>

<b:if cond='data:post.forceIframeComments'>

<b:include data='post' name='iframe_comments'/>

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

<b:else/>

<b:if cond='data:post.commentSource == 1'>

<b:include data='post' name='iframe_comments'/>

<b:else/>

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='threaded_comments'/>

</b:if>

</b:if>

</b:if>

</b:includable>

• Now again Search for:

<b:includable id='threaded_comments' var='post'>

.

.

</b:includable>

• and replace it with the below code:

<b:includable id='threaded_comments' var='post'>

<div id='comment-header'>

  <img class='comment-on' id='comments-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y7rCY6Em9b0FB3rtnH1Rd7UXmRBJ7mkEpYKxFyYqSm7z7q-xcCniQhFyyHzBGeILiC-zp63__ciyWDuamZFQvRshrtgJ_1QR3huuceUlKe73m2dD9JCffCtT-iNg1LU0Y1Ufarpm3g/s50/disqus-social-icon-blue-transparent.png' title='view Blogger comments'/>

  <div class='choice'>Comment With Your Choice</div>

<image id='comments-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='view Google+ comments'/>

</div>

<div id='comment-zone'>

  <div class='comments' id='comments'>

    <a name='comments'/>

    <h4><data:post.commentLabelFull/>:</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 + &quot;_backlinks-container&quot;'>

       <b:if cond='data:post.showBacklinks'>

         <b:include data='post' name='backlinks'/>

       </b:if>

    </div>

    </div>

  </div>

  <div id='gcontainer'><div id='gcomments'/></div>

<script src='http://apis.google.com/js/plusone.js'/>

<script>

gapi.comments.render('gcomments', {

    href: window.location,

    width: '750',

    first_party_property: 'BLOGGER',

    view_type: 'FILTERED_POSTMOD'

});

$('#comments-norm').click(function(){

 // switch to normal comments displaying

 $('#gcontainer').css('display','none');

 $('#comments').css('display','block');

 $('#comments-norm').addClass('comment-on');

 $('#comments-gplus').removeClass('comment-on');

 $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y7rCY6Em9b0FB3rtnH1Rd7UXmRBJ7mkEpYKxFyYqSm7z7q-xcCniQhFyyHzBGeILiC-zp63__ciyWDuamZFQvRshrtgJ_1QR3huuceUlKe73m2dD9JCffCtT-iNg1LU0Y1Ufarpm3g/s50/disqus-social-icon-blue-transparent.png');

 $('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png');

});

$('#comments-gplus').click(function(){

 // switch to google plus comments displaying

 $('#comments').css('display','none');

 $('#gcontainer').css('display','block');

 $('#comments-norm').removeClass('comment-on');

 $('#comments-gplus').addClass('comment-on');

 $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPvCkGyJHyKR4OCq_swX81CAvxsFdYaRbyn2Syk0mHd3qsG_S5K1mzrqAI6xnbmlICtqXLVBH6iX4OFdywXb_Na_TaFfzFlQOE0OOlqmlu9oZNInsZKxk6Hk0zT6SmY2o23NCt4sIpg/s50/disqus-social-icon-dark-transparent.png');

 $('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');

});

$('#comments-norm').hover(

 // switch to normal comments displaying

 function(){

  if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y7rCY6Em9b0FB3rtnH1Rd7UXmRBJ7mkEpYKxFyYqSm7z7q-xcCniQhFyyHzBGeILiC-zp63__ciyWDuamZFQvRshrtgJ_1QR3huuceUlKe73m2dD9JCffCtT-iNg1LU0Y1Ufarpm3g/s50/disqus-social-icon-blue-transparent.png');} 

 },  function(){

  if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPvCkGyJHyKR4OCq_swX81CAvxsFdYaRbyn2Syk0mHd3qsG_S5K1mzrqAI6xnbmlICtqXLVBH6iX4OFdywXb_Na_TaFfzFlQOE0OOlqmlu9oZNInsZKxk6Hk0zT6SmY2o23NCt4sIpg/s50/disqus-social-icon-dark-transparent.png');} 

 }

);

$('#comments-gplus').hover(

 // switch to gplus comments displaying

 function(){

  if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');} 

 },  function(){

  if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png');} 

 }

);</script>

</div>

</b:includable>

• Now Save the Template and You're Done!

You have successfully added Disqus and Google+ Commenting Systems together and you're ready to receive lot of comments from your visitors. Now It's your turn to share this post with your friends and write your views in the comment box below till then Peace, Blessings and Happy Commenting.