How to: Adding Google+ Comments to any website

Last week Google proudly presented their new integrated commenting system based on Google+! This makes it easy to view all the interaction on your blog, via your Google+ account. Google claimes this makes your life as a blogger somewhat easier. One of the positive things I think is, is that you can share your comments with specific people or groups so there is no need to comment publicly!

It looks like they launched it only for blogger platforms but if you look to the code, you can easily add it to every webpage you would like to. Just copy the code below and replace [URL] with the URL of the specific page.

[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>[/html]

Or Valid HTML5

[html]
<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>
[/html]

You can also use a comment counter:

[html]<g:commentcount href="[URL]"></g:commentcount>
[/html]

Valid HTML5 version:

[html]<div class="g-comments">:
<div class="g-commentcount" data-href="[URL]"></div>[/html]

Dynamically loading can be achieved by using the following codes:

[html]<div id="comments"></div>
<script>
gapi.comments.render(‘comments’, {
href: window.location,
width: ‘624’,
first_party_property: ‘BLOGGER’,
view_type: ‘FILTERED_POSTMOD’
});
</script>[/html]

And HTML5 valid version:

[html]<div id="commentscounter"></div>
<script>
gapi.commentcount.render(‘commentscounter’, {
href: window.location
});
</script>
[/html]

I made a HTML5 example page to show you one of the possibilities to implement this system. If you have any questions regarding the implementation, please leave a comment! Enjoy using the Google+ comment system.