How to implement Facebook Login in Javascript using Facebook SDK & Graph API

You are currently viewing How to implement Facebook Login in Javascript using Facebook SDK & Graph API

Welcome folks I am back with another blog post. In this post we will be implementing How to implement Facebook Login in Javascript using Javascript SDK & Graph API from scratch. Facebook is one of the largest social networks in the world. In every modern Web Application today we see some kind of social login available for the user. So let’s start adding the functionality of Facebook Login.


First step is to create a new app in the facebook developer section. Add a new app and get the app id of it as shown below.






Just copy paste this app id and store it. We will be using it in the application.


After that make a new file index.html to hold the login button and logout button for building this application. Copy paste the code given below.



In these lines of code we have just two buttons login and logout buttons. Apart from this we have included jQuery and we have additional script file which will hold the initialization of the Javascript SDK. We have created a separate file for this in the form of init.js. Apart from that we have another custom script.js file in which we will write the business logic of the application.


Make a new file init.js and copy paste the below code into it. In this code we are initializing the Javascript SDK for the application. Just below copy paste your app id which you generated earlier.



After this just create the custom script file script.js. In this file we will writing the custom business logic of the application. Copy paste the code serial wise as described below.



In these lines of code we are attaching a click event listener to the login button that we have in index.html. After clicking the login button we are calling a custom function facebookLogin which is described below.



In this function we are calling a Facebook SDK standard function i.e. statusChangeCallback function which takes the response and updates the UI according to the status of the Login of the user. If the user is logged in then it will show user information otherwise it will show the Login button to the user. This basically acts as a inspector who watches the current state of the user whether he is logged in or not.



In this function we are checking the response which is coming to the function and we are checking a certain property which is present in the response which is status. If the status of the response is equal to connected that means the user is logged in then we can hide the login button and show the logout button to the user. And also show the user profile to the user. Otherwise we will call the custom function which prompts the user with a Login screen allowing the user to log in.



In this function we are first of all presenting the user with the Login in window and after the user successfully logs in we are again calling the inspector i.e. statusChangedCallback function passing the actual response object. Thereby informing the status of the user which is logged in.



In this function we are just fetching the user profile with the response object. We are just calling the api and getting the details in the the form of name, email, birthday and presenting the details in the h1,h2 and h3 tags respectively.



Lastly we are setting the onClick listener for the logout button as we did before for the login button. As soon as the user clicks the button we are successfully calling the facebookLogout funtion which will logout the user from Facebook. And also we are hiding the logout button and also showing the login button back to the user.



Lastly in the logout function first of all we are calling the standard function of logout of the SDK. After that we are calling the function i.e. statusChangeCallback which will inform about the status of the user.


The entire code of the script.js is given as follows so please copy paste the entire code shown below.


Leave a Reply