How to Implement Facebook Social Login
The first thing you’ll need to do is create a Facebook app since an app Id is required to implement login using Facebook. You can create a facebook app by going to http://developers.facebook.com. You’ll notice in the codepen nothing is displayed since I have not added a app Id. You’ll need to remember to replace this placeholder with your own Facebook app Id once you have created your Facebook app.
Next, we’ll implement login using Facebook. All we need to do is copy and paste the code provided to us by Facebook to create the Facebook social login and replace the placeholder with your own Facebook app id. I will be explaining the same code with my customization provided in the codepen below.
Lets add the Facebook login interface. You’ll want to place this code in the body section of your html code.
Next we’ll add the function that handles the response and alters the page contents based on the type of response. I have this function located at the very top of the scripts section.
As you can see, the above function receives a response variable and checks it’s status. If it is connected it fetches the logged in users info and outputs this information in the console of your browser, that area is where you could build more onto this script to handle the data. You’ll also notice the not_authorized status. When the login is not authorized, this function changed the html on your page to ask you to log in. But how does this function get used? In this next function this is handled when someone clicked on the Facebook button on the page. Notice the onlogin=”checkLoginState(); in your body html code for the Facebook button.
Now if you save this page as index.html and open it in a browser you should see the Facebook Login button. You can use the code provided by facebook at the link listed above or you can used the codepen code that I have altered to make it a bit shorter for explanation.
Facebook Page example
Log In and look at the console output. You’ll now see some basic info including id, email, first_name, gender, last_name, link, locale, name, timezone, updated_time, verified
That is all there is to it. Of course, there are many more scopes you can use which allow you to collect more data currently this script has a scope of public_profile and email, features and API calls you can play with to create your desired app just explore the Facebook documentation to discover all these features.