Facebook Social Login: Fill form fields with details from Facebook

Kurtis

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

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();

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? :sob:

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

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.

I use the basic profile from FB developer connection and have added more details of the user as age_range, and locale, which are included in the basic profile. Yet when I test people can indeed login, and I do see the basic data but these data I can never see, no matter with how many accounts (that indeed have this data) I try. I wonder if I did something wrong in the script.

I am using a test page to try it out: http://try.rekomendo.co/en/decoration/

Hey @Johnny_Opao :slight_smile: 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, thanks for your contribution. It works fine but the problem I have is it blocks the popup window image with facebook login.

I have looked at developer facebook and when implementing the current login button, the popup window is not blocked but I dont know how to associate it with unbounce autofill. Some help?
Thank you! :slight_smile:

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

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

  2. 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! :smiley:

1 Like

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

2 Likes

@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

Hi @jhage have you solved this problem?

I followed Auth0’s tutorial, but am always getting an error “Uncaught SyntaxError: Unexpected identifier” on “redirectUri: ‘https://unbouncepages.com/pedrosignup/’”

My test page is:
http://unbouncepages.com/pedrosignup/

Does anyone have any advice?

Thanks

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! :slight_smile:
Some prints attached!


(upload://lfavQwegK6eU8Lmaof3WCdzPNZz.png)

Hello,
@Johnny_Opao Does this means that once visitor come into my website the form(email) on my website will be pre filled with their email fetching data through facebook (assume they did login their facebook account with their browser before) ?

Looking forward for your reply. Thank you.

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?