How to Add Facebook Login on Your Website & Mobile

How to Add Facebook Login on Your Website & Mobile

Would you like to have more information about people who visit your website?

Do you wonder how you can retarget your Facebook ads visitors?

Letting visitors log in to your website with their Facebook logins can allow you to gather all their relevant information for you to better retarget them with Facebook ads.

In this article, we’ll show you how you can add a Facebook login option on your website.

Why using Facebook login on your website?

The big question remains: why should you give your users the option to log in with Facebook? What’s in it for you?

Well, by giving your users the option of logging in with Facebook, you make their life easier. They don’t need to create a new account with a new password, they can centralize their logins.

It also simplifies the process of them creating an account on your website which in turn could improve your conversion rate. But what more?

Well, with the Facebook login option, you can gather more information about your user which in turn can improve your product, advertising and more.

Let’s dive into how you can set on your website today!

#1 – Choosing the data to collect

When it comes to gathering data from your users with a Facebook login, there are over 50 options, so it’s important to know what matters most to your company.

It’s often tempting to want to gather as much information as possible but it could also drastically your opt-in rate which I’m sure isn’t your goal. The objective here is to find the data that has the highest impact on your business goals and screw the rest.

Facebook Login

As you can see in the image above, Serpstat allows its users to log in with Facebook, Twitter, Linkedin, Google or email depending on what their customer prefers.

When clicking on the Facebook login option, you are prompted to accept Serpstat’s request directly on Facebook in something that looks like this.

Serpstat Facebook Login

And if you click on edit this then you’ll see what Serpstat is gathering from their Facebook login button which is my email, name & profile picture.

Serpstat Login Facebook

We recommend focusing on the most relevant information that truly helps your business accomplish their objectives to not diminish conversion rates. Here are a few important pieces of information you should gather:

Email

The true advantage of gathering the email of your consumer beyond adding it to your email list is making sure that you have the correct email address for your Facebook custom audience. You’ll also avoid any misspellings in people’s email addresses which would have a negative impact on your business.

Public profile

By asking access to the Facebook public profile, you’ll be able to collect the visitor’s name, the gender, the language used and the age group of the person in question. This will help you send them better information through better advertising or an email newsletter.

User likes

By gathering such information, you will also be able to send more relevant information to the customer in person through a better understanding of what they like.

User friends

This information is not essential but can help your website add social proof by showing the user which of their other friends are using your product or service.

Hot tip  ?️: We always recommend being upfront about any data you gather and respect the GDPR. People have a higher chance of converting if you are transparent.

#2 – Setting up your app login

After you’ve chosen the permissions you want to request for your users, it’s to build the Facebook app that handles the permissions on your website. While this can seem daunting, it really isn’t.

Step #1 – Creating a Facebook developers account

First head over to developpers.facebook.com, log into your Facebook account and click on the right hand side on my apps. Then click on create app.

Facebook ads developper

Step #2 – Enter the name of the app and the most suitable category

Then, you’ll need to choose your app name and the email of correspondance. Then just click create app ID.

Create Facebook Login

Step #3 – Select Facebook login inside your dashboard and click on set up

Facebook Login

Step #4 – Choose where you want the Facebook login to appear: iOS, Android, Web or other.

Facebook login

Step #5 – By choosing web, we now need to give a few pieces of information before getting accepted by Facebook.

Facebook app url

#3 – Submit your Facebook login app for review

The next step is to request Facebook to add permissions and features to your request. This is essential if you are requesting more than people’s email, profile picture & name then you’ll need to go through that.

The first step to do this is to go inside developpers.facebook.com, clicking on app review on the left and then clicking on permissions and features in the dropdown menu.

For instance if you want to access the posts someone makes, then you would see this and all you have to do is click on request.

After clicking request, you’ll be prompted to click continue. You will land on a page that will ask you how to gain access to your app to verify if Facebook grants you the permissions requested.

Facebook App Verification

Then, you need to tell Facebook how you plan on using the permission you are requesting. We suggest being as transparent as possible because it will increase your likelihood of being accepted.

As you will see, you’ll need to explain how your app will use the feature and also screencast showing what your end-to-end user experience looks like. You could show how people log in with Facebook on your app and then how the permission requested is used inside your app from the user’s perspective.

Finally, you can add more permissions & features request right under in the same demand so that you get a faster answer.

Facebook additional permissions

Once you’ve answered all the questions and uploaded the right documents, it can take a couple of days for your app to be reviewed. It could take longer, but it’s usually less than a two weeks after.

#4 – Adding the Facebook login app to your website

There are two ways in which you can add the Facebook login process on your website. In this example, we’ll show you the official Facebook way.

You first need to head over to the Login Button – Facebook Developers page where you’ll be able to customize your button easily with parameters.

First you need to select a few options in the plugin configurator in a space that looks like the one below.

You need to select the width, button size, the button text, layout shape and you can choose between two specific options.

By enabling logout button, you let your users log out by clicking on your button a second time. The include name and profile picture when user is signed into Facebook is pretty straightforward.

Remember that normally, the button is made to collect just basic information. If you made request for other permissions, you’ll have to add them here in order for them to work.

Once you are done making your button look exactly like you want, you can take the Javascript SDK code and add it under your body tags wherever you want it to appear on your website.

Here’s an explanation of the code you’ll have to input in case you want to manually change anything.

Facebook login code

And here you go, if you have already been approved by Facebook for your permissions you are set otherwise you’ll just have to wait a couple more days.

Finally, if you want to leverage the data you’ll gain about your users and you can’t devote developers to help you leverage them with .csv files there are tons of third-party software that can help you do just that.

Keeping the email registration possible to not lose subscribers

What’s next?

Adding a Facebook login is a great way of not only making the registration process of your service or product more efficient for users but also to gather relevant information about them to improve your company’s product efforts. In recent years, Facebook Messenger Marketing has gained a lot of traction and a Facebook login will help there as well.You just have to head over to developers.facebook.com and follow the steps laid out in this article.

It really is more simple than most people think and we hope this article made you see that. Finally, if you want to improve the design of your button don’t hesitate to reach out to developers if you don’t already have your team of developers in-house.

Get a free marketing proposal

Our proposal’s are full of creative marketing ideas you can leverage in your business. Everything we’ll share is based on our extensive experience & recent successes we’ve had.

Exclusive Facebook Ads Insights

Gain access to the most exclusive Facebook ads insights from our team of experts for free. Delivered every month, straight to your inbox.