var SITE_ID = '08065742007729024322';
    var viewer, ownerFriends;
    google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.loadOpenSocialApi({ 
            site: SITE_ID,
            onload: function() { initAllData(); }});
 
    function initAllData() {
      var params = {};
      params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] =
        [opensocial.Person.Field.ID,opensocial.Person.Field.NAME,opensocial.Person.Field.THUMBNAIL_URL,opensocial.Person.Field.PROFILE_URL];
      var req = opensocial.newDataRequest();
      req.add(req.newFetchPersonRequest('VIEWER', params), 'viewer');
      req.add(req.newFetchPeopleRequest(
        new opensocial.IdSpec({'userId' : 'OWNER', 'groupId' : 'FRIENDS'}), params), 
        'ownerFriends');
      req.send(setupData);
    };
 
    function setupData(data) {
      ownerFriends = data.get('ownerFriends').getData().asArray();
      var html = "";
      for (var i = 0; i < ownerFriends.length && i < 13; i++) {
        var person = ownerFriends[i];
        html += "<a title='" + person.getField("displayName") + "' href='" + person.getField("profileUrl") + "'>";
        html += "<img class='memberPhoto' src='" + person.getField("thumbnailUrl")  + "'/>";
        html += "</a>&nbsp;&nbsp;";
      };
 
      document.getElementById('members').innerHTML = html;
	  
      viewer = data.get('viewer').getData();
      if (viewer) {
        document.getElementById('profile').innerHTML = 
        '<img align="left" src="' + viewer.getField("thumbnailUrl")  + '">' +
        '<br>&nbsp;&nbsp;<b>Hi ' +  viewer.getField("displayName") + '!</b><br>&nbsp;&nbsp;' +
        '<a href="#" onclick="google.friendconnect.requestSettings(); return false;">Settings</a> ' +
        '<a href="#" onclick="google.friendconnect.requestInvite(\'Great site!\'); return false;">Invite</a> ' +
        '<a href="#" onclick="google.friendconnect.requestSignOut(); return false;">Sign out</a><br>';
      } else {
        google.friendconnect.renderSignInButton({ 'id': 'profile' });
      }
    };