How to Implement Facebook Login on Your Website using JavaScript

Want  to integrate login system to your website ?

Do you know you can easily do it with Facebook web logins?

In this article, you will find out how to use Facebook for implementing login system in your website.

Facebook login enables people to login to your website with their Facebook credentials.  Follow the following steps to create Facebook logins

1. First you'll need a Facebook App ID. Know How to create Facebook App Id

2. Then copy paste below JavaScript code.


window.fbAsyncInit = function() {

    // FB JavaScript SDK configuration and setup


      appId      : '6*******', // Your FB App ID

      cookie     : true, 

      status     : false, // enable cookies to allow the server to access the session

      xfbml      : true,  // parse social plugins on this page

      version    : 'v2.8' // use graph api version 2.8





3. Now next step is to develop Facebook login button. For that we have to create a function which will get called when user click on "signin using facebook". Below HTML code is used to display Facebook login button.

<a href="javascript:void(0);" onclick="fbLogin()" id="fbLink" class="btn btn-block indigo text-white m-b-sm">

            <i class="fa fa-facebook pull-left"></i>

            <div id="fb-root"></div>

            Sign in with Facebook



4. Now we will check responses.

For that below is the JavaScript code, when Facebook login is getting called we check responses if the response is auto response then we will try to get user data.

Now it will return following basic user details to us:

a. First Name

b. Last Name

c. Email Address

d. Gender

e. Location..etc.

This data will be the part of response which you can save it in your  database.


Also, you can use this data to verify user. For example:- If user is coming to website for the first time then can store data into database and redirect to login page. But if it is returning user then verify user details and then redirect to same login page.


Here in my case saveUserData is function to save data into my database by calling AJAX request and if my code return response as 1 then I will redirect it to home page.



// Load the JavaScript SDK asynchronously

(function(d, s, id) {

    var js, fjs = d.getElementsByTagName(s)[0];

    if (d.getElementById(id)) return;

    js = d.createElement(s); = id;

    js.src = "//";

    fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));


// Facebook login with JavaScript SDK

function fbLogin() {

    FB.login(function (response) {

        if (response.authResponse) {

            // Get and display the user profile data


        } else {

            document.getElementById('status').innerHTML = 'User cancelled login or did not fully authorize.';


    }, {scope: 'email'});



// Fetch the user profile data from facebook

function getFbUserData(){

    FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},

    function (response) {






function saveUserData(userData){

    var data = {oauth_provider:'facebook',userData: JSON.stringify(userData)};


    url: '/auth/fbloginCustomer',

    type: 'post',

    data: { 'data':data,},



    success: function (data) {


       window.location="redirect to home page or some other page";


      window.location="redirect to login page";


    error: function (jqXHR, textStatus, errorThrown)


      return false;






For Logout: Now next code we will write to make user successfully logout from the page.


Below is the code to logout user from the page. This is necessary ,for example on click of a logout button you just redirect user to login page but if you don't call below function or logout user. The User will be again logged in so basically user will never be back to login page.



// Logout from facebook

function fbLogout() {

    FB.logout(function() {






I hope this simple steps will help you integrating Facebook login to your website.

Do let us know you need any help while implementing this?




Your message has been sent. Thank you!