Facebook Social Login: Fill form fields with details from Facebook

Hi @Johnny_Opao, I’m having trouble using this script inside a Popup (iframe) on a landing page, so how can I use this script in this case? The problem is because the Popup-iframe generates another URL and Facebook doesn’t recognize it, informing that the URL is blocked. What can I do? I just need to fill the Name and Email fields on the form inside the Popup. Could you help me please?

Hi! Either I misunderstood the point or I’m doing something wrong here. I’m trying this on a landing page variant: https://www.aparelhosauditivosportugal.pt/d.html
I think I followed the tutorial exactly but it just doesn’t work. What am I missing? Thanks! 🙂
Some prints attached!

@Hristian - THANK YOU for the recommendation on Auth0. I setup an account and created a FB social connection login - but being a non-programmer, I’m not exactly sure what to do next.

What callback URI should I be using? I’m not authenticating with my own app, I’m collecting the data and moving the user to a 2nd landing page on Unbounce. Is there an Unbouce callback URI that I should be using?

Thanks for your help. It’s sincerely appreciated!

-John

I’m the ultimate newbie here. I’m not a programmer and I’m new to the Unbounce platform. I’m trying to replicate functionality from my current landing page provider that is somewhat complex and includes a custom Facebook Login button. Despite all the amazing code shown here, I can’t figure out how to put all the pieces together to achieve what I’m looking for.

Example Page

The gist:

1. A lightbox button on landing page

2. Lightbox opens to display 2 options: A custom Facebook login button and a text link to sign-up via email instead.

3a. Custom FB button (upon approval by user) submits leads 1st name & email from FB to Zapier

3b. Text link opens new lightbox to enter 1st name and email address and submits to Zapier on submit

4. User is re-directed to a “full” squeeze page requesting more information. First name and email address are shown but locked - user cannot change (see step 5)

5. Upon Squeeze page submit, all user data is sent to Zapier. The additional information is appended to the previous submission (keyed to the email address provided).

I’ve been able create the Facebook App and have successfully setup the default buttons to generate a re-direct to a new page; however, I can’t figure out how to A) use a custom button to do this and B) how to submit the user’s data to my CRM. I don’t want a visible form in the 1st lightbox so how do I collect the data from facebook and forward it to Zapier?

Can anyone offer some help? I know it’s asking a lot! 😃

Hey @Johnny_Opao 🙂 this is awesome, thanks!

Quick question I haven’t been able to find an answer to in the Community – is there a way to have the Facebook data prefill the form if the user has come directly from Facebook to the landing page i.e. via a Facebook ad link ???

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.

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

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

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!

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?

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)[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 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.

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.