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.

Adding Facebook Login to Google Docs Forms – Part 3

Next up is actually adding the Facebook Login widget to the page. The code for this is fairly lengthy, so I’ll highlight the steps and basic strategy (if you just want to try it out, check out ahokas.ca/form)

  1. Register for a developer account at developers.facebook.com
  2. Create a Facebook app and get a unique app id for it
  3. Update your html file to look like the following, using your app id on the line “appId : ‘XXXXXXXXX’, ”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Google form embedded</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style>
    body {
      height: 1000px;
      padding: 0;
      margin: 0;
    }

    #login_header {
      background: #3EA100;
      color: white;
      width: 800px;
      font-size: 25px;
      line-height: 1.6em;
      font-weight: bold;
      text-align: center;
      padding: 10px;
      margin: 0 auto;
      border-radius: 25px;
      height: 100px;
    }
    </style>

  </head>
  <body>

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'XXXXXXXXXXXXXX',
      xfbml      : true,
      version    : 'v2.2'
    });
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));


  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    if (response.status === 'connected') {
      // Logged into your app and Facebook.
      FB.api('/me?fields=first_name,gender,age_range,timezone,locale,link', function(response) {
        console.log('Successful login for: ' + response.name);
        document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.first_name + '. Please complete our survey.';

        $("#survey").show();
      });
    } else if (response.status === 'not_authorized') {
      // The person is logged into Facebook, but not your app.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
      $("#survey").hide();
    } else {
      // The person is not logged into Facebook, so we're not sure if
      // they are logged into this app or not.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into Facebook to complete our survey.';
      $("#survey").hide();
    }
  }

  // This function is called when someone finishes with the Login
  // Button
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }


</script>
    <div id="login_header">
      <div class="fb-login-button" onlogin="checkLoginState();" scope="public_profile,email" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true"></div>
      <div id="status">
      </div>
    </div>
    <p>
    <div id="survey" style="display: none">
      <iframe style="margin: 10px 20%" src="https://docs.google.com/forms/d/1QK5j8aPC_PvoB0j2Nubkw-agWZ2QJKXbw6QUR_OOtCs/viewform?embedded=true" width="60%" height="600" frameborder="1" marginheight="0" marginwidth="0">Loading...</iframe>
    </div>
  </body>
</html>

The basic workflow is as follows:

  1. The Google Form starts in a hidden div so the end user can’t see it
  2. After successful Facebook login, the Javascript callback method displays the hidden div (and therefore the Google Form) using jQuery
  3. If the user logs out, the div and Google Form are hidden again

Want to see it in action? Try it out at ahokas.ca/form

Next up will be retrieving and storing information from the user’s public Facebook profile.

Adding Facebook Login to Google Docs Forms – Part 2

In my last article, I gave an outline of how we can enhance a Google form with a Facebook login. The steps were as follows:

  1. Create a Google form as usual
  2. Create a plain, empty html file on a web server.
  3. Embed the Google form into the empty html file (as an iframe)
  4. Within the html file, add a Facebook login widget via the Facebook Javascript SDK

The first three steps are pretty easy so we’ll tackle those all at once. I created a sample Google form and made it publicly available:

graeme’s cool form

Next, we need a plain html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Graeme's cool form embedded</title>
  </head>
  <body>
  </body>
</html>
</code>

Open up your favourite text editor, and paste the above into it, and save it to your computer as a .html file.

Now we just embed the Google form into the HTML file above. Google actually makes it really easy to do this. When editing the Google form, click File, Embed, and copy the URL that Google gives you. It should start with <iframe.

embedform

embedform2

Now just put that URL right after the <body> tag in the html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Graeme's cool form embedded</title>
  </head>
  <body>
<iframe src="https://docs.google.com/forms/d/1QK5j8aPC_PvoB0j2Nubkw-agWZ2QJKXbw6QUR_OOtCs/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
  </body>
</html>
</code>

That’s it! The Google form is now embedded in a website. Now, if you have your own web server, you can put that file up and try it out. If you don’t, no worries. Just open it up with a web browser on your local computer to see how it looks.

Depending on the size of your form, you may need to adjust the size of the “window” (iframe) that your form is displayed in. You’ll notice the default width (760) and height (500). Adjust those as you like to make your form fit nicely.

That’s it for now. Next up: adding Facebook login. As always, feel free to contact me.

Adding Facebook Login to Google Docs Forms – Part 1

Google Forms are a great, capable tool. They are quick to create, and are used for a number of purposes such as surveys and polls.

They are limited, however, in how much customization can be done. There are some add ons available for Google Docs, but customizing forms is mostly limited to cosmetic changes.

Recently, a potential client wanted to add a Facebook login to a Google form. The client uses Google Forms for marketing surveys, and in addition to collecting the survey data, the (enhanced) Google Form would also collect data available from the user’s Facebook profile page via the Facebook API. The Facebook login to the survey would allow a deeper insight into the marketer’s audience. Since Google Docs can use Google’s powerful Javascript-like Apps Script, the client had thought it might be possible to use the standard Facebook Javascript SDK and add a login widget to the Google form.

Unfortunately, as it turns out, this is not possible. Google’s Apps Script doesn’t provide a full web-browser equivalent to the developer of the Google Doc. Creating things like custom html, css, and executing arbitrary Javascript just isn’t possible with the Google Docs Apps Script API.

There is a work-around however. It’s a bit of work to set up, but does allow a Facebook login to be attached to a Google form (sort of):

1. Create a Google form as usual
2. Create a plain, empty html file on a web server.
3. Embed the Google form into the empty html file (as an iframe)
4. Within the html file, add a Facebook login widget via the Facebook Javascript SDK

With some styling work the Facebook login can be made to look decently integrated into the Google form.

Once a user logs into Facebook, they complete the form as usual. The html file (via some Javascript) could use the Facebook API to retrieve and then save the demographic information available from the user’s public Facebook profile. This information could be stored locally on the web server, or uploaded to a Google Spreadsheet via Google APIs.

In the coming blog series, I’ll give example code (and build a demo site) showing the above approach in action.

As always, feel free to contact me if you have any questions!