Hey Michael - We don’t have a built in solution at the moment. However I put together a solution that should work in filling your forms with basic Facebook information. I’d be happy if you could give it a try and let me know if it works for your use case.

Add the script below to your ‘javascript’ box in the page builder

https://gist.github.com/johnnyopao/0f…

Be sure to update the section in the code labelled “UPDATE FIELDS BELOW” with your own fields IDs

To find the ID of your Unbounce fields open up the form builder, select a field, and look at the grey text below your field label. The grey value is the ID for that field.

Once your form fields are configured drop a button on your page and set its URL to:

javascript:checkLoginState();

This will get the button working under the domain ‘unbouncepages.com’. However if you wish to use this under your own domain you’ll need to configure some settings within Facebook itself.

Keep in mind you’ll only need to follow the instructions below for the first time you setup your Facebook ‘app’.

One time setup: setting up your own Facebook form app

Head over to https://developers.facebook.com/ and enable access to your developer account.

At the top menu select ‘Apps > Create a new app’

Set your apps display name and choose a category. Once that’s done select ‘Settings’ from the left menu.

Set the ‘Contact Email’ and select “Add Platform”. Choose ‘Website’ and define your domain URL.

From the left menu select ‘Status & Review’. Toggle the switch to turn your app ‘Live’

Your app is now configured! The last step is to obtain your App ID. Select ‘Dashboard’ from the menu and copy your ‘App ID’

Head back over to the Facebook form fill script and replace the App ID with your own:

That’s it! Remember this configuration only needs to be done once, afterwards you simply need to paste the updated script on your page and set your button to javascript:checkLoginState();

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)e0];

    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>

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: /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)N0];

    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)s0];

    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!

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.

@Johnny_Opao Thanks so much for the step-by-step instructions! Got the button working on our unbouncepages.com/samwise, but as you mentioned, it no longer works at go.samwiseapp.com.

Could you elaborate a bit more on the Facebook settings we need to change to get it up and running again?

Thanks in advance!

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

Hi Stefano. It worked fine for me. We did tests on several different mobile devices.