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.
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.
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
Find all of the
g-comment-for divs and extract the ID
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.
And finally we need to add register our plugin to execute after the page loads.
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.
Reload the page and see the rendered comments!
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