Synchronize Comments
Our static HTML blog is pretty cool, but do you know what would make it cooler? Comments would. Discussions about entries can really bring a blog to life, but sadly they come at a cost. Not only do you need to worry about comments from spammers but you also have to expose potentially sensitive software to the outside world.
Fortunately for us, the Google+ public data APIs expose the comments on our activities. Since we’re already sharing our blog posts to Google+ we can use JavaScript to render the comments from the activity right in the blog entry. Not only does this offload the responsibility of spam control to Google, but it also allows us to retain our super simple static HTML blog.
Experiment with the APIs
Before we start writing code lets become comfortable with how the APIs behave. Google provides an API explorer, which is a great way to become familiar with APIs. You can find the API explorer here: https://code.google.com/apis/explorer/
We’ll use this tool to walk through the steps that our comments plugin will follow.
- On the left pane scroll down to and select the plus API. The updated view will now display the available methods in the third pane from the left. We can explore these methods and work out a flow for accessing the right comments.
- Scanning through the available methods the comments.list method looks perfect, but we need an activity ID to call it.
- Just above the comments.list method we find an activities.list method. This will allow us to list our recent activities and determine their IDs for which we can list the comments.
- It looks like we need one more piece of information to list our activities: our userId. The easiest way to determine your userId is to copy it out of your Google+ profile URL.
- On the activities.list method paste in your userId and select the public collection. Clicking the execute button triggers the API call and renders the json response in the history pane at the bottom of the page.
- The response object consists of some top level attributes and a collection of activities within the items array. Each entry in the items array has an activity ID. Copy the ID for your most recent entry.
- We can now switch to the comments.list method and supply the activity ID that we just copied.
- With a click of the execute button the history pane on the bottom will be populated with a list of comments associated with that activity.
It looks like we’ve discovered our flow. We can implement a very simple comments integration by manually discovering the activity ID for our share on Google+ and then using JavaScript to fetch the comments associated with it. Once we’ve fetched the comments we can render them within the page.
Registering Our Application
Before we can use the APIs to access public data we must first register our application. Once we register our application we’ll receive an API key that we can use to make requests.
- Navigate to code.google.com’s API console: https://code.google.com/apis/console/
- Create a new project using the project drop down menu
- Click on the ‘Services’ link in the API Console menu and toggle the Google+ APIs to ‘on’
- Click on the ‘API Access’ link in the API Console menu to access the keys for your new application.
- Below ‘Simple API Access’ note your ‘API Key’. We will use this to access the public data APIs below.
Time to Code
In our entries we’ll place a div with a special class. We’ll then use JavaScript to replace this placeholder div with the comments for that entry. Here’s an example of a div that our JavaScript will look for:
<div class="g-comments-for z13zevjymuuge1zvl23lyv3a2n3owdxxd04"></div>
Our JavaScript will look for all divs on a page with the g-comments-for class. When it finds one it will fetch all of the comments for the activity whose ID is in the other class.
Create a new JavaScript file comments.js and source it from each blog entry. Within the JavaScript file create a namespace for our functions, because we like to be tidy. Next specify our API key. We’ll need that to make out API calls.
var commentr = commentr || {};
var apiKey = "AIzaSyA-H-eBvhWOyyjIJ2bWeaf1XAn855s8IRN";
Find all of the g-comment-for divs and extract the ID
// search for g-comments-for classes
commentr.go = function() {
var fetchElements =
document.getElementsByClassName('g-comments-for');
for(var i=0; i<fetchElements.length; i++) {
var activityId = fetchElements[i].classList[1];
commentr.fetchComments(activityId);
}
}
Next, fetch the comments for each activity that we find. Since the Google APIs reside on a different domain name than our blog we’ll use the JSONP response format. For each response this will automatically call a method to inject the comments into our page.
// foreach fetch
commentr.fetchComments = function(activityId) {
var fetchElement = document.createElement("script");
fetchElement.src = 'https://www.googleapis.com/plus/v1/activities/' +
activityId + '/comments?alt=json&pp=1&key=' + apiKey
+ '&callback=commentr.praseComments';
document.body.appendChild(fetchElement);
}
// when fetch completes, parse the response and insert the records
commentr.praseComments = function(resposneJson) {
var activity = resposneJson.items[0].inReplyTo[0];
var comments = resposneJson.items;
//find element to insert into
var insertionElements = document.getElementsByClassName('g-comments-for ' +
activity.id);
var insertionElement = insertionElements[0];
var newContents = "";
for(i=0; i<comments.length; i++) {
var actor = comments[i].actor;
var commentBody = comments[i].object.content;
//do the insertion
newContents += "<dt><a href='" + actor.url +
"'><img src='" + actor.image.url + "' /></a></dt>" +
"<dd><a href='" + actor.url + "'>" + actor.displayName +
"</a>: " + commentBody + "</dd>";
}
insertionElement.innerHTML = "<dl>" + newContents +
"</dl> <p class='g-commentlink'>Please comment on the <a href='" +
activity.url + "'>Google+ activity</a></p>";
}
And finally we need to add register our plugin to execute after the page loads.
// Append our program to the window.onload
document.addEventListener("DOMContentLoaded", commentr.go, false);
Comments Integration in Action
That was pretty easy, wasn’t it? Now lets see it in action.
Using the API explorer we can find the activity ID of our most recently public entry. In this case it’s z13zevjymuuge1zvl23lyv3a2n3owdxxd04. Go back to the HTML code for that entry and add the magic div that inserts the comments.
<div class="g-comments-for z13zevjymuuge1zvl23lyv3a2n3owdxxd04"></div>
Reload the page and see the rendered comments!
What’s Next?
Our comments plugin was very easy to write, but this simplicity comes at a cost. It’s quite brittle and requires us to use the API explorer to discover the activity ID for each entry that we share. A good companion to this plugin would be a tool which fetches our most recent activities and renders a div that we can paste into our entries.
Code and Demo
See it in action on Baking Disasters
Access the code (without using copy and paste) on Google Project Hosting
