Apr 20, 2013

How to add Google+ Comments to any website

Google+ Comments is a social wigdet from Google, which works similar to Facebook Comments Box or Disqus. For now, it is available only for blogs on the Blogger platform. But here is an unofficial way to embed Google+ Comments on any website or blog:

  1. Edit your website and add this HTML:
    <script src="https://apis.google.com/js/plusone.js">
    </script>
    <g:comments
        href="[URL]"
        width="642"
        first_party_property="BLOGGER"
        view_type="FILTERED_POSTMOD">
    </g:comments>
    or a valid HTML5 version:
    <script src="https://apis.google.com/js/plusone.js">
    </script>
    <div class="g-comments"
        data-href="[URL]"
        data-width="642"
        data-first_party_property="BLOGGER"
        data-view_type="FILTERED_POSTMOD">
    </div>
  2. If you want to insert a comments counter, add this HTML code instead of <g:comments>:
    <g:commentcount href="[URL]"></g:commentcount>
    or a valid HTML5 version instead of <div class="g-comments">:
    <div class="g-commentcount" data-href="[URL]"></div>
  3. Replace [URL] with the URL of your web page and fit the width.
  4. Link your web page to your Google+ profile.
If you prefer to load Google+ Comments dynamically, insert this HTML code:
<div id="comments"></div>
<script>
gapi.comments.render('comments', {
    href: window.location,
    width: '624',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
</script>
Similarly with Google+ Comments Counter:
<div id="commentscounter"></div>
<script>
gapi.commentcount.render('commentscounter', {
    href: window.location
});
</script>
You can see it in action on the Google+ and Facebook Comments page.

69 comments:

  1. What do you mean by loading 'Google+ Comments dynamically'? Both code seems to behave in same fashion. They work! Thanks for this information.

    ReplyDelete
    Replies
    1. It means that the code can be executed at any point instead of at the original page load.

      Delete
    2. I guess it means loading a comments widget by JavaScript, e.g. on clicking the button.

      Delete
  2. Looks good, although not that "friendly" for non savvy coders. Maybe you can develop a plugin? That would be cool :)

    ReplyDelete
    Replies
    1. Steps are basically the same as with +1 button and there is a Drupal module.

      Delete
  3. Drupal plugin: http://drupal.org/project/gplus_comments_block

    ReplyDelete
  4. In my case I've got error about protocols mistmatch (my site used http and G+ trying to use https)
    On Chrome I've got followed error:

    Unsafe JavaScript attempt to access frame with URL http://www.emdev.ru/-/video-liferay-portal-and-activiti-bpmn-integration from frame with URL https://plusone.google.com/_/widget/render/comments?bsv&href=http%5Cx3a%5Cx…oad&id=I1_1366570990129&parent=http%3A%2F%2Fwww.emdev.ru&rpctoken=22895062. The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'http'. Protocols must match.

    ReplyDelete
    Replies
    1. I can see G+ Comments on your page using Chrome 28.0.1485.0.

      Delete
    2. Yes, comments are displayed - but posting comments not working - I've got this error then I'm trying to press "Submit"

      Delete
    3. OK, found a problem - I've created incorrect URL to post to Google. Now it working.
      Thank you very much! Really great feature!

      Delete
    4. In local system it is not working... getting error message "There was a problem saving your comment. Please try again."

      Delete
  5. now there should be a wordpress plugin!

    ReplyDelete
    Replies
    1. Or plugin that let us choose between Facebook and Google+ Comments.

      Btw there is any way to change the color sets?

      Delete
    2. Here is a Wordpress plugin: http://wordpress.org/extend/plugins/google-plus-comments-by-forum-gt/

      Delete
  6. do you get notifications if someone has commented?

    ReplyDelete
    Replies
    1. Not on my installs. And seems hard to implement with Google's support. They can possibly in the future use site connections with profiles and pages to deliver notifications. Not sure if it is a good idea in the first place... Coz some blog posts are shared like thousands of time which means you get that many notifications on every single share.

      Delete
    2. without notification you can be fuck.. up in Germany by Law, because you as website owner are responsible for the comments on your site

      Delete
  7. great, isn't there a way to approve comments before their published, or delete them?

    ReplyDelete
    Replies
    1. First you have to link the web page with your Google+ profile, just add <link rel="author" href="https://plus.google.com/[ID]/"> to the <head> of your page, changing [ID] to your profile ID.
      Then you will be able to moderate comments by clicking on the dropdown arrow next to them.

      Delete
    2. Hi, I tried but all I see when I click the dropdown are "Link" "Report Abuse" "Mute". I don't see "delete". Is there something I'm missing?

      Delete
    3. Have you linked to your web page FROM your G+ profile?

      1. Sign in to your Google profile.
      2. Click Edit profile.
      3. Click the Contributor To section on the right (depending on how many photos you have, you may need to scroll to see this section), and then click Add custom link.
      4. If you want, change the visibility of your link, and then click Save.

      Delete
    4. Thanks for replying. Yes, I've done that already. I've also placed the <link rel="author"..... within the head tag of my page. All works fine except moderation. Have you tried at your end? Is it possible to delete comments made by others?

      Delete
  8. how can i get comments from google showing on my webpage under the related post

    ReplyDelete
  9. hi,
    its a realy great feature by google to use Google+ comment it makes blogger more social its easy to use. the facebook comment system is already avilable. now we can use both at same time, thanks for sharing.
    happy Blogging :)

    ReplyDelete
  10. Just a little heads up....to make sure that each post correctly aligns itself to the google+ account, you need to add a little php -

    href=""

    not
    [URL]

    ReplyDelete
  11. Thanks, works like a charm

    2 questions

    1. view_type="FILTERED_POSTMOD"
    are there any other view_types available?

    2. can I set messages e.g. "no comments yet" to another language?

    ReplyDelete
    Replies
    1. I don't know any other view types.
      You can change the language by adding:
      <script src="http://apis.google.com/js/plusone.js">{lang: 'en-GB'}</script>

      Delete
  12. Can this be added to a free blog platform such as Blogger and LiveJournal?
    If it is possible - how?

    ReplyDelete
  13. Nice information thanks for shared

    ReplyDelete
  14. Looks good, although not that "friendly" for non savvy coders. Maybe you can develop a plugin? That would be cool :)

    ReplyDelete
  15. now there should be a wordpress plugin!

    ReplyDelete
  16. Thanks for the post, I can use this in my website

    ReplyDelete
  17. For those who have been saying there should be a WP plugin - there IS ..... I have it installed on my blog and it works great.

    If you are using blogger then you can instal comments by changing your settings

    This code is for people who are not using either blogger or WP and still want to add WP comments to their websites

    Carol Dodsley

    ReplyDelete
  18. Very good. I can use this in my website

    ReplyDelete
  19. Hey what you mean by link to your Profile can you explain me

    ReplyDelete
    Replies
    1. You have to tell Google+ that you are the author of the page, but putting a special link in it. Everything is explained here: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2539557

      Delete
  20. Tks. Both code seems to behave in same fashion. They work! Thanks for this information.

    ReplyDelete
  21. The facebook comment system is already avilable. now we can use both at same time, thanks for sharing.

    ReplyDelete
  22. What matters is if your website comes on the first page of a search engine result!

    ReplyDelete
  23. Is there a way to add multiple dynamic comment boxes to the same page?

    I am trying to have them load at the bottom of a pop up modal window, and it works if there is only one, but if you add a second comment box to a different pop up modal on the same page, neither one loads.

    ReplyDelete
  24. This very helpful.Thank you for sharing.

    ReplyDelete
  25. this is nice info, i will place it for my website... thx's...

    ReplyDelete
  26. Hey Admin ! You wrote awesome post,
    .Thank You.

    ReplyDelete
  27. May we made recent comment by using google plus comments? TY

    ReplyDelete
  28. Looks good, although not that "friendly" for non savvy coders. Maybe you can develop a plugin? That would be cool :)

    ReplyDelete
  29. Looks good, although not that "friendly" for non savvy coders. Maybe you can develop a plugin? That would be cool :)

    ReplyDelete
  30. Thank you for making this a simple process.

    ReplyDelete
  31. hi,
    its a realy great feature by google to use Google+ comment it makes blogger more social its easy to use. the facebook comment system is already avilable. now we can use both at same time, thanks for sharing.
    happy Blogging :)

    ReplyDelete
  32. How to with many accounts such as facebook, twitter , gooogle same this site.

    ReplyDelete
  33. Is there a way to add multiple dynamic comment boxes to the same page?

    I am trying to have them load at the bottom of a pop up modal window, and it works if there is only one, but if you add a second comment box to a different pop up modal on the same page, neither one loads.

    ReplyDelete
  34. It works for my blog. But will i have a notification if any comments to my blog posts ?. When i try comment to my posts. My comments also display to all of my posts.

    This is ok or i make mistake with your tips above ?

    ReplyDelete
  35. Comments aren't showing up after a comment is made, why is this happening

    ReplyDelete
  36. IS ANYONE STILL ON THIS???

    ReplyDelete
  37. Hi,

    But what do you do with the width when it is displayed on mobile?
    Any manipulation I tried didn't work and it ruins my mobile compatibility (including hiding it when width is similar to mobile).

    Thanks

    ReplyDelete
  38. it's a very nice ideas no i can start using fb comments and google comments in my website

    ReplyDelete
  39. This was working fine up until 1st week of May 2014 has anything changed that now stops comments being posted directly from the website??

    ReplyDelete
  40. “Eocean is a leading Mobile Value added Services company that provides comptetitive edge to enterprises by blending the power of mobile communication technology with mobile/web applications.” http://www.eocean.pk/

    ReplyDelete
  41. Love it! Very interesting topics, I hope the incoming comments and suggestion are equally positive. Thank you for sharing this information that is actually helpful.


    matreyastudios
    matreyastudios.com

    ReplyDelete
  42. thank you so much for providing this informative article. an excellent read.

    www.n8fan.net

    ReplyDelete