Recently in Google+ Category

It seems like life becomes busier and busier every year. Between longer hours at work and increased obligations elsewhere, who has time to try out a new API? It’s 2012. We only have 3 years to perfect the flying DeLorean!

You say you don’t even have 5 minutes to play with one of the platform starter projects? Well hopefully I can give you a taste of the API in the time you just spent reading this paragraph. You don’t even have to write any code, I promise. (Although I make no promises about inspiration to code that this may cause.)

Since we’ve already wasted 30 seconds babbling, let’s dive into the API already. The easiest way to see the Google+ platform in action is to use the API Explorer. This tool provides point and click access to most of the APIs that Google offers including the REST APIs for Google+.

Since this may be your first time, we’ll keep it simple. Follow these steps to view your public Google+ profile.

1. Navigate to the API Explorer. To make an API call we must first select the plus service. On the left pane scroll down to and select the plus API. The middle columns will update to display the available versions and methods.
2. Scanning through the available methods the profile.get method looks like a match, but it requires a userId, which we do not know. We can use the shortcut value of me, but we’ll need to authorize the API explorer to discover our userId. To do this make sure plus.me is selected from the drop down at the top of the window and click on the ‘Switch to Private Access’ link. This will trigger an OAuth popup. Grant the API Explorer permission.
3. Now that the API Explorer can determine our userId, all we need to do is specify me for the userId and to execute the query.
4. Upon execution the bottom of the API explorer, the history pane, will display the results of our request. Assuming it was successful we’ll see the HTTP headers from request and response as well as a JSON representation of our public Google+ profile.

Congratulations! If you read fast enough 1 or fewer minutes have incremented on your clock and you’re already using the Google+ APIs. During these four steps we’ve witnessed many important features of the core REST APIs that make up the Google+ platform. We’ve completed the OAuth 2.0 dance to access private information, your userId via the plus.me scope, and observed a fetch of your public profile.

Now that you’ve had a taste of the JSON, you know you want to go grab a starter project, right? :D

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.

1. 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.
2. Scanning through the available methods the comments.list method looks perfect, but we need an activity ID to call it.
3. 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.
4. 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.
5. 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.
6. 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.
7. We can now switch to the comments.list method and supply the activity ID that we just copied.
8. 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.

1. Navigate to code.google.com’s API console: https://code.google.com/apis/console/
2. Create a new project using the project drop down menu
3. Click on the ‘Services’ link in the API Console menu and toggle the Google+ APIs to ‘on’
4. Click on the ‘API Access’ link in the API Console menu to access the keys for your new application.
5. 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

Google+ is pretty cool and getting cooler by the day. Circles are a great tool to connect with the people you’ve just met, but right now it’s a bit tricky to share your profile URL since they look something like this: https://plus.google.com/102817283354809142195 (that’s my profile if you’re wondering)

A lot of us already have a short, witty personal domain name, and on these domains the /+ path is almost always available. Wouldn’t it be cool if we could just tell people to find us at http://example.com/+?

Now that we have the awesome idea, how do we implement it? This will differ a bit based on how your web site is set up and how much access you have there.

With Apache .htaccess and mod_rewrite

If you have access to write .htaccess files on your web host, this is a great solution. If you do not know what a .htaccess file is, skip to the next option :)

1. Create a .htaccess file in the root directory of your domain with the following contents:

RewriteEngine On
RewriteRule ^/?\+$ https://plus.google.com/NUMBER_PART_OF_YOUR_PROFILE [R=301,L]

On nginx

There are indeed web servers other than Apache. One popular alternative is the awesome nginx. I’ve never had the pleasure of using it, but luckily Chris Broadfoot was kind enough to share this nginx rewrite rule.

1. Drop this configuration into your server’s configuration file.

server {
  server_name yourdomain.com;
  location ^/?\+$ {
    rewrite ^ https://plus.google.com/NUMBER_PART_OF_YOUR_PROFILE permanent;
  }
}

With JavaScript

What if you lack either SSH access or are not comfortable with mod_rewrite? All is not lost! If your website allows you to paste in some JavaScript code you can still set up a redirext. This method is not optimal, though, because it has a way of confusing web crawlers and primitive web browsers. In any case, here are instructions:

1. Create directory + in the root of your domain.
2. Add an index.html in that directory with the following contents:

<!doctype html>
<html>
<head>
<script type="text/javascript">
window.location="https://plus.google.com/NUMBER_PART_OF_YOUR_PROFILE_URL";
</script>
</head>
<body></body>
</html>

If you’d like to see this implemented on any other platforms, give me a hollar and I’ll add it :)

Thanks to:

• MG Siegler for the idea!
• Phillip Bradbury for a stronger regex (because weak regex can cause sad results)