Hacking Google+ Part 2: Building a Friend Selector

So you have followed my first tutorial and have successfully connected your web-app to Google+ with the Sign-In Button and are now ready to offer your users a truly social experience – well done, but what’s next?! In this short tutorial I’ll show you how to implement one of the key-patterns most social web-apps will […]

[easy-share buttons counters=1 counter_pos="inside" template="flat-retina"]

So you have followed my first tutorial and have successfully connected your web-app to Google+ with the Sign-In Button and are now ready to offer your users a truly social experience – well done, but what’s next?! In this short tutorial I’ll show you how to implement one of the key-patterns most social web-apps will require: the Friend Selector. Amazingly, neither Facebook nor Google+ are offering  a ready-to-use widget for this very common use-case, but don’t worry, the Google+ friend selector  is easy to build and takes only 30 lines of JavaScript code.

Demo-App: https://dev.diesocialisten.at/google+/
GitHub Repository: https://github.com/DieSocialisten/Hacking-Google-Plus
Resources: https://developers.google.com/+/

Before We Start…

Please make sure that your web-app is properly connected with the Google+ Sign In-button and the Google+ JavaScript client – its a prerequisite of this tutorial that your users are already logged in with Google+. If in doubt, please read the first part of my series on Hacking Google+ to learn how to integrate the Sign-In-button – the source-code shown in this tutorial extends on the code from part 1!

Fetch Your Friends

Naturally, we’ll first need to fetch the current user’s friends, or, to be more precise, the people she has circled on Google+. This can be achieved using the the people.list method of the Google+ API, as soon as the user has authorized the app:

gapi.client.request({path:'/plus/v1/people/me/people/visible', method:'GET', callback: function(result) {
  console.log(result);
}});

There’s one big downside: Google+ limits the number of results delivered by this method to 100. You can set the number of results using the maxResults-parameter, but 100 results is the max. you’ll get. The good news: the result will contain a field nextPageToken, which we’ll be using to page through more results. Here is how the response of our first hit on people.list will look like in the JavaScript console: nextPageToken in the JS-console

To receive the next 100 results, all you have to do is pass the content of nextPageToken in the parameter pageToken (watch out, the parameters are named slightly different!) to your next hit on people.list:

gapi.client.request({path:'/plus/v1/people/me/people/visible?pageToken=CGQnti-89gn', method:'GET', callback: function(result) {
  console.log(result);
}});

Notice: On Google+, users are able to limit which part of their social graph is exposed to the app by selecting circles on the OAuth-dialog – this gives users greater control on which of their contacts is visible to the app (on Facebook, to the contrary, an app authorization always exposes the full friend-list). This means, that our Friend Selector will not necessarily display all circled contacts of the current user, if she has chosen to limit our apps’ access to her circles.

Recursive Mode

Knowing about nextPageToken, all we have to do is build a recursive function that repeats calling itself until nextPageToken isn’t set with a value anymore – at this point we’ll know that we’ve fetched all circled people of the current user. Here is a stripped down version of the function gPopulateFriendlist() (I’ve left out the actual code to build the HTML of the Friend Selector since its trivial, you can check it out in the demo or in the Github-repo):

function gPopulateFriendlist(friends, token) {
  if (!token || !friends) {
    friends = [];
    token = '';
  }
  gAPI('/people/me/people/visible?pageToken='+token, function(result) {      
    if (result.items) {
      friends = friends.concat(result.items);
      $.each(result.items, function(index, friend) {
        // HTML: Add Person to Friend Selector
      });
    }
    if (result.nextPageToken) {
      return gPopulateFriendlist(friends, result.nextPageToken);
    } else {
      // Done, we've fetched all friends!
      return friends;
    }
  });
}

The function starts fetching people from the API endpoint /people/me/people/visible and storing them in the array friends. As long as the result contains the field nextPageToken, gPopulateFriendlist() is continuing to call itself while passing the current friends-array and the token. As soon as the result doesn’t contain a nextPageToken anymore, we know we’re done and return the friends-array. With the complete list of friends (including their Google+-ID, name and URL to their profile-picture), it should be fairly easy to build & populate the actual Friendselector in HTML. I’m using an ul-element to build my selector:

$.each(friends, function(index, friend) {
  li = $('<li onclick="alert(\'You have selected '+friend.displayName+' (ID: '+friend.id+')\'); return false;"'+
             'data-id="'+friend.id+'"><img src="'+friend.image.url+'"/>'+friend.displayName+'</li>');
  $('#friendlist ul').append(li);
});

Google+ Friend Selector

What’s Next

This short tutorial should give you some ideas on what to actually do with the social graph data that is available through the Google+ API. Of course we’ll want to take this information to use by posting content back to the users circled people, and we might be able to using other parts of the Google+ API: App Activities & Interactive Posts. Until then – have fun and Hack Google+!

More articles from our series Hacking Google+:

Remarks: this post was written during #LNDUBP – “Long night of the (un)written blog-posts” – a blogger-event run by http://blogseed.at –  thanks Fabian & Patrick and sorry for stealing your beers ;)

[easy-share buttons counters=1 counter_pos="inside" template="flat-retina"]

About Author

Michael Kamleitner

Michael Kamleitner is CEO & Product Manager at Swat.io, a Social Media Management solution that’s helping companies to improve their customer support & content management on Facebook, Twitter, Instagram and others. Swat.io is currently used by companies such as 3Österreich, Hitradio Ö3, ÖBB, Focus Online and Burda Intermedia. Follow Michael on Twitter, Facebook or Google+!

Facebook Twitter Google+ Foursquare SlideShare