How to Use Blogger and Goolge+ Comments Together In Blogger

As you know that previously Blogger Team has introduced the Goolge+ commenting system for Blogger blogs but when we look at the disadvantages alone then we realize that we shouldn't use this in our blog and in other hand, when we look at the advantages then we say that we shouldn't miss this system. So here the guy confuses and can't decide the proper decision. But don't worry, we've got the proper solution for this problem and we're going to use Blogger and Google+ Comments Together. Yes it is possible and here we're going to learn this little Blogger hack today. Before we begin the tutorial, first of all let me tell you something about this hack, how we did this and how it is gonna work.

How This Works?

You can have look at our commenting system that we're also using both systems together with toggle. You will see the two icons and between them a little message telling the visitors that they can use Blogger and Goolge+ comments. By default, it will show the Blogger comments and when someone click on Google+ icons then Blogger comments will be hidden and Google+ comments will be appearing. To show the header with icons, the post must have a Blogger comment otherwise it will not be shown.

How This is Made?

We've made this with simple JavaScript and CSS and it will not affect on loading speed. It just loads in micro seconds. Google+ comment system is added the JavaScript which we're going to add in blog template in the tutorial and you'll not need to enable it from Google+ area of blogger. Originally the developer of this hack is David Kutcher so all the credits goes to him.

Why Use Both Systems?

The main reason is that we should use Google+ comment system but due to it's disadvantages it creates problem and due to these problem we're using Blogger comments with them. This will be fine from every side. You will not loose your comments by allowing only Google+ users to comment. By this your blog will be more Google friendly that is pretty cool for every webpage. It will also help in improving the author rank which is the future of SEO.

Tutorial

Well, after telling you something about this now it's time to do this hack. Now follow the below given steps carefully and don't forget to backup your template.

• Go To Blogger >> Template >> Backup Your Template
• Click Edit HTML and Search For Below Code

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

•  Replace The Above Code With The Following.

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

• After replacing the code, once again search another below code. 

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

• Again Replace This Code With The Following One 

  <b:includable id='threaded_comments' var='post'>
<div id='com-header'>
    <img class='com-on' id='com-norm' src='https://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png' title='view Blogger comments'/><h6>&#8592; Blogger OR Google+ &#8594;</h6> <image id='com-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='view Google+ comments'/><div id='copyrigtsbgcomment'><a href='http://www.bloggeryard.com/2013/06/use-blogger-and-googleplus-comments-together.html' >+Get This</a></div>
   </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 src='http://bloggeryard.com/PersonalStuff/bgcomment.js'/>
<link href='http://bloggeryard.com/StyleSheet/bgcomment.css' rel='stylesheet' type='text/css' />
</div>
</b:includable>

• Now finally save your template and you've done! 

Need Help?

So friends, This was our little hack which is gonna rock. I hope this tutorial is helpful for you and if you're facing any problem then feel free to ask in comments. I'll reply you back soon. Stay connected with us for more hacks and also subscribe us for getting updates in your inbox. Take care. Happy Blogging!