How to Integrate Facebook Login into Your Site

Would you like to make it easier for your visitors to register on your site?

Are you interested in the personal and professional preferences of your audience?

Installing Facebook Login on your site has several advantages. It will significantly speed up your registration process and could save you from all the trouble that forgotten passwords, misspelled email addresses, or using unreliable data sources might cause.

With this step-by-step guide, I’ll show you how to create the app that will let your visitors use their Facebook account to sign up or register at your website. I will also tell you how to ask permission from your users to access information on their profile about their demographic attributes, interests, likes, and other characteristics.

#1: Decide what kind of information will help your business

There are close to 50 different types of permissions you can ask from your visitors with Facebook Login. I’m not going to list all of them here, just show you a few that I believe could be extremely useful:

Email – By collecting your users’ email addresses with Facebook, you can avoid misspellings or obtaining that special email address that your visitor only uses for registrations. Plus, these emails are valid, working, and more importantly, will match with custom audience uploads to social ad networks, like Facebook Ads or Google AdWords.

Public profile – Accessing the public profile of a visitor will inform you about his or her name, language, age group, and gender. Among other things, you can use this information to create more effective and personal marketing messages.

User likes – Likes can tell you about the interests and preferences of your visitors. By taking them into consideration, you could provide a much better experience for your visitors.

E-commerce sites, for example, could use this permission to recommend products from brands that their visitors like, or to come up with suggestions that are based on their favorite activities.

User friends – With this permission you can find out which Facebook friends of the user registered at your site. It can both help you provide social proof and improve your recommendation engine.

And the list goes on. From musical taste to work history, you can basically ask permission from your visitors to access any kind of data on their Facebook profile. Even though it could be tempting to collect as much information as you can about your users this way, I don’t advise you to do it.

Asking for different permissions can be a double-edged sword, and each data field a company requests this way could decrease the opt-in rate by as much as 10 percent.

So first you should decide what kind of data will really make a difference for your business and only ask permission to access this information.

In my experience, if you call your visitors’ attention to the advantages of social login and clearly explain to them how their data is going to be used, they will grant you the necessary permissions.

#2: Create a Facebook App

No matter how many permissions you plan to ask from your users, you will need to build a Facebook application that can handle these requests. It’s not as complicated as it sounds, just go through the following steps:

– First, create a developer’s account on Facebook. You can do this by navigating to developers.facebook.com, and logging in with your Facebook credentials.

– After you logged in, click on “Add a New App” in the upper-right corner. In the pop-up window, provide the name of your app and choose a category that best describes your website.

– After you successfully created your app (and got past the captcha), select Facebook Login from the product setup menu.

– Then click on “Basic Settings” on the left side of your dashboard. Add a link to the privacy policy and the terms of use on your website, check your contact email, and click on “Add platforms.”

– Select the website option and add the URL of your site. Pay attention to using the correct form of the URL (for example http://mydomain.com), otherwise the integration won’t work.

– After this point, you can go ahead and publish your app. Don’t be afraid no one will find your app. You can publish it within the App Review menu under Settings.

Next step will be adding extra permissions (development and app review as well).

#3: Send your App for review

If your app asks permissions from your visitors to access any information other than email address, friends’ list, and public profile info, you’ll need an approval from Facebook before you can start using it.

In this section, I’m going to show you how to ask permissions to access user likes and give you a few tips on getting the approval from the Facebook team.

– First, navigate to the “App Review” on your dashboard and click on the “Start a Submission” button.

– Here you have to select the “user_likes” option and click “next.” In order to get access to the likes, you will have to provide a step-by-step description of the login process on your site. In Facebook’s developer’s guide, you can find everything you need to know about its requirements:

https://developers.facebook.com/docs/facebook-login/review/requirements

– You will also need to explain to Facebook what you will use the likes for. You can do this by clicking on the “Add Notes” button. Simply provide a brief description of how your app is going to work. For example in this request that Facebook accepted, I described that I’m planning to use likes for website personalization:

“We need access to a person’s list of interests and particular interests in order to create personalized experience by surfacing content related to a person’s social profile.

Using permissions will allow us to visibly change the structure of the website and prioritize content based on the user’s interests.”

Besides this description, I also sent them the URL of the site where they could see our app in action and explained how it is going to change after a visitor uses the login button.

– We also attached a video about the login process on the site. I advise you to do this, too, and explain everything that happens in your screen recording.

You should record and narrate at least the following events on your site:

– How a person logs in with Facebook.

This part should be about the placement of the login button and the way it works.

– How a person sees this permission used in your app.

Here, you’ll need to show how the permissions are used. In our video, we illustrated the way user likes could modify the content of the website after login.

Once you’re finished uploading your documents and files, press the “Save” button.

If you’d like to ask other permissions besides “user_likes” (for example, permission to access information about “relationship_status,” “education_history,” “work_history”), you will need to repeat this process.

When you explained every permission that you would like to use on your website, click on the “Submit for Review” button.

– After you submitted your app, it’ll be reviewed within a couple of days. In some rare cases, it could take longer, but within two weeks you will certainly receive an answer.

#4: Integrate the Facebook app into your website

You can trigger the Facebook Login process on your website in two ways. I’m going to show you how to integrate the official login button into your website since this is the simpler solution.

– First, navigate to https://developers.facebook.com/docs/facebook-login/web/login-button

– Here you can customize the appearance of your login button. Click on “Get Code” at the right top corner.

Once you clicked on it, you’ll be able to define the language of the button and modify its code in a pop-up window.

The page lists every modification you can make to how you button will operate. For example, if you change “auto_logout_link” to “true,” your button will allow your users to log out if they click on it for the second time.

The default setting for the login button is to ask permission from the users to collect basic information from their profile. Don’t forget to change it if you plan to ask any other permissions.

Once you’re finished customizing your button, include the JavaScript SDK from the pop-up window on your page after the opening <body> tag and place the code of the button wherever you want the plugin to appear on your page.

Make sure you change the code and add the extra scopes. If you have extra permissions for “user_likes,” “user_relationships,” “user_location,” the script should look like something like this:

function fblogin(){ FB.login(function(response) {},{ scope: ’email,user_friends,publish_actions,user_likes,user_relationships,user_location’ });

And that’s it. If you are requesting extra permissions, you’ll have to wait for the verification from the Facebook team, but otherwise, your app is ready.

There’s one more thing you’ll need to consider, though. It is the way you plan to store, access, and overview the information your users provide through Facebook Login.

If you can’t devote a larger developer team for this task but would like to take advantage of the data, and, for example, use it to create more convincing retargeting campaigns or personalize your website, I advise you to work with a third-party data provider* on these tasks. There are several great tools that can help you export and analyze the profile information of your visitors.

If you can handle this development in-house, you can access your visitors data in an export file, like Excel or CSV, provided by your developers.

Registration at RevNgo – the perfect example for Facebook Login

As I wrote earlier, calling your visitors attention to the advantages of social login and clearly explaining to them how their data is going to be used can significantly increase the number of people who register on your site with Facebook.

In the following paragraphs, I would like to show you how it looks like in practice. I’ve analyzed hundreds, if not thousands, of pages using Facebook Login. Registration at the travel site RevNGo is one of the best implementations that I’ve seen so far.

You can find its registration box on the upper right hand of the site. The incentive is simple and clear:

– Join the inner circle! You can view our secret offers! It is accessible on all your devices! Log in with Facebook!

If you move the cursor over the registration box, another explanation is going to be visible. Its main goal is to resolve misunderstandings that users might have about the process.

– Only 2 clicks. We won’t post anything on your wall. We will only use your information to fill the form.

If you click on the blue Facebook button, a pop-up will inform you that RevNGo will access your email address, friends list, current city, and public profile. Only the access to your profile is required for the registration. If you click on the edit option, you can deny access to the other data sources.

It takes about three clicks to subscribe or register at RevNGo.com. You don’t need to enter your email address or come up with a new password, or remember one that you probably use too often.

Although the site emphasizes Facebook Login, it also allows users to register with their email address. According to studies about half of the visitors prefer social logins and are willing to share personal information with the owners of sites they trust. So it could be a good idea to provide alternative solutions for the other half of your visitors.

This way you can ensure that you won’t lose any subscriptions because of the (mostly groundless) privacy concerns that some of your visitors might have.

Conclusion

The most obvious benefit of using social logins is that it speeds up the registration process. It is a well-known fact that every extra step that a visitor has to take before making a purchase or signing up reduces conversion rates. On websites that use social logins, visitors can get to the end of the line with just a few clicks.

Integrating social logins also pays off because they can help you to get to know your visitors better than you’d be able to with the more traditional solutions.

Of course, if you’d like to fully take advantage of the possibilities that Facebook Login provides, and, for example, personalize your website based on the preferences of your users, you will need to devote more time and resources for the development. But it’s worth the effort, as a deeper understanding of your visitors can help to increase your conversion rates in a meaningful way.

*Disclaimer: My company SpringTab is a third-party data provider. We help website owners personalize their content according to the Facebook likes and the personal and professional interests of their visitors.

Read more:

• Facebook Changes You Need to Know
• What the New Facebook Login Means for Your Business