Blog

Integrating Facebook Login Into Your Website

Image

To ensure that your audience and users log in through your website with your Facebook account, you can use Facebook login from your website by following these simple steps:

Let me show you the integration in simple steps:

Step #1: Setup Facebook Developer Account

Before you start, you will need a Facebook Developer Account and need to register Facebook App and create App ID. If you don’t know how to set up a Facebook Developer Account, checkout Setup Facebook Account.

Step #2: Load script and add App Id

Load JS script asynchronously to your webpage

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

Add your App Id and App Version in below code

window.fbAsyncInit = function () {
    FB.init({
        appId: {
            app - id
        },
        cookie: true,
        xfbml: true,
        version: '{app-version}'
    });


    FB.getLoginStatus(function (response) {
        statusChangeCallback(response);
    });
};

Step #3: Check Login Status

When a web page loads, the first step is to use Facebook login to check whether the user is already logged into the web page. Calling FB.getLoginStatus initiates a call to Facebook and retrieves the login status. The following uses the Facebook result to call the callback function.

function checkLoginState() {
    FB.getLoginStatus(function (response) {
        statusChangeCallback(response);
    });
}

function statusChangeCallback(response) {
    if (response.status === 'connected') {

    } else {

    }
}

Step #4: Login User

To use the Facebook login button, use the plugin configurator to customize the login button and import the code.

<fb:login-button class="fb-login-button" data-width="" data-size="large" data-button-type="continue_with" data-layout="default" data-auto-logout-link="false" data-use-continue-as="false" onlogin="checkLoginState();"> </fb:login-button>

If a user opens a web page but is not logged into Facebook or is not logged in, you can use the login dialog to request that they log in to everyone. You will be prompted to log in first and ask to log in to the following web page.

function getUserDetail() {
    FB.api('/me', {
        fields: 'id,name,email,picture'
    }, function (response) {
        console.log(JSON.stringify(response));
    });
}