Facebook Social Login: Fill form fields with details from Facebook

Hi @jhage,

First, welcome to the community.

What you are trying to achieve is pretty complicated and unfortunately would require extensive custom development to make it all work.

Hopefully, the following should point you in the right direction:

In the past I’ve used Auth0 to fill out an Unbounce form with data from LinkedIn. They support pretty much any login platform, including Facebook, so I think that should be your first step.

After that it’s a matter of figuring out your exact flow, which you’ve done for the most part and coding it.

One of the ways to do the Facebook to CRM push is through a Zapier webhook. Once Facebook returns the necessary data, you would have to fire the data to Zapier.

Best,
Hristian

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 - Javascript is before body end tag ?
2- Button url Pass thought url parameter ?
here my page : http://unbouncepages.com/browzin/ not working

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

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

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

any tips?

Thanks!

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/

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

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

Kurtis

I couldn’t get anymore info to pull but am seeing positive results from my FB auto login variant tests.

Excellent! Thanks for the step-by-step, got it working on my first lander.

Hey Johnny! Just me, or is this not working for mobile? 😭

Hi Lisa, I’m not an specialist, but what I did - and it did work for me - was:

Enter the link https://developers.facebook.com/, on the upper right side, click on My Apps, and find the one you just created.

Then, click settings >> basic >> and in the field “App Domain” use yours (samwiseapp.com).
Below, at the “Website” block, include your page root URL (http://go.samwiseapp.com).

Hope it works for you too.