Adding Facebook Login to Google Docs Forms – Part 4

The final step in the process is to use the Facebook Javascript API to make calls to retrieve some information from the user’s public profile. Their API is documented here so I’ll just give a small example.

From Part 3 in the series, we’ll add a little Javascript to our statusChangeCallback function, which was called every time the user logs in or out.

In the block that handles successful login, we’ll show a popup with some of the user’s information. Here’s the code snippet:

    if (response.status === 'connected') {
      // Logged into your app and Facebook.

      //...[snip]

      FB.api('/me?fields=first_name,gender,age_range,timezone,locale,link',
             function(response) {
               alert('FYI Here is some info about you: ' + 
                     'Gender:' + response.gender +
                     ', Age Range: ' + response.age_range.min + ' - ' + 
                     response.age_range.max + 
                     ', Timezone: ' + response.timezone + 
                     ', Locale: ' + response.locale +
                    ', Your profile: ' + response.link);
             });

Depending on the user’s privacy settings, some of their information will be unavailable through the API.
You can try out the completed form and view all the final source code at ahokas.ca/form.

This pretty much wraps up the series on adding Facebook login to a Google form. The summary then:

  • You cannot modify the Google form to add a Facebook login widget directly to the form
  • The approach is to use an iFrame to wrap the Google form in another site
  • The site contains a bit of Javascript / HTML that allows the user to login, then displays the Google form to the user

As always, feel free to comment below if you have any questions.