getting facebook thumbnail profile picture

Question

Does anyone know how I can get a thumbnail/avatar of a facebook user using the javascript sdk?

I know to get the full size picture I can do the folllowing:

//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;

      });
    }
  }
});

Not sure on how to get the thumbnail/avatar size. Something like a 50x50 size

Solution 1

You can also just use an <img> tag with a special URL to do the same thing:

<img src="http://graph.facebook.com/<UID>/picture?type=square" />

Solution 2

As of August 2012, you can define custom dimensions for the user thumbnail, e.g. https://graph.facebook.com/USER_ID/picture?width=WIDTH&height=HEIGHT. Find out more, https://developers.facebook.com/docs/reference/api/using-pictures/.

Solution 3

I did the following to accomplish the same thing:

FB.api(
      {
       method: 'fql.query',
       query: 'SELECT name,email,pic_small FROM user WHERE uid=' + uid
       // uid is the id of the user.
      },
      function(response) {
         var user = response[0];
         // user.pic_small contains the url for the small sized profile pic
      });

Comments

[dwarfy]

good answer ... I'm using it often ... Just a little precision from Facebook doc : (use ?type=small | normal | large to request a different photo)

[Jimmy Sawczuk]

I believe it's square, large or small. (developers.facebook.com/docs/reference/api, under Reading -> Pictures.)

[dwarfy]

I don't know, I copy-pasted from the doc ... which is known to be always acurate (NOT)

[Volcanic]

This only works if you are requesting the picture for a 'user'. If you need to get the avatar for a page you'll need to try something else. (still in search of the solution!)

[Jimmy Sawczuk]

@Volcanic no, this should work for pages too. Some pages that are age-gated (like alcohol-related pages) require an access token passed as a GET parameter.

[Admin]

Update (July 2014): FQL is deprecated and won't be supported beyond Version 2.0 of the Facebook Platform API (documentation).

[Admin]

Potential gotcha: this technique doesn't work for published pages, even if you're logged in with an administrator account. The graph URL simply redirects you to a placeholder image instead: fbstatic-a.akamaihd.net/rsrc.php/v2/y6/r/_xS7LcbxKS4.gif

[Jimmy Sawczuk]

@Alhadis: depends on the page. If it's age- or country- gated, you're right, like graph.facebook.com/Budweiser/picture. Pages that aren't gated work fine, like graph.facebook.com/starbucks/picture.

[Admin]

... FFS, I meant "UNPUBLISHED pages"... how could I have not picked up on that typo? :( Ugh, somebody pass me the "Edit comment" button. fumbles around for it