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

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

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

Comment With:
OR
Choose Wisely!

42 comments

April 25, 2013 at 11:11 AM

you my friend are just great ! Superb :)

Editorial Team MOD
April 25, 2013 at 11:24 AM

We're glad you liked it

Anonymous
April 25, 2013 at 11:45 AM

Really a great post for those who are in confusion to add which type of commenting system...

April 25, 2013 at 12:26 PM

Simply Awesome ! <3 Love it

April 25, 2013 at 1:41 PM

Congratulations for this solution.

April 25, 2013 at 8:13 PM

Awesome post bro now we have a chance to use both of them. thanks man.


Syed bro i have off topic question.

My blog age is 4 months i have totally 41 posts daily unique visitors = 400, & pagviews= 700
and alexa 109,430. and its improving daily. So now i am eligible for adsense should we apply for it or wait sometime. Secondly if i disapprove by adsense then we will never apply again or after sometime we have given a chance again.

so guide me i am planing coming back..

B
April 25, 2013 at 10:42 PM

This is Awesome and elite trick ever :)

April 25, 2013 at 11:22 PM

No doubt it is the most needed hack all bloggers want thanks for sharing :)

April 26, 2013 at 12:02 AM

nice one ...
can it place in web-site (not hosted by google) ??

April 26, 2013 at 2:06 AM

thanks bro to listen my request i am very thank full to you may Allah always help you to achieve your aim ahead
=)

Editorial Team MOD
April 26, 2013 at 2:57 AM

Give this code a try and let me know how it works for you? http://pastie.org/7704642

Editorial Team MOD
April 26, 2013 at 2:58 AM

Yes just go for it. If it gets disapproved no problem. Retry it after 1 month or so. Keep on repeating until you get the approval

April 26, 2013 at 5:51 AM

Oh My God! What A Marvellous piece of writing and code Syed! Keep up the AWESOME GREAT MIND BLOWING WORK! :D

April 26, 2013 at 7:26 AM

Very good tutorial, even if I dont really like g+ comments: I prefer Disqus comments :)

April 26, 2013 at 10:16 PM

hey. but there is a problem. In mobile view, you don't get option for gplus

April 27, 2013 at 12:17 AM

Bro i am really in trouble please help me out. i have made some changes in comments area its not perfect for me. So want your like comments style. Everythings same i will not keep all the things you like i will make some changes inside like author picture & editorials team photo will change. So can you share your all comments area coding with me. Please i want your comments area coding your comments style is very nice i like its. please send me if possible at hafeez.khan8000@gmail.com

i have checked your threaded comments posts but after apply thats we havnt child reply for several steps. thats was only two steps reply. so please send me your full comments coding i will change a little bit for my self. Hope you will do that for me.

Editorial Team MOD
April 27, 2013 at 1:36 AM

Well this system is heavily loaded and takes a long while to load (as its a new system). Therefore, by adding this to Mobile it would increase a lot of Load time. So keeping that in mind we excluded it from Mobile version.

Editorial Team MOD
April 27, 2013 at 1:44 AM

We are using different and personal-only commenting system

April 28, 2013 at 7:35 AM

It looks great! I'll try it on my blog. Thank you so much admin. :)

April 28, 2013 at 10:20 PM

in my template it's not working, maybe any something wrong there :D
but, it's awesome snippet
thanks for coding \m/

April 29, 2013 at 2:04 AM

Great Work Bro!!!

April 29, 2013 at 6:03 AM

very nice

April 29, 2013 at 6:08 AM

thanks for share bro!!
that's awesome

May 16, 2013 at 12:29 AM

I am using a custom template and I am unable to click the B and G+ images can you plz help me.

Editorial Team MOD
May 16, 2013 at 6:38 AM

Yes What's your BLOG URL?

May 18, 2013 at 9:56 AM

I am using a custom template and I am unable to click the B and G+ images can you plz help me.

http://paighamurdulibrary.blogspot.com/

May 18, 2013 at 10:17 PM

Oh My God! That's actually a great trick you have shared. I was confused about adding Google comments on my blog but you just nailed it. Thanks!! I am going to try this on my blog!

Editorial Team MOD
May 20, 2013 at 2:53 AM

There is some problem with your custom theme!

May 24, 2013 at 2:31 AM

wooaaah thanks very much, this is very useful for me ^_^

IM
May 30, 2013 at 4:30 PM

Please help me bro. Why the code is not work on my blog??

my blog: http://munafsiblog.blogspot.com/

Editorial Team MOD
May 31, 2013 at 2:12 AM

Thats because of your custom theme. I Think

June 1, 2013 at 2:25 AM

Excellent Work Dude.!
waiting for Google+ and Facebook together comment system.

June 6, 2013 at 2:20 AM

Its working. But the customization of blogger comment is disappearing when this trick is implement on the blog.

How to solve this ?

The blogger and google comments button cannot use. I don't know why. Please help me. Tq

October 1, 2013 at 2:41 AM

What error you're facing?

October 6, 2013 at 2:53 AM

works great !! but i have one question..how do you make Google+ comment to be the main section in this tutorial?? any idea??

October 31, 2013 at 2:48 AM

thanks for this one....

November 9, 2013 at 3:49 PM

How I can delete G+ commenting system and back using default comenting system?

January 19, 2014 at 4:17 AM

why we need a blogger comment?
Are you not remove this folt

June 19, 2014 at 1:01 AM

nice but i haveing problem that when edit and replace both codes and save my template. But i can't see any option to choose google comments or blogger as in this blog apears

December 18, 2014 at 5:07 PM

Please tell me how to remove this widget from blogger ? I added earlier but now i want to remove this widget....i want only default blogger comment

Editorial Team MOD
December 21, 2014 at 2:15 AM

Kindly, upload the backup of the template that you took before applying this tutorial.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.