How to Use Blogger and Google+ Comments System Together With Toggle

Socialize It →

Tweet

42

Advertisements

Google+ comment is a cool new and improved commenting system for blogger, which allows you to create a strong bond with your readers. This new commenting system not only provides extra coverage but also brings additional engagement to any Blogger site. This system provides them the flexibility to share and discuss much more quickly. However, before anyone could leave a comment, they have to get themselves registered on Google plus. It would work for some users, but not everyone wants to put barriers around their site and content. Who does not like freedom?  Same thing applies here too. You do not want to force your visitors to starting using platform because, you are endorsing them. Today in this article, we will show you How to create toggle Google+ and Blogger comments in blogger

We have created a toggle method that would allow you to enable the new Google+ Comments, but without losing your old Blogger commenting system. Users can continue to comment like they use to do in the past but Google Plus users can hit the “G+” toggle button and can comment, share and view the activity you post has had using that.

What are the Disadvantages of Google+ Comments?

First and foremost  to use this feature, it is must that a person should have an account on Google plus otherwise he cannot leave a reply. Now not every single person on this earth is using this platform so this probably would annoy your visitors. 

Secondly, this commenting system depends upon the URLs. Unlike Facebook Application ID, it does no stores anything in your API. You would lose your all previous comments if you change the URL of your article or think about re-branding your domain. 

It does not send notifications to your Email Address whenever someone either leaves a reply to your blog or posts a new comment. On the other hand, all comments are published instantly without any review so it may become an ideal place for Spammers.

The Solution:

Step#1: The first thing you need to do is to backup your template. After logging in, from the dashboard go to Template >> Edit HTML. Now enable the HTML Editor’s built-in search box and search for the following code.  (Quick Tip: Click anywhere on the HTML editor and Press CTRL+F to enable the search box).

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

Step#2: After finding the code mentioned above, replace it entirely and accurately with the Following code. (Remember: Make sure that the tags are properly closed otherwise you would face errors).

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

  <div id='com-header'>

<h6>Comment With:</h6> <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>OR</h6> <image id='com-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='view Google+ comments'/><h6>The Choice is Yours!</h6> 

<div id='copyrigtsmbl'><a href='http://www.mybloggerlab.com/2013/04/ow-to-use-blogger-and-google-comments-together.html' id="mblrights">Get This Widget</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='https://googledrive.com/host/0B0WJjcJEFNziQU01STJVc3RzeWc'/>

<style>

#gcontainer {

display:none;

  }

#com-norm,#com-gplus {

cursor:pointer;

padding:0 5px;

float:left

  } 

#com-header { 

border: 1px solid #d2d2d2;

padding: 10px;

float: left;

width: 580px;

margin-bottom: 20px;

background: #f5f5f5;

  }

#com-header h6{ 

font-size: 20px;

text-transform: uppercase;

font-weight: bold;

float: left;

padding-top: 15px;

margin: 0px;

margin-right: 7px;

margin-left: 7px;

  }

#copyrigtsmbl {

float: right;

margin-top: 20px;

border-top: 1px solid #d2d2d2;

margin-right: -10px;

padding-right: 10px;

padding-top: 5px;

padding-left: 10px;

border-left: 1px solid #d2d2d2;

padding-bottom: 5px;

margin-bottom: -10px;

font-size:11px;

background: #fff;

  }

#copyrigtsmbl a {

text-decoration:none;

color:111!important; 

  }

</style>

</div>

</b:includable>

Step#3: Now once again with the help of search box look for the following code.

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

Step#4: After finding the code as prescribed above, replace it completely and properly with the Following code. (Remember: Try to close the tags properly, so the template does not catch any errors).

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

Step#5: After applying the instructions as mentioned above press the “Save Template” button located at the top of your screen. 

Congratulations: You have successfully added Google+ commenting system to blogger without removing the previous blogger commenting system.

Conclusion:

By Enabling both commenting system, you are not forcing your users instead you are giving them the freedom to choose their most preferable platform. It does bring a lot of benefits to both you and your readers. Let us know what you think about the new tweak? Make sure to come back to this page if you come across any issues!

Copyrights: We have added a Credit-back attribution is this gadget. However, if you have good reason to remove the credit then you have to purchase the premium version of this plugin. Just give us an email and our team would assist you through the process.

Thanks to +David Kutcher Who helped us in Developing this Gadget.

IMPORTANT: To make Google plus and blogger comments appear together it is necessary that a post must have at least 1 comment. Those posts which have 0 comments would continue to display your default commenting system. Remember: (There is no need to Enable Google+ comments from your setting. If you have already enable it then disable it before you apply this tutorial).

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).