How to Integrate Facebook Login to Your Site

#Uncategorized

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, we’d like to show you how to create the app that will let your visitors use their Facebook account to sign up or register at your website. We will also tell you how to ask for permissions from your users, to access information on their profile about their demographic attributes, interests, likes and other characteristics.

Our guide contains instructions about installing our social analytics tool, SpringTab, along with the login app. If you would like to use only Facebook Login to simplify the registration, and you’re not interested in the additional information our tool can provide, you can, of course, skip the steps that are about the permissions or SpringTab.

But you shouldn’t. Our service is free for the first month, so if you haven’t used it before, you could just give it a try without any obligation and see if the information you can collect this way is worth the added development cost of the data export or our subscription fee.

Once you’re finished with all the steps that we described and your app is approved by Facebook, you can instantly start using it on your site.

If you registered on our site, went through the steps, and asked the required permissions, from this point, to you’ll be able to explore your visitor’s social data with SpringTab’s user-friendly interface and find out about the likes, email addresses, and other characteristics of your visitors, after logging in to your account.

So after this lengthy introduction, let’s get down to business, and see what you’ll need to do to create a Facebook app for your website that will allow you to collect the social data of your visitors.

The step-by-step integration process

kep

– First, you’ll need to create a Facebook developer account. It’s not a complicated procedure, all you need to do is to navigate to developers.facebook.com and login with your Facebook credentials.

– Now, you can create an app. Here is the fun begins! 😉

– Click on “Add a new app” and select the Basic setup option at the bottom of the pop-up panel.

– After you successfully created your app, go to the Settings menu on the left side of the admin panel.

– Here you have to select a Platform, which has to be Website, otherwise the integration won’t work.

– Set the URL exactly the same where you want to use your Facebook Login option. It will be your domain name, like http://mydomain.com.

– Now you just have to give a contact email address above the URL.

– 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 the Settings.

– If you would like to access additional information about your users and find out what their likes are, you’ll have to click on the Start Submission button.

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

– You will also need to explain to them what you will use the likes for. You can do this by clicking on the “Add Notes” button.

 

SpringTab collects information about user likes in order to find out about their preferences and provide a personalized experience. Below is one of our Notes that Facebook accepted. We used it to explain why we’d like to collect user likes for one of our client’s website:

– 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. To do this, we use a Facebook Ads setup-like admin panel where we created different target groups. When the user matches one of the groups, the site will change.

Go to domain.hu. (It’s in Hungarian.) You will see that the last slider will pop up saying “Csatlakozz hozzánk, hogy Rád szabott élményt adhassunk!”. This means, connect with us in order to get personalized experience.

Before you connect, please open the “Üzletek” menu item on another tab. (It means Stores.)

Then click on the slider having the login button (last slider item).

Once you connected (with a test user), the site refreshes.

It will arrive on different sliders since it identified the user was put in a certain category. THIS IS BASED ON LIKES AND OTHER INTERESTS of the user. This is why we need permissions.

Now, if you go to the Uzletek tab (after you are connected), you can see that the order changed. In my case, I like Starbucks, so the Starbucks icon jumped to the top of the list.

Please check the attached video if something is not showing the same way with the test user. I am not sure if he is in any target group or not.

– As you could see, we attached a video about the login process on the site. We 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, permissions 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.

– You can manage who can access your app by selecting the Roles option under the App Review menu.

– Okay, now it’s time to add a Facebook Login button.

– This is what we’ll use – https://developers.facebook.com/docs/facebook-login/web/login-button.

– Here click on the “Get Code” button. At the right top corner, you can also select the language you want to use the button with.

– Just copy this code and paste it into your website code right after the <body> tag.

### On SpringTab side

– Log in into your account at http://home.springtab.com.

home-springtab

– In the campaigns section, just create a new campaign. By clicking the small code icon next to your campaign name, you can copy the SpringTab code specific to your campaign.

– Paste this code right before the **closing** <body> tag into your website.

 

### Connecting the dots – let’s connect Facebook with SpringTab

 

– We’ll need another small piece of code for connecting what we have so far. We’re almost ready, bear with me. 🙂

 

   function fblogin(){ FB.login(function(response) {},{

       scope: ’email,user_friends,publish_actions,user_likes,user_relationships,user_location’ });

}

– This function will define the Facebook Login, which uses the following scopes: email, user friends, publish actions, user likes, user relationships, and user locations.

You can modify these scopes by simply deleting those you don’t want to use.

– Now we have to connect the Facebook Login function with the actual button we want to use the Facebook Login with. It can be any button on your website.

– Just add a simple ID tag to your button, let’s say id=“loginButton” and call this button within your script. It’s simple as this:

$(“#loginButton”).click(fblogin);

– (Since we’re using jQuery, be sure to include that into your website, but probably you’re already using it.)

– Now, your button is successfully working. Since you’re requesting extra permissions, you’ll have to wait for the verification from the Facebook team, but the pop-up window is working correctly with the SpringTab integration within.

And that’s it. We hope that we could help you to simplify the login process on your website. We’ve installed Facebook Login on countless websites, so if you have any questions concerning the integration process, don’t hesitate to ask us, we’re glad to help.

If you’re interested in a more detailed technical description about Facebook Login and its permissions, you can find our developer’s guide here.

by Péter Szántó
on Tuesday, March 14, 2017

Be the first who reads our next article!

Weekly selection of the best personalization, business intelligence and conversion optimization articles.

It's time to check your inbox! ;)

In order to continue, you have to accept our legal conditions.

If you want to sign up without facebook, you have to provide an email address.

With subscribing on our weekly newsletter you are agreeing to the Terms of Use and Privacy Policy.