April 25, 2013

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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa-qPnKqPfmdeQoXGI-qsg9ROu2oDI_3RMVXZL3k2WETYBoxTa78_VmIHX9vZIRWmA8L1-mrCinW8CNYdBvx4PlP1Z2C0eJbQ7U7LtK2S6s3iavICKNkuq0jvI6p0VVpTguFdyLVsUUCJ/s50/blogger_on.png' title='view Blogger comments'/><h6>OR</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI64g8gvi_6hi4PxV6scStLuZWakxFQGc-z0cdh1XOqzFQHVMdaRQfT-nv5mu3lj9W2_FQ9VJ9c4UuTMiP_GCiAqBerKnBg-SaW19Lz7INeweQbo39R1rLNIF-Vg5yHNqzaBdrGTwEiQ1a/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).

42 comments:

  1. you my friend are just great ! Superb :)

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

    ReplyDelete
  3. Congratulations for this solution.

    ReplyDelete
  4. 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..

    ReplyDelete
    Replies
    1. 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

      Delete
  5. This is Awesome and elite trick ever :)

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

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

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

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

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

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

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

    ReplyDelete
    Replies
    1. 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.

      Delete
  12. 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.

    ReplyDelete
    Replies
    1. We are using different and personal-only commenting system

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

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

    ReplyDelete
  15. thanks for share bro!!
    that's awesome

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

    ReplyDelete
  17. 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/

    ReplyDelete
  18. 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!

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

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

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

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

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

    How to solve this ?

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

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

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

    ReplyDelete
  26. 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

    ReplyDelete
  27. 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

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

      Delete

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.