Full size profile picture via the Facebook JavaScript SDK

Javascript, 10 January 2011, 20 comments

While working on a soon-to-be-released website, I needed the full-size profile picture of a Facebook user. Facebook has a shortcut for getting someone’s profile picture, but the largest image you can get is just 200 pixels wide which is not enough for my application. This is a quick article explaining how to get the full size image, as I wasn’t able to find it elsewhere.

Getting the profile picture the normal way

Getting via the normal way is quite easy, it’s this link:

http://graph.facebook.com/<user.id>/picture?type=large

If you’re happy with a 200px wide image, you’re best off using this link.

Impossible?

All questions I found regarding getting a full size profile picture ended in “it can’t be done”. But I’m a stubborn guy, so I asked about it again on the Facebook developer forums and then went to work with the (horribly underdocumented) Facebook JavaScript SDK. I got it working and a couple of days later someone posted an FQL method as a reply to my forum thread. Both methods take two API calls, so it’s a matter of preference which one you want to use. I’m posting them both.

Assumptions

The following scripts assume a couple of things:

Graph API method

The following Graph API method works by doing two API calls: The first requests all the user albums and gets the ID of the album with the name “Profile pictures”, the second gets the first image from that album. Conveniently, the current profile picture is always the first in the returned list.

//Get a list of all the albums
FB.api('/me/albums', function (response) {
  for (album in response.data) {

    // Find the Profile Picture album
    if (response.data[album].name == "Profile Pictures") {

      // Get a list of all photos in that album.
      FB.api(response.data[album].id + "/photos", function(response) {

        //The image link
        image = response.data[0].images[0].source;

      });
    }
  }
});

FQL method

The FQL method also requires two api calls: one to get the user id, and a second FQL query for that user’s profile picture. You could lower this to one API call if you store the user id sometime earlier.

//get the current user id
FB.api('/me', function (response) {

  // the FQL query: Get the link of the image, that is the first in the album "Profile pictures" of this user.
  var query = FB.Data.query('select src_big from photo where pid in (select cover_pid from album where owner={0} and name="Profile Pictures")', response.id);
  query.wait(function (rows) {

    //the image link
    image = rows[0].src_big;
  });
});

There you go!

A full size Facebook profile picture, free for you to do all sorts of cool stuff with. Let me know if you build a cool Facebook app and have been able to use this!