Update 10/03/2019: Google+ has shut been shut down. None of this is relevent anymore.
Comments are an important part of a blog because it allows you to interact with the audience. It’s quite easy to add comments to your Jekyll blog with only a few lines of html through Google Plus. There’s plenty of tutorials on how to do this (I used this one) so I won’t go into setup.
The issue is that there hasn’t been a mechanism to moderate the comments or event to see a condensed summary of messages left by the reader. Personally I’ve missed opportunities to reply to my readers because I simply wasn’t aware the comments existed. This is my first pass attempt at a tool to moderate the comments, or at least see everything in one place.
The G+ api will return comments for each post but only the last will be visible. Use CSS to bring them back on the screen.
How to do it
The Google API will add a <code>div</code> with all of the comments left on Google Plus. You’d use this on a single blog post but there are issues if you try to poll the API for multiple links on a single page. Only the last link used will be visible on your page. Every link you pass to the API will return the comments but only the last link will be on screen. The other links before it will be shown off screen.
1. Add a page to aggreate the comments
We’ll get started by creating a page just to aggregate your comments. Create a new folder and an index.md file with your usual YAML headers. We won’t link this page from anywhere else in the site so it will generally go unnoticed by the reader. I am calling my page ‘commentlog’ so my project directory will look something like this:
blog contact css commentlog ↳ index.md _data _layouts _includes _config.yml index.html
2. Poll Google for comments on each post
Next, we’ll add a few lines to get the G+ comments for each of your blog posts. This block of code will loop through all of your blog posts and get the comments from Google. We’ll display the post title to separate the comment blocks and make it easier to read. I’ve arbitrarily set the comment block width at 624px so feel free to customize that size.
3. Add styling to bring everything back on the page
Admittedly a first pass attempt at creating a tool to monitor the comments being left on my blog. It’s not pretty. but it works for now. For future development I’d like to be able to make the height dynamic or hide the section for a post if there aren’t any comments. I’m hoping other readers can push this approach a little further down the road towards a complete solution.
If you liked this post, leave a comment below or subscribe!