Skip to content

Instantly share code, notes, and snippets.

@kalupa
Forked from johnnyopao/facebookformfill.md
Last active April 19, 2016 16:25
Show Gist options
  • Save kalupa/6c0173cbca9d23d64988 to your computer and use it in GitHub Desktop.
Save kalupa/6c0173cbca9d23d64988 to your computer and use it in GitHub Desktop.
Fill your Unbounce Forms using Facebook data

Fill your Unbounce Forms using Facebook data

Follow the full instructions here: https://community.unbounce.com/unbounce/topics/filling_in_form_fields_with_info_from_facebook#reply_14318503

<script>
  // Update facebookAppId below to reflect your Facebook Apps ID
  var facebookAppId = 'facebookappid-here';

  function setFormValues(response) {

    // ***UPDATE FIELDS BELOW***

    // Adjust field IDs on the left with the field IDs on your form
    $('#email').val(response.email);
    $('#name').val(response.name);

    // Uncomment the lines below if you require the additional data
    $('#first_name').val(response.first_name);
    //$('#lastNameField').val(response.last_name);
    //$('#linkField').val(response.link);
    //$('#genderField').val(response.gender);

    // The form will submit by default. To disable this comment out the line below
    lp.jQuery('.lp-pom-form .lp-pom-button').click();
  }

  lp.jQuery(document).ready(function() {
    // Change the #lp-pom-button-144 below to the element id to click
    lp.jQuery('#lp-pom-button-144').click(checkLoginState);
  });

  // Update the variable below with the fields you wish to obtain
  // See the full list of fields here:
  // https://developers.facebook.com/docs/graph-api/reference/user
  var requestedFields = {
    fields: 'name, first_name, last_name, email'
  };


  //
  //
  // Do not modify anything below this line 
  /* ---------------------------------------------------------------- */

  function fillForm() {
    FB.api('/me', requestedFields, function(response) {
      setFormValues(response);
    });
  }

  function triggerLogin() {
    FB.login(function(response) {
      if (response.status === 'connected') {
        fillForm();
      }
    }, {
      scope: 'public_profile,email'
    });
  }

  function statusChangeCallback(response) {
    if (response.status === 'connected') {
      fillForm();
    } else if (response.status === 'not_authorized') {
      triggerLogin();
    } else {
      triggerLogin();
    }
  }

  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  window.fbAsyncInit = function() {
    FB.init({
      appId: facebookAppId,
      xfbml: true,
      version: 'v2.5'
    });
  };

  (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'));
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment