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.