Checkpoint 2: Fetch Personal Information via Facebook Graph API

Build The Profile Layout

As usual (the previous 2 steps), let's define the layout for placing our profile information, just simply place them in any location in your "my-html-playground", remember to give them id for convenience of putting data there:

<div id="my-profile" class="row">
    <div class="col-md-3">
        <!-- Profile Picture -->
        <img id="my-profile-picture" class="img-thumbnail" src="" alt="">
    </div>
    <div class="col-md-9">
        <!-- Profile Information -->
        <dl class="dl-horizontal">
            <dt>Name</dt>
            <dd id="my-profile-name"></dd>
        </dl>
        <dl class="dl-horizontal">
            <dt>Gender</dt>
            <dd id="my-profile-gender"></dd>
        </dl>
        <dl class="dl-horizontal">
            <dt>Username</dt>
            <dd id="my-profile-username"></dd>
        </dl>
        <dl class="dl-horizontal">
            <dt>Facebook ID</dt>
            <dd id="my-profile-facebook-id"></dd>
        </dl>
    </div>
</div>

How to Fetch Data From Facebook?

The easiest method to fetch data from Facebook, is to use the Graph API, all the data on Facebook will be performed as a graph, and it's all about nodes and connections, for instance, you, your Facebook, is a node "user", and "your posts" is a connection which is connected with "post" nodes.

We're not going to learn too much with Graph API now, if you would like to know further more on Graph API, you can take a look the documentation about Graph API: Graph API Documentation.

The related part of here is to know how to access Graph API with JavaScript, for doing that, Facebook provides FB.api(path, callback) function, path will be a RESTful path string, stands for the item which you would like to access, and the second argument is the callback function, will receive one argument as the response as well.

The usage of FB.api() will be like this:

// 4 is the facebook id of Mark Zuckerberg 
FB.api("/4", function(response){
    console.log(response);
})

/*
response: 
Object {id: "4", name: "Mark Zuckerberg", first_name: "Mark",
last_name: "Zuckerberg", link: "https://www.facebook.com/zuck"…}
*/

Define a Function to Fetch Information

Why we need to defined a function instead of just using that API directly? We want to make sure this one will be called after the authentication, so we better write it into a function, and later we could call this function after the whole authentication flow is done.

So, there's not much thing to do in our function, we just need to call '/me' to fetch our personal basic information and one more time '/me/picture' for fetching our profile picture.

Remember, it need to be placed in the fbLoaded(), to make sure nothing will go wrong, it will be like this:

var fetch_my_profile = function () {

    // fetch profile
    FB.api('/me', function(response) {
        console.log("My personal information:");
        console.log(response);
    })

    // fetch profile picture
    FB.api('/me/picture', function(response) {
        console.log("My profile picture:");
        console.log(response);
    })

}

You will see two responses printed on your console, check the structure of them and we will modify these two functions for filling these data into the previous layout we defined:

var fetch_my_profile = function () {
    FB.api('/me', function(response) {
        var my_name = response.name;
        var my_gender = response.gender;
        var my_username = response.username;
        var my_facebook_id = response.id;

        $("#my-profile-name").html(my_name);
        $("#my-profile-gender").html(my_gender);
        $("#my-profile-username").html(my_username);
        $("#my-profile-facebook-id").html(my_facebook_id);
    });

    FB.api('/me/picture', function(response) {
        var my_picture_url = response.data.url;
    
        $("#my-profile-picture").attr('src', my_picture_url);
    });
};

Nice, the information has been filled into the field we defined previously, but it seems like the default profile picture is too small for us, I recall mine one on Facebook is quite bigger than this one.

Yes, it's tunable, because the path argument in FB.api() is the RESTful path, so it is a url postfix actually, we could tell the API more information, to make it responses what we want.

Check out "Modifiers" area in Documentation about Graph API /user/picture, you will see there are some options we could tell the API, let's try one of them, simply modify our /me/picture as the following code:

FB.api('/me/picture?width=250', function(response) {
    var my_picture_url = response.data.url;

    $("#my-profile-picture").attr('src', my_picture_url);
});

We defined the width should be 250px, and Facebook will give the url respect to the picture which will have width 250px, and the height will be determined automatically.

Finally, remember to put you fetch_my_profile() function call in the end of callback function of FB.Event.subscribe('auth.login', ...):

FB.Event.subscribe('auth.login', function(response) {
    ...

    fetch_my_profile();  // put it here
});

Okay, you've done your first time using Facebook Graph API, in this checkpoint, you've learned how to make your own javascript components to interact with Facebook, we will start using some Facebook predefined ones in the next checkpoint.