Facebook login for your website

In this article we will see how we can implement Facebook login for your web application. We will use the JavaScript SDK but Facebook has more than one SDKs available for your language of choice.

The article consists of two parts. The first part we will be the implementation of the login process while the second part will about getting the required credentials.

The code in the first snippet is everything required to enable the Facebook API in your page. Notice that you need a Facebook App ID, we will also see how you can create one.

window.fbAsyncInit = function () {
    FB.init({
        appId: '<Facebook App ID>',
        cookie: true,
        xfbml: true,
        version: 'v3.1'
    });
};
 
// Load the SDK asynchronously
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

The code in the second snippet is showing you can use the API. The fbLogin() function will be called when your user will click on the Login with Facebook button. The scope defines what information will be returned to you and the fbLoginCallback() function will process the response.

Depending on what information you are asking, Facebook will notify the user about it. There are cases where the user can decline sharing this information. In that case the response from Facebook will contain empty values on the declined info

function fbLogin() {
    FB.login(fbLoginCallback, { scope: 'public_profile,email,user_friends' });
}

In this code block we see how we can process the response from Facebook. All required information is saved in a local variable. The friends list (not all friends, just the ones that have also used your application) is also saved in an array. You will notice an AJAX call in the while() {...} loop. By default, the initial response will contain the first 25 friends of your user. So you need to get 25 from the response.paging.next URL and so on.

var fbLoginCallback = function (response) {
    var friends = [];
 
    if (response.status === 'connected') {
        FB.api('/me', function (response) {
            var userFullName = response.name;
            var userEmail = response.email;
            var userFacebookID = response.id;
        });
        FB.api('/me/picture?type=large&redirect=0', function (response) {
            var userAvatarUrl = response.data.url;
        });
        FB.api('/me/friends', function (response) {
            while(response.data.length > 0)
            {
                var i =0;
                for(i = 0; i<response.data.length; i++)
                {
                    var friend = {};
                    friend.id = response.data[i].id;
                    friend.type = 'fb';
                    friend.name = response.data[i].name;
                    friend.image = 'https://graph.facebook.com/' + friend.id + '/picture?type=large';
                    friend.url = 'https://www.facebook.com/app_scoped_user_id/' + friend.id + '/';
 
                    friends.push(friend);
                }
 
                jQuery.ajax({
                    url: response.paging.next,
                    async: false,
                    success: function(data) {
                        response = data;
                    }
                });
            }
        });        
    }
}

Update: With API v3.0 the /me/picture?type=large stopped working and gave me an invalid JSON error message. Turns out it needs to be updated with the parameter redirect=0.

To get a Facebook App ID you will go to Facebook Developers. At the top menu, go My Apps -> Add a New App. In the modal that appears choose Website. In your newly created App go to Dashboard and there you will see your App ID and App Secret. The App ID is the one we need for this example.

A limitation that I didn’t find a way to overcome is that I could not make this code work from my localhost. This code runs only from the domain you have set when creating your application.