Finally I Got a Way To Use Disqus and Google+ Comment Together

In previous posts I have talked about the pros of using disqus comment system in sites/blogs, but what if you are able to use both disqus and google+ comment system together in your blogger sites. Yes you can use both of them in your site together at a time.

Pros Of Using Both

While counting the pros of using disqus comment system I've also talked about the impact of social medias on your contents and comments. Elaborating it again I will say that disqus increases the visibility of your contents and comments as it is integrated with top social networking sites like facebook, twitter and linkedin, but when you start using disqus along with google+ comment system, you are adding one more social networking giant to your list which will surely increases your content's and comment's visibility to more big audience.

How To Install Both

• First You'll need to install disqus in your blogger blog/site.
• Then open your Blogger Dashboard → Template → Html editor
• Now go to Blog1 from widget list menu
• And search for  <b:includable id='comment_picker' var='post'> 

Screenshot

• 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 Search for <b:includable id='threaded_comments' var='post'> 
• Select the complete code from <b:includable...> to </b:includable> 
• And replace it with the below given 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/AVvXsEj-0UXK3xB0ccvjFjAJozFJ7pONZbte0YXXnUxxMxWTJydKyhtph-KguzVBONbNqGli2Z4RXAd4J039MAEjSNg59bt69IqCkxqojCwnm07vOIw6SGCVSF4BNXWATk8vDxybBQOL-lzhiA/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/AVvXsEj-0UXK3xB0ccvjFjAJozFJ7pONZbte0YXXnUxxMxWTJydKyhtph-KguzVBONbNqGli2Z4RXAd4J039MAEjSNg59bt69IqCkxqojCwnm07vOIw6SGCVSF4BNXWATk8vDxybBQOL-lzhiA/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/AVvXsEhT4w3_akmI-yCZDqoa16avG6EfV7nv7-Jzq5ykzw-JSuDJT1Urglfgkulz1vFGaxcTD2EGdKY4Lj5pPA7_kPelvTrYHcFSh3YrIIxDIr5NwQ_LlK1fUyLOMy45sXSVlNSLf-KyzQCEgA/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/AVvXsEj-0UXK3xB0ccvjFjAJozFJ7pONZbte0YXXnUxxMxWTJydKyhtph-KguzVBONbNqGli2Z4RXAd4J039MAEjSNg59bt69IqCkxqojCwnm07vOIw6SGCVSF4BNXWATk8vDxybBQOL-lzhiA/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/AVvXsEhT4w3_akmI-yCZDqoa16avG6EfV7nv7-Jzq5ykzw-JSuDJT1Urglfgkulz1vFGaxcTD2EGdKY4Lj5pPA7_kPelvTrYHcFSh3YrIIxDIr5NwQ_LlK1fUyLOMy45sXSVlNSLf-KyzQCEgA/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>

• After replacing the code save the template and you're done.

Congratulations! From now onwards instead of Blogger comment system disqus comments will come into action. I would like to thank David Kutcher of BlogXpertise for the providing source code and here I've done minor tweaking only. So this widget is made by me with the support of Blogxpertise.

If you liked this tutorial then please share this post with your friends so that they may also learn and start availing the features of Google+ and Disqus. Stay tuned with us for more tuts :)