Monday, January 04, 2010

Quick Guide to Using Open Social's Activity API with Google Friend Connect

As I've discussed in some previous posts, Google Friend Connect gives you a simple way to access Open Social applications.  The JavaScript API is pretty simple and is mainly useful for logging in, setting up small social networks, and rendering social gadgets.  You can use  the JavaScript API to decorate HTML with various social mini-gadgets for tagging, rating, commenting, and so on.

In this post, we'll look at how to directly call the Open Social API without going through a pre-existing gadget.  Our motivation is the Open Social Activity API.  Familiar social networking sites like Facebook and Twitter have "activity streams" in which each user posts status updates. These can also be automatically generated side effects (such as bookmarking a site with's Twitter interface, for example).

An Open Social Activity API example using Google Gadgets is here:   In addition to being an HTML gadget, this relies on the Gadget API (see the call to gadgets.util.registerOnLoadHandler(startActivity) near the bottom). To do the same thing with Google Friend Connect, we need to take the following steps:
  1. Load the FriendConnect JavaScript libraries with google.load.
  2. Use the FriendConnect libraries to initialize an OpenSocial API call.
  3. Pass in a callback function (startActivity() in our example) that the server side (at Google HQ, presumably) will invoke. 
  4. Implement the callback function using the OpenSocial Activity API. 
The code for doing this is below, with comments.

<!--Shows how to use the Open Social activity API with Google Friend Connect -->
  <div id="content_div"></div>
  <!-- Initialize the Google Friend Connect OpenSocial API. -->
  <!-- Load the Google AJAX API Loader -->
  <script type="text/javascript" src=""></script>
  <!-- Load the Google Friend Connect javascript library. -->
  <script type="text/javascript">
    google.load('friendconnect', '0.8');
  <script type="text/javascript">
          /* This will dynamically change the content to the new activity */
     var div=document.getElementById("content_div");

     /*No caching for development. */


     /* Use this to invoke Open Social methods */
    site: '##########################',   /* Replace this with your GFC ID */
    onload: function(securityToken) { startActivity(); }
  /* This is a callback invoked when we initial the Open Social libraries. It has a callback method of its own, called callback()  */

  function postActivity(text) { 
    var params = {}; 
    params[opensocial.Activity.Field.TITLE] = text;
    var activity = opensocial.newActivity(params);
    opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, callback);

    div.innerHTML = "Activity title is: " + activity.getField(opensocial.Activity.Field.TITLE);
  * Server calls this function to indicate whether the activity post succeeded or failed.
  function callback(status) {
    if (status.hadError())
      alert("Error creating activity.");
      alert("Activity successfully created.");
   * Start the process of posting an activity.
  function startActivity() {
    postActivity("This is a sample activity, created at " + new Date().toString());


To use this, just save it as an HTML file on a Web server registered to Google Friend Connect and load the page.  You will need to change "################" to use your registered site ID.

No comments: