Kilian Valkhof

Front-end & user experience developer, Jedi.

Full size profile picture via the Facebook JavaScript SDK

Javascript, 10 January 2011

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!

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. […] This post was mentioned on Twitter by Kilian Valkhof. Kilian Valkhof said: New Article: Full size profile picture via the Facebook JavaScript SDK – http://bit.ly/gDE5Fs […]

  2. Anonymous

    Sweet hack!

  3. […] Full size profile picture via the Facebook JavaScript SDK Salva / Condividi […]

  4. dan

    Why did you use query.wait?

  5. It’s the callback function for the query, because that takes some time.

  6. -

    Sounds interesting. I really need a picture but I don’t know much about this facebook developer thing. Could you please make a step-by-step tutorial?

  7. lev

    step by step tutorial would be amazing. i can’t even find how to download that facebook sdk thing.

  8. Nobodeh

    No, seriously, this seems really useful, many people are trying to deal with this problem and here’s the solution. This should be made more accessible to people though. I’ll also ask for step by step tutorial. Pretty please with sugar on top?

  9. mandar

    excellent,but i cant seem to store values recieved in query.wait value? how can i access the url found inside query.wait?

  10. What happens if you have the album name in another language? How would you handle that?

  11. Pankaj

    God night

  12. Get all your freiend’s profile image fullsize!

    pass the accessToken from your FB.init to the getface function

    function getface(accessToken){

    FB.api(‘/me/friends’, function (response) {

    for (id in response.data) {

    var homie=response.data[id].id

    FB.api(homie+’/albums?access_token=’+accessToken, function (aresponse) {

    for (album in aresponse.data) {

    if (aresponse.data[album].name == “Profile Pictures”) {

    FB.api(aresponse.data[album].id + “/photos?type=large”, function(aresponse) {
    console.log(aresponse.data[0].images[0].source);
    });

    }
    }

    });

    }
    });

    }

  13. Ente Facebook Analytics Part 2: Show Facebook Profile Using Javascript SDK, by Joby Joseph http://bit.ly/FRbCYl

  14. FYI: The new size options in the graph.facebook.com example are (instead of large): thumbnail, normal, and album.

  15. James

    Could this work with the PHP SDK?

  16. James

    Under my .NET app I use the JS SDK

  17. James

    No wait, the PHP SDK works great! thanks

  18. James

    To be honest, you should think about NOT capitalising the first letter of each comment….

  19. Aslam C

    . Haha james.. you are correct !……..
    @admin..
    To do so…. edit your site template .

    Find
    .comment-content p:first-letter {

    if you see any of below.. delete it. !
    ============
    font-size:xx-large;
    font-weight:bold;
    font-variant:caps-lock;
    ============

    Now Comments will look better than before :p hehe

    Please Explain your post. its difficult for beginners like me to understand.

  20. Ashok

    hi admin,
    i am using facebook api given by python. i managed to get the url of the image i want. but i am unable to download the image with that url (because of authentication). can u help me in saving the image using facebook-api of python?
    i think there will be just 1 line code to do this.