Facebook Social Login: Fill form fields with details from Facebook

Hello,

I wanted to know if it’s possible for a form on an Unbounce page to be filled using the information of one’s Facebook profile?

Thanks!

1 Like

This is awesome! I’ve used this to retrieve the email address, first name, and last name successfully.

The only other items I would like to retrieve is the hometown and province. Is this possible?

I updated the scope to include user_location and user_hometown.

Hey Kurtis - Increasing the scope should do the job. We have a ticket open so lets dig into this together to figure this out.

Just sent you a reply now!

I got this to work successfully with the form collecting the name and email but the problem is that the Facebook log-in pop-over is blocked the first time you click it. Is there a way to ensure the pop-up is never blocked?

Hey there!

Sorry about that. There’s a small bit of code that i’ve now added that should fix this issue.

Grab the updated script and give it another go!

<script>
  /**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-13-010
  */

  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
      
    //$('#firstNameField').val(response.first_name);
    //$('#lastNameField').val(response.last_name);
    //$('#linkField').val(response.link);
    //$('#genderField').val(response.gender);
    
    //The form willl submit by default. To disable this comment out the line below
    document.querySelector('.lp-pom-form button').click()
  }
  

  function statusChangeCallback(response) {
    if (response.status === 'connected') {
      fillForm();
    } else if (response.status === 'not_authorized') {
      triggerLogin();
    } else {
      triggerLogin();
    }
  }
  
  // Show Login Window
  function triggerLogin() {
    
   FB.login(function(response) {
     if (response.status === 'connected') {
         fillForm(); 
        }
   }, {scope: 'public_profile,email'}); 
  }
  
  // Called when your Facebook button is clicked
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  // Update appId below to reflect your Facebook Apps ID
  window.fbAsyncInit = function() {
  FB.init({
    appId      : '552705011513631',
    cookie     : true, 
    xfbml      : true, 
    version    : 'v2.0',
    status     : true
  });
  };

  (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'));
  
  function fillForm() {
  
  // 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'
    };
    
    FB.api('/me', requestedFields, function(response) {
      setFormValues(response);
    });
  }
</script>
1 Like

Thanks!

1 - Javascript is before body end tag ?
2- Button url Pass thought url parameter ?
here my page : http://unbouncepages.com/browzin/ not working

Hey Maxime

It looks like you got this working now. Did you run into any other issues? I just tested out your page and it worked just fine. If your still having issues please detail them further.

Everything in now find, the template that i bought on time forest is include a javascript that block the Facebook connect, now it’s just perfect

Hello Johnny. I have been wrestling with this for days now. Everyhting works, except the crucial fact that popup blockers still block the facebook login dialog.

Check it out at: www.getqounter.com

Hey Augusto

Are you still seeing this issue?

I visited the page and it seems to work just fine. If you are still running into issues shoot a email to support@unbounce.com and address it to me. Let me know what browsers/popup blocks are affecting it and i’ll see if I can give any helpful tips

Hello Johhny. Yes we were still seeing this issue so we went ahead and just programmed our own button with the custom HTML control. If we called the facebook login on the javascript click event of our button the problem went away.

Hi there, I’m unable to get this going. My page is http://unbouncepages.com/facebook-connect-test2/

any tips?

Thanks!

Hey Pedro, 
If you’re still running into issues with this, I would reach out to our support team directly to see if we can lend some insights. Feel free to reach out via email (support@unbounce.com) or by giving us a call at 1.888.515.9161.

Ive got a ticket into support, but just curious if anyone has successfully got this to work on mobile? Works fine on desktop, but when I add the button to mobile nothing happens when you click the button. Ive got the Facebook App setup since I am not hosting on Unbouncepages as well. http://guide.viviscal.com/healthy-hair-guide/

Hello Guys,

I have an other question about this function. It worked out pretty well but we didn’t managed to get it filled in dutch language. 

This is the script we used: https://community.unbounce.com/unbounce/topics/filling_in_form_fields_with_info_from_facebook?topic-reply-list%5Bsettings%5D%5Bfilter_by%5D=all

I have customised a couple of things but it isn’t working:

(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/nl_NL/sdk.js”;

    fjs.parentNode.insertBefore(js, fjs);

  }(document, ‘script’, ‘facebook-jssdk’));

  

  At first it was:

  (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/us_US/sdk.js”;

    fjs.parentNode.insertBefore(js, fjs);

  }(document, ‘script’, ‘facebook-jssdk’));

  

I customised it this way because Facebook told us so:

  https://developers.facebook.com/docs/internationalization

  

It should work but it doesn’t, we still get our responds in English. We want to autofill the data in dutch language. Do you know were it went wrong? The url of the Facebookpage were the autofill in button is running is: https://www.facebook.com/uwvakmannen.nl/app/1083190695053293/

 

I hope you people can help us out.

With kind regards,

Nick Nikkels

Hey Kurtis, how do I open up the scope to include  user_location and user_hometown? I need to get auto populating address on my form. I’m a designer, not a dev! Thanks, J

Hey all, this is great. However, I’m trying to pull a phone number via Facebook. Looking at https://developers.facebook.com/docs/graph-api/reference/user I can’t see a phone number field, am I right to think I can’t because FB keep phone numbers private?

Also, is there a way/code to pull things like ‘list’ categories from FB?

Hey James!

It’s been a while since I looked at this, but hopefully the Unbounce people will pop in here to help.

I didn’t end up using the social login for forms.

Best of luck!