Facebook Social Login: Fill form fields with details from Facebook

Follow

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!

Best answer by Johnny_Opao

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 Social technologies | Meta for Developers  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();