How can I display the users profile pic using the facebook graph api?

Question

I would like to display the users profile picture inside of my applications canvas page, is there a way to do that using the graph api?

I know I can do it using FBML but I would also like to pass the profile pic to a flash game I am making, so I would have to get the profile pic from the api and send it as a variable, here is the code I have thus far,

$facebook = new Facebook(array(
    'appId'  => FACEBOOK_APP_ID,
    'secret' => FACEBOOK_SECRET_KEY,
    'cookie' => true,
    'domain' => 'myurl/facebook-test'
));

$session = $facebook->getSession();

        $uid = $facebook->getUser();
        $me = $facebook->api('/me');

        $updated = date("l, F j, Y", strtotime($me['updated_time']));

        echo "Hello " . $me['name'] . $me['picture'] . "<br />";
  echo "<div style=\"background:url(images/bg.jpg); width:760px; height:630px;\">" . "You last updated your profile on " . $updated . "</div>" . "<br /> your uid is" . $uid;

$me['picture'] does not seem to be working, but I am still very new to the graph api, and I am probably making a few very amateur mistakes!

score 125 · Accepted Answer · edited Dec 14 '15 at 12:31

125

Knowing the user id the URL for their profile picture is:-

http://graph.facebook.com/[UID]/picture

where in place of [UID] you place your $uid variable, and that URL can be passed to flash

edited Dec 14 '15 at 12:31

Abhinav singh

1,448
1
14
31

answered Jun 10 '10 at 09:00

hndcrftd

3,180
1
21
18

2

Now it seems to return a redirect (302) response, but if you follow that you will get the right image. Also you can ?redirect=false to the url to get a JSON response which contains the final URL to the picture. – Gnomet Mar 28 '14 at 11:12
hello any one is having idea? why the response is coming null while it is called from android device? I was using this only in my application but now image is not coming using this method. – BSKANIA Jun 06 '14 at 05:18
Still works! Make sure you use `https` instead of `http`, if you're using `Picasso`. – xyz Jun 22 '15 at 11:21
Obsoleted. OAuth is required for now. – Yuki Matsukura Aug 16 '15 at 06:10
Is there any way to find large size profile pictures? – Oct 29 '15 at 14:23

score 81 · Answer 2 · answered Aug 13 '10 at 08:37

81

to get different sizes, you can use the type parameter:

You can specify the picture size you want with the type argument, which should be one of square (50x50), small (50 pixels wide, variable height), and large (about 200 pixels wide, variable height): http://graph.facebook.com/squall3d/picture?type=large.

answered Aug 13 '10 at 08:37

squall3d

1,737
14
12

Thank you! I couldn't seem to find this anywhere, but i knew it was possible! – Doug Molineux Feb 24 '11 at 02:37
2

What's even better is that width/height params works too eg: width=140&height=140 – Deepak Thomas Dec 13 '12 at 11:26

Deepak Thomas · Answer 3 · 2019-01-10T14:32:57.877

22

You can also resize the profile picture by providing parameters as shown below.

https://graph.facebook.com/[UID]/picture?width=140&height=140

would work too.

edited Jan 10 '19 at 14:32

answered Sep 10 '12 at 15:25

Deepak Thomas

3,355
4
37
39

The FB documentation https://developers.facebook.com/docs/graph-api/reference/v2.1/user/picture says `When height and width are both used, the image will be scaled as close to the dimensions as possible and then cropped down.`, does it mean they will return some predefined size 123x123 when I am asking for 150x150? – Dimitry K Sep 17 '14 at 11:32
1

Actually found answer myself: when asking for `/picture?width=450x450` I am redirected to image: `https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/c120.0.480.480/p480x480/10525666_10154418313275648_598202092662269872_n.jpg?somequerystring` which is a `480x480` image. And when I am asking for `/picture?width=300&height=300` I get redirected to `https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/c80.0.320.320/p320x320/10525666_10154418313275648_598202092662269872_n.jpg` which is `320x320` image. So you're right about predefined sizes. – Dimitry K Sep 17 '14 at 11:43

score 7 · Answer 4 · answered May 12 '11 at 08:53

7

  //create the url
  $profile_pic =  "http://graph.facebook.com/".$uid."/picture";

 //echo the image out
 echo "<img src=\"" . $profile_pic . "\" />";

Works fine for me

answered May 12 '11 at 08:53

Kannan Prasad

1,796
22
27

sidonaldson · Answer 5 · 2015-11-03T14:49:22.140

4

EDIT: So facebook has changed it again! No more searching by username - have amended the answer below...

https://graph.facebook.com/{{UID}}/picture?redirect=false&height=200&width=200

UID = the profile or page id
redirect either returns json (false) or redirects to the image (true)
height and width is the crop
does not require authentication

e.g. https://graph.facebook.com/4/picture?redirect=false&height=200&width=200

Facebook Graph picture doc

edited Nov 03 '15 at 14:49

answered Feb 04 '15 at 16:07

sidonaldson

24,431
10
56
61

1

This is no longer valid (#803) Cannot query users by their username (zuck) – Roni Aug 11 '15 at 21:15
1

@Roni But you still can query by UID. It works for me with UID. – RredCat Nov 02 '15 at 23:18
1

@RredCat I didn't say anything about UID, just the username - the UID query will probably work for a very long time – Roni Nov 02 '15 at 23:37
`http://graph.facebook.com/[UID]/picture` works! Is there an upper limit to the number of times I can issue this API call? – Darshan Chaudhary Apr 05 '16 at 19:27

score 3 · Answer 6 · answered Jun 10 '10 at 10:17

Here is the code that worked for me!

Assuming that you have a valid session going,

//Get the current users id
$uid = $facebook->getUser();

//create the url
$profile_pic =  "http://graph.facebook.com/".$uid."/picture";

//echo the image out
echo "<img src=\"" . $profile_pic . "\" />";

Thanx goes to Raine, you da man!

score 1 · Answer 7 · answered Oct 27 '12 at 09:48

One very important thing is that like other Graph API request, you won't get the JSON data in response, rather the call returns a HTTP REDIRECT to the URL of the profile pic. So, if you want to fetch the URL, you either need to read the response HTTP header or you can use FQLs.

score 1 · Answer 8 · answered Aug 17 '11 at 22:15

1

I was having a problem fetching profile photos while using CURL. I thought for a while there was something wrong my implementation of the Facebook API, but I need to add a bit to my CURL called:

curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);

answered Aug 17 '11 at 22:15

adjwilli

9,658
4
35
29

score -1 · Answer 9 · answered Jul 17 '19 at 03:09

The returned data is the binary data of the image type. If you use JavaScript to retrieve the user photo, please get the photo data as blob type in a XMLHttpRequest, and then retrieve the blob URL from the response. For your reference:

 var request = new XMLHttpRequest;
 var photoUri=config.endpoints.graphApiUri + "/v1.0/me/photo/$value";
 request.open("GET",photoUri);
 request.setRequestHeader("Authorization","Bearer "+token);
 request.responseType = "blob";
 request.onload = function (){
        if(request.readyState == 4 && request.status == 200){
               var image = document.createElement("img");
               var url = window.URL || window.webkitURL;
               var blobUrl = url.createObjectURL(request.response);
               image.src = blobUrl;
               document.getElementById("UserShow").appendChild(image);
        }
 };
 request.send(null);

How can I display the users profile pic using the facebook graph api?

9 Answers9

Linked