How can I use both Disqus and Google+ comments on Blogger? [closed]

Question

I have a blog with Blogger. I used Disqus before and there are a lot of comments on that. However now I want to use Google+ comments on Blogger because I use Google+ a lot. But I cannot find a solution to use both on Blogger at the same time.

I found other solutions to use both Blogger default comments and Google+ comments but not Disqus. How can I do that?

Answer 1

Install Disqus to Blogger as you normally would:

1. Login to Disqus
2. Add Disqus To Your Site
3. Register site and add the provided widget code to your Blogger site.

Then, add Google+ commenting to Blogger by editing two multiline sections of the HTML template:

1. Blogger ➜ Dashboard ➜ Template ➜ Html editor

2. Replace the code block of

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

   with

       <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>
   

3. Replace the code block of

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

   with

   <b:includable id='threaded_comments' var='post'>
   <div id='comment-header'>
     <img class='comment-on' id='comments-norm' src='http://3.bp.blogspot.com/-S3w45s75Yio/Uoe5OPXkFjI/AAAAAAAADcA/vmtzeVI2wFg/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','http://3.bp.blogspot.com/-S3w45s75Yio/Uoe5OPXkFjI/AAAAAAAADcA/vmtzeVI2wFg/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','http://2.bp.blogspot.com/-31izM0JEWCs/Uoe6Uf7eqoI/AAAAAAAADcI/AC8mXw1gUcg/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','http://3.bp.blogspot.com/-S3w45s75Yio/Uoe5OPXkFjI/AAAAAAAADcA/vmtzeVI2wFg/s50/disqus-social-icon-blue-transparent.png');} 
    },  function(){
     if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','http://2.bp.blogspot.com/-31izM0JEWCs/Uoe6Uf7eqoI/AAAAAAAADcI/AC8mXw1gUcg/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>
   

4. Save template.