Bringing G+ Comments to your Blogger blog without walling it off

We think it is awesome that +Blogger and +Google+ have started integrating more and more every day. The new commenting system brings additional engagement to any Blogger site as, if your readers are active in G+, it gets them sharing and discussing much more quickly. This will be a huge boon for those already active in G+, and might be an incentive for them to get started in Google+.

The only problem is that this new system is a bit of a "walled garden"... so we're aiming to fix that a bit.

In order for a reader to leave a comment in the new G+ commenting system they need to have a G+ account, want to post under that G+ account, and can't post an anonymous comment. For some this is fine, but not everyone wants to put up that fence around their site and their content; most want comments and don't want to force readers to use a specific type of account in order to do so. Plus some people already have other 3rd party commenting systems in place such as CommentLuv and Disqus.

So what we've done is create a toggle method to enable you to have much of the G+ functionality that the new commenting system contains, but to also keep your existing commenting system in place. We do this by replacing your existing "threaded_comments" include in your template with this new include.  Users who want to can leave comments like they currently do on your site, but G+ users can hit the G+ toggle and comment using that, as well as share it (the share button is turned on by default). All users can toggle to the G+ tab and see all of the activity that your post has had.

Quick notes on this functionality:
  • It leaves your existing commenting in place; don't go to Google+ tab in your blog and enable the commenting there
  • Permits all users to comment as they did previously, including non-G+ people and anonymous (if you so choose), as well as 3rd party commenting platforms
  • It does NOT notify you of new comments via G+, sorry
  • All images are contained in a Picasa album that I share, but you're free to change them out if you'd like
  • In the code we have the width of the G+ comment box set to be 750; you can adjust this as needed
  • It will NOT work on Dynamic Templates


The steps

Step 1: back up your template!

Step 2: search your template (by going to Template, then Edit HTML) for the includable "threaded_comments"; it should begin like:
<b:includable id='threaded_comments' var='post'>
and go to
</b:includable>

Step 3: replace the entire includable mentioned above with this code.

Step 4: search your template for the includable "comment_picker"; it should begin like:
<b:includable id='comment_picker' var='post'>
and go to
</b:includable>
Step 5: replace the entire includable mentioned above with this code.


Questions, comments, concerns? Leave them in the new commenting functionality below!


If it doesn't work...

You may not have JQuery libraries installed in your template. To add them copy/paste the following code and add it into your Template right before </head>:

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

Comments

  1. so far so good. I have the active G+ avatar showing.

    ReplyDelete
  2. but I have that hiccup. If I mouseover my name, the link is to 'bringing g comments'. If I hope your reader wanted to come to my blog - they have to know, and jump thru the new hoops.
    No longer click the name to land on the chosen blog. Now it's, mouseover avatar, click, click ... I'm trapped on this blog. Let me try again.

    ReplyDelete
  3. woah. not even sure what you're talking about! can you explain a bit more what you're doing?

    ReplyDelete
  4. pre-Disqus if you mouseover the orange names - the link would go straight to the commenter's blog. Rightclick simply opens David's post again in a new tab. With Disqus you have to click twice to get a link to the commenter's blog. Again, it is fascinating to try this out. You are tweaking closer to something I would use.
    Any other blogs using your tweak?

    ReplyDelete
  5. Yes, I use Disqus for my main comments. Using it also on www.confluentforms.com

    ReplyDelete
  6. Hi,can't get the includable "threaded_comments". any help please?

    ReplyDelete
  7. what do you mean you can't get it?

    ReplyDelete
  8. actually the code is unavailable

    ReplyDelete
  9. Can this work on a regular site as well, not just blogger?

    ReplyDelete
  10. I Just applied it onto my site successfully. However, I found a little problem. In most of the custom Blogger template the "B" and "G+" buttons are not clickable. This is because some custom template has float:left; CSS that make's the button not to work (un-clickable). Even if you add them yourself on your site they would stop working.

    I just tweak it a little bit to support my design. Here's how it looks.
    http://www.mybloggerlab.com/2013/04/how-to-add-google-commenting-system-in-blogger.html

    Cheers!

    ReplyDelete
  11. would love it if you'd credit us in your site for supplying the tip ;)


    The B and G+ buttons should be clickable so long as the template has a modern JQuery library installed.

    ReplyDelete
  12. Why not. I will write a tutorial on it with proper credits to your site.. :D

    It doesn't gives any errors in "Google Console" but still doesn't works on a few custom themes I tested a few moment a go. The reason was CSS.

    ReplyDelete
  13. Hi,
    I followed your instructions, but the google+ comment field doesn't show up unless I tick enabling it through blogger. And when I signed out of my google+ account and tried to post as anonymous, I tried clicking the comment field but couldn't type anything in it? Any suggestions? Thanks

    ReplyDelete
  14. Here you go dude. I have given All Credits to you http://www.mybloggerlab.com/2013/04/how-to-use-blogger-and-google-comments-together.html

    Cheers

    ReplyDelete
  15. Awesome Post Dude. Very Useful And New Thinking

    ReplyDelete
  16. sir how can i allign them in center, as they are alligned to left,

    ReplyDelete
  17. You are running a great blog..! David...
    Just wanted to let you know that i enjoy being here..

    ReplyDelete
  18. Its not showing on my blog www.gulmiresunga.com


    I followed all the step above but its not working.


    Please help

    ReplyDelete
  19. Can you tell me how to remove this tweak.

    ReplyDelete
  20. Hi David, Your posts are insightful as always. Probably reader would be much of help, if you can also add what happens to the recent comment widgets. How to get recent comments... or all is gone post enabling G+ ?

    ReplyDelete
  21. I just want to look how it works. Looks perfectly! ;)

    ReplyDelete
  22. Hey @David Kutcher : I'm having trouble getting this to work in my blog. Thought I had it in right, then searched for the JQuery script since it wasn't working. It wasn't in my template, so I added it just before and still nothing. Not sure where I'm missing boat.



    If it helps, here's the link to my blog: http://talesfrombabylon.com

    ReplyDelete
  23. hi i am work on http://fullypc-games.blogspot.com/ this blog .. and this blog is game blogger i am work this blog 6 month and this blog post on 60 but traffic is very low..why plz any one tell me an dmy help me..

    ReplyDelete
  24. Thanks, great work.
    http://www.edirectsms.com

    ReplyDelete
  25. Really enjoy this. I switched to Disqus because they implemented the ability to use Facebook and other social network logins, but noticed that people really did enjoy using G+ to comment. I like that this covers all commenting systems now with a clear ability to switch. Having the G+ comments system will let the comments crossover from blog to G+ and I think it will help people feel more comfortable, as well as increase engagement.
    Thank you for this!

    ReplyDelete
  26. i like your comment box...so i also want to make completely like yours so help me to get this comment box...
    for see my blog visit :- www.cyberfort.blogspot.in

    ReplyDelete
  27. @Nathan Weaver 1) do you have the G+ comments disabled from the Blogger dashboard? And 2) is there at least one comment? I noticed that it didn't show up on mine, saw that bit about needing at least one comment before it would show, so checked an old post with multiple comments. It showed up there. Doesn't show up on my pages, but it does show up on my blog posts.

    ReplyDelete
  28. David, this is really cool! Thanks for doing this one. I followed the procedures and it looks like it will only be displayed if the main commenting system has at least one comment in it. Is there a way in which the Google+ is the main comment system and Disqus the secondary? I actually have more comments on Google+ than Disqus.

    ReplyDelete
  29. Thanks, I'll try this when I get a chance.@Ariana Browning

    ReplyDelete

Post a Comment