My favorites ▼ | English ▼ | Sign in

Google Friend Connect API (Deprecated)

Getting Started

Overview

This document describes the process required to enable Friend Connect on your site. It applies to all integrations, whether client-side (using JavaScript) or server-side (using the OpenSocial REST/RPC protocols).

This technology is built on OpenSocial, and many of the OpenSocial JavaScript calls will work with Friend Connect. Check the OpenSocial JavaScript documentation for more functions that you can use to interact with the members of your website.

For a conceptual overview of the requirements for deep integration of Friend Connect with an existing site and sign-in system, see Integrating GFC with Your Existing Site.

For ideas and inspiration, check out Guitar Universe , a Friend Connect integration example site. To see the code, just load the page and select "view source" in your browser.

Audience

This document is intended for developers who wish to integrate Friend Connect with their site using JavaScript or the OpenSocial REST/RPC protocols. It assumes that you are familiar with the general concepts behind OpenSocial and how it works with Friend Connect.

Contents

  1. Enabling Friend Connect on your pages
  2. Implementing the inline Friend Connect library (for JavaScript)
  3. REST API requirements

Enabling Friend Connect on your pages

Tip: For code samples that you can copy and paste to your own pages, see the JavaScript quick reference.

Regardless of how you plan to integrate Friend Connect on your pages, you'll need to set up your site in the same way that you would set up a normal Friend Connect site:

  1. Head to the Friend Connect admin site
  2. In the left-hand menu, click Add new site.
  3. Type the name and URL of your site, and click Continue.

That's it. You can now use the admin site to generate the code snippets required to add gadgets to your pages. In addition, you can also refer to this page to find your Site ID, which is required to implement Friend Connect on your site.

To find your site ID:

Implementing the inline Friend Connect library (for JavaScript)

To integrate GFC client-side directly using JavaScript, you'll need to implement the inline Friend Connect Library.

  1. In the left-hand menu of the Friend Connect admin site , click Plug-ins and APIs.
  2. If it's not already selected, click the JavaScript API tab.
  3. Copy the supplied HTML code and paste it into the <head> section of each page that you want.

Your page is now automatically configured with the correct settings for your website. The pasted code snippet does the following:

Configuring the inline Friend Connect library

Any calls to retrieve social data before the OpenSocial APIs are loaded will result in JavaScript errors. You must load the OpenSocial APIs before attempting to retrieve any social data. To execute an initialization callback after your libraries are loaded, change the line that reads: 

onload:function(securityToken){/* your callback, which is passed a security token */}

to

onload:function(securityToken){ initAllData();}

This callback references the initAllData function, which you need to add to the JavaScript code that your website executes. To add it, copy the HTML code below and paste it into the <head> section of each page you that you want.

<script type="text/javascript">
 function initAllData() {
   var params = {};
   params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] =
     ['profileExtensions'];
   var req = opensocial.newDataRequest();
   req.add(req.newFetchPersonRequest('VIEWER', params), 'viewer');
   req.add(req.newFetchPersonRequest('OWNER', params), 'owner');
   req.send(setupData);
 }
</script>

By now, you should have a page that looks something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Your website's title</title>

    <!-- Load the Google AJAX API Loader -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <!-- Load the Google Friend Connect javascript library. -->
    <script type="text/javascript">
      google.load('friendconnect', '0.8');
    </script>

    <!-- Initialize the Google Friend Connect OpenSocial API. -->
    <script type="text/javascript">
    google.friendconnect.container.initOpenSocialApi({
      site: '####################',
      onload:function(securityToken){ initAllData();}
    });
    </script>

   <script type="text/javascript">
     function initAllData() {
       var params = {};
       params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] =
         ['profileExtensions'];
       var req = opensocial.newDataRequest();
       req.add(req.newFetchPersonRequest('VIEWER', params), 'viewer');
       req.add(req.newFetchPersonRequest('OWNER', params), 'owner');
       req.send(setupData);
     }
    </script>
  </head>
  <body>
  </body>

</html>

Make sure to replace #################### with your Site ID.

Congratulations, your site is now configured to use JavaScript to request data from Friend Connect users!

Back to top

REST API requirements

Check out some code samples that you can copy and paste to your own pages.

OAuth is an open protocol that allows users to can access their OpenSocial data without having to enter their password. To use the OpenSocial REST API with 2 Legged OAuth, you'll need a consumer key and secret. These values prove your identity to the OpenSocial network.

  1. In the left-hand menu of the Friend Connect admin site , click Plug-ins and APIs.
  2. Click the REST API tab. Your consumer key and secret are listed on this page.

Back to top