Ente Facebook Analytics Part 2: Show Facebook Profile Using Javascript SDK

In the previous post we discussed about the basic layout of ente Facebook Analytics. It handled the basic html template using twitter bootstrap. Today we are going to add one more function which shows the facebook profile image and facebook profile name using facebook’s official Javascript SDK.

We have 2 placeholders in our html. One to hold the facebook profile image and one to hold facebook profile full name. There are several methods by which we can get the facebook profile image and facebook profile name.

1. By using graph api with /me connection. /me helps to retrieve the details of logged in user using graph api.
2. By using graph api with /userid connection. In our case we will be using this. Our place for facebook profile image displays the image of logged in user initially. When the user selects another friend from our created dropdown, the profile image of that friend is shown. Similarly we pick the name of friend and display it beside the photo.
3. By using FQL. FQL stands for Facebook Query Language. Like normal SQL, we can write statements which pulls certain sets of data from facebook.

Irrespective of the above methods, we need a common function inside facebook Javascript SDK to execute either the graph api or FQL.

Here is our basic html to hold the facebook profile image and facebook profile full name.

<img id="main-profile-photo" src="img/small-loading.gif" />
<a href="#" id="main-profile-name" target="_blank"></a>

Here the html code contains an image tag and an anchor tag. The image tag initially points to a loading image. We will replace the src attribute to facebook profile image url using jquery. Similarly for anchor tag, we will insert the facebook profile full name as a tag html. Also we will set the facebook profile link as href attribute for the anchor tag.

Here is the javascript portion which calls FB.api() function and gets the user details.

FB.api('/'+userid,function(response){
    $('#main-profile-name').html(response.name);
    $('#main-profile-name').attr('href',response.link);
    $('#main-profile-photo').attr('src','https://graph.facebook.com/'+response.id+'/picture');
});

Other than displaying profile info, I added some social icons to our app page, so that visitors can share it.