Tagged as: web

Similar to Facebook's comment system, Google has created an embeddable comment system that can be added to websites and blogs.

In my opinion, it looks very nice and works quite well, as well as integrating into Google+. Only problem is, the comment system is only officially available for Blogger, and it's not obvious how to add it to your website.

Luckily, it's actually quite easy to add Google+ comments to your own website. All you have to do is embed this little HTML snippet in your page and a comment box will appear there.

<script src="https://apis.google.com/js/plusone.js"></script>
<div id="comments"></div>
gapi.comments.render('comments', {
    href: window.location,
    width: '624',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'

The first script is essential, as without it you'll be left with a blank box instead of comments. The width component in the call to gapi.comments.render is also configurable - you can use it to set the default width of the comment box. However, it's responsive so it'll fit in a smaller box if you want it to.

There is however a limitation with this method of creating a comment box - for some reason there is a minimum height of around 600px so you may be left with a bit of blank space underneath your comment box. As far as I can tell, there's not a way to get around it but it isn't that big of a problem uneless you're putting comment boxes in the middle of pages. The issue goes away when the comment box grows because there are more comments inside.

Here's an example of a comment box on this website. Test it out!