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.

Leave a Reply

Your email address will not be published.