How to integrate your website with Facebook login button
A very important feature of any site in line with the trends of usability, is to provide the user identification options and customization features that allow greatly improve UX with details that can go just from showing his picture to customizing the interface.
Although some users still prefer old-fashioned register, using forms, most preferred to use a button and allow partial to their stored on one of their social networks basic data access.Â The use of these buttons, improves user experience, and also helps the security of our site.
Powerful platforms such as Facebook, offer the possibility to integrate your site a button to login to your users register from there. You will learn how to use it to their advantage.
Facebook has a massive user base, fortunately, offers a login buttonÂ easy to create and integrate into your application or website.
How do I use it? First you must register a request in Facebook Developers, we seek “tab My Apps “and select the” Add a New App “.
Once you start your application, go to the “Settings” section, this can see the ID of your application ; it is important to record the URL you’re using , so you make sure that it can only use your credentials from your site.
To make it even easier to use Facebook LoginÂ weÂ have prepared a client of the Facebook SDK asynchronously loading the SDK and is responsible for managing the login and get the basic information the user so you can use it on your website.
To do so simply load the code just before the label and add the HTML to where want most login button, will disappear once the user to login.
The code includes a function that displays a welcome message to the user to use, only need to assign the id to any HTML element that you want to display the message.
appId = "***"
scope = "public_profile, email"
id = "facebook-login-button">
</ Fb: login-button>
<Div id = "fbStatus"> </ div>
So you can easily integrate your application, all the basic user information will be available in a global variable named facebookUser, the contents are displayed in a message on the console when you sign.
With this you can easily check the following:
- facebookUser. id
- facebookUser. name
- facebookUser. first_name
- facebookUser. last_name
- facebookUser. link
- facebookUser. gender
- facebookUser. locale
- facebookUser. timezone
- facebookUser. updated_time
- facebookUser. verified
I invite you to client settings to your needs and share with us your ideas on a fork on Github repository.