How to Add Facebook Login Button on a Website

0 0
Read Time:7 Minute, 54 Second

Would you like to have more information about the people who log into your website?

You might be thinking of a way to effectively target the website visitors on Facebook.

We have a solution, just let your visitors log into your website with their Facebook account, from which you can collect all the relevant information you want like demographic attributes and other characteristics.

In this article, you’ll discover how to add Facebook Login Button on a website.

1. Decide What Data You Need

Allow website visitors to register with Facebook Login.

From Interests to Work history, there are around 50 different types of permissions you can request from your coming visitors with just a single Facebook login.

Though it can be tempting to accumulate as much information as possible from visitors’ Facebook profiles, requesting too many permissions is a double-edged sword. It is very likely to decrease the opt-in rate.

So, ask for only that data which will be most helpful to your business instead of asking for unnecessary permissions to access un-useful data. Here are some permissions that you are useful for every kind of business:

Email

If you collect visitors’ email addresses with Facebook, you can avoid misspellings or obtaining that special email address people use only for registrations. Plus, you’ll collect valid, working emails that will match with custom audience uploads to social ad networks, like Facebook Ads or Google AdWords.

Public Profile

If you have the access to visitors’ public profiles, you can collect visitors’ names, information about the language they speak, their age, and gender. The juiciest thing, you can create a more visitor specific and more effective marketing messages.

User Likes

With access to visitors’ likes, you can completely learn about his/her personality traits such as interests and preferences which allows you to provide a much better user experience for them. For instance, if you’re an eCommerce site, you could use this information to recommend products your visitors would like or offer suggestions based on their favorite activities.

User Friends

Having this permission with you, you can easily find out the visitors’ Facebook Friends who had or hadn’t registered at your website. This will help provide social proof and improve your recommendation engine.

Tip: If you can clearly explain the advantages of using social login and how their data will be used, they will be more likely to grant you the necessary permissions.

Related: 5 Easiest Programming Languages To Learn For First-Time Coders in 2019

2. Set Up Your Login App

After a lot of thinking, you might have decided which all of the permission you are going to request from your visitors. Now, you will need to build a Facebook application that is going to handle all of this for you. Fortunately, it’s not as complicated as it might sound.

To start your app engine, you will be going to need a developer’s account on Facebook. To do this, go to developers.facebook.com and log in with your Facebook credentials. Then automatically, you are redirected to your very first own app.

Click Create App after logging into your Facebook developers account.

In the pop-up window, type in a name for your app along with your email address and choose the category that best describes your website.

Fill in the details for your new Facebook app.

After you’ve successfully created your app (and gotten past the captcha), click the Get Started button for Facebook Login.

Next click Settings > Basic in the left sidebar.

Go to Settings > Basic in your Facebook developers dashboard

Then add a link to the privacy policy and the terms of use on your website, and check your contact email.

Add a link to your website privacy policy and terms of use


Click on +Add Platform
and select the Website option.

Select Website as your Facebook app platform

Add the URL of your site. Make sure you use the correct form of the URL (for example, https://mydomain.com); otherwise, the integration won’t work.

Add the URL for your website

At this point, you can go ahead and publish your app. Don’t be concerned that no one will find your app at this point. You can publish it in the App Review menu (under Settings).

3. Submit the Login App for Review

The last step: Now, we are going to add extra permissions.

In case, your nicely developed app asks for permission to access information other than an email address, friend list, and public profile info from your website visitors, you are going to need approval from Facebook first, after that you can be using the app.

Here is how you are going to ask permission to access user likes. First, navigate to App Review on your dashboard and click Start a Submission.

Under App Review, click Start a Submission

Scroll down and select the user_likes option and click Add 1 Item.

Select which items you want to include in your Facebook app submission

To get access to the likes, you’ll need to provide a step-by-step description of the login process on your website. Facebook’s Developers Guide details everything you need to know about its requirements.

You’ll also need to explain what you’ll use the likes for. To do this, click the Edit Notes link.

Select which items you want to include in your Facebook app submission

Now provide a short description of how your app works.

Click Edit Notes under Current Submission

For example, here’s one way you might explain how you’ll use likes for website personalization:

We need access to a person’s list of interests to create a 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.

In addition to this description, you could provide the URL of the website to show your app in action and explain how it will change after visitors use the Login button. You can also attach a video about the login process on your site. In your video, record and narrate at least the following events on your site:

  • How a person logs in with Facebook. Explain the placement of the Login button and how it works.
  • How a person sees this permission inside your app. For example, illustrate how user likes could modify the content of the website after login.
Explain how you’ll use the Facebook likes data you collect

After uploading your documents and files, Click Save

If you are thinking of asking for other permissions in addition to user_likes (such as info about relationship_status, education_history, or work_history), repeat the above step.

Once you are done explaining every permission you asked for on your website, click Submit for Review. Your app will be reviewed within a couple of days. It’s very rare for it to take longer but no more than two weeks.

Related: Java Tutorial: Best Five Tutorials to Master Java Programming Language in 2018

4. Integrate the Login App on Your Website

There are two ways to trigger the Facebook login process on your website. We will teach you, how to integrate the official Login button into your website because it’s very easy.

Go to https://developers.facebook.com/docs/facebook-login/web/login-button. Here you have the freedom to customize the look of your Login button. You can define the language of the button and modify its code.

Customize your Facebook Login button

The page notes every modification you make to your Login button’s operations. For example, if you re-edit auto_logout_link to True, your Login button will allow users to log out if they click on the Login button a second time.

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

When you’re finished customizing your button, copy the JavaScript SDK. Then after the opening body tag on your webpage, place the button code wherever you want the plugin to appear on your page.

Review the list of modifications you can make to the Facebook Login button

Make sure you re-write the code and add some extra scopes. If you have extra permissions for user_likes, user_relationships, and user_location, for example, the code should look 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’re requesting extra permissions, you’ll have to wait for verification from the Facebook team; otherwise, your application is ready.

One of the most important things to consider is how you plan to store, access, and use the information your users provide through Facebook Login.

If you can’t spend on a large developer team for this task but want to take complete advantage of the data (for instance, by using it to create more convincing retargeting campaigns or personalize your website), consider working with a third-party data provider. There are several great tools that can help you export and analyze the profile information of your visitors.

If you can control this development division in-house, you can access your visitors’ data in .xls or .cvs file exported by your developers.

CONCLUSION

The advantage of utilizing logins is that the registration procedure accelerates. Each step that people need to consider prior to registering or making a purchase reduces conversion prices. On sites that use logins that are societal, visitors can undergo the procedure with only a couple of clicks.

Social logins help you get to know your customers if you moved with solutions.

Obviously, when you would like to have the whole benefit of Facebook Login (like personalizing your site depending on the tastes of your customers ), then you will want to devote more resources and time for development. Nonetheless, it’s well worth the effort since a deeper comprehension of your customers can help boost your conversion prices.

Happy
Happy
100 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Default image
Escale Solutions
Articles: 61

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published. Required fields are marked *