[facebook] Get user profile picture by Id

I'm now working on a web application which is mostly based of facebook graph api. I hold some data about users - actually , the possible public data available - such as name and id. I also know that a profile picture is a part of the public data, and I wondered how I'll be able to get a direct link to a profile picture of a user only by using his id?

Thanks in advance

UPDATE September 2020

Facebook has new requirements change: an access token will be required for all UID-based queries

So you have to add your app access token to the url:

https://graph.facebook.com/{profile_id}/picture?type=large&access_token={app_access_token}

To get your app_access_token use the following url:

https://graph.facebook.com/oauth/access_token?client_id={your-app-id}&client_secret={your-app-secret}&grant_type=client_credentials

You find your-app-id and your-app-secret in the Basic Settings of your Facebook app in Facebook developers

today I found a problem, the profile images was returning the default profile picture because a new requirement from Facebook to all the UID based queries, so just add &access_token=[apptoken] to the url, you can obtain your app token from here

you can get it with using this url : you will get the picture HD (max size)

https://graph.facebook.com/{userID}?fields=picture.width(720).height(720)&redirect=false

don't forget redirect=false or it will return an error

Use url as:https://graph.facebook.com/user_id/picture?type=square in src of img tag. type may be small,large.

You can use following urls to obtain different sizes of profile images. Please make sure to add Facebook id to url.

Large size photo https://graph.facebook.com/{facebookId}/picture?type=large

Medium size photo https://graph.facebook.com/{facebookId}/picture?type=normal

Small size photo https://graph.facebook.com/{facebookId}/picture?type=small

Square photo https://graph.facebook.com/{facebookId}/picture?type=square

As per the current latest Facebook API version 3.2, For users you can use this generic method for getting profile picture is https://graph.facebook.com/v3.2/{user-id}/picture?type=square you can visit documentation for user picture here. The possible values for type parameter in URL can be small, normal, album, large, square

For Groups and Pages, the profile picture is not available directly. You have to get them using access token. For Groups you have to use User Access Token and for Pages you can use both User Access Token and Page Access Token.

You can get Group's or Page's Profile Picture using the generic URL: https://graph.facebook.com/v3.2/{user-id}/picture?access_token={access-token}&type=square

I hope this is helpful for people who are looking for Page or Group Profile picture.

This will be helpful link:

http://graph.facebook.com/893914824028397/picture?type=large&redirect=true&width=500&height=500

You can set height and width as you needed

893914824028397 is facebookid

From the Graph API documentation.

• /OBJECT_ID/picture returns a redirect to the object's picture (in this case the users)
• /OBJECT_ID/?fields=picture returns the picture's URL

Examples:

<img src="https://graph.facebook.com/4/picture"/> uses a HTTP 301 redirect to Zuck's profile picture

https://graph.facebook.com/4?fields=picture returns the URL itself

You can use the following endpoint to get the image.jfif instead of jpg:

https://graph.facebook.com/v3.2/{user-id}/picture

Note that you won't be able to see the image, only download it.

Here, this api allows you to get fb, google and twitter profile pics easily

https://www.avatars.io/

It's an API that returns the profile image when given a username for a variety of social networks including Twitter, Facebook, Instagram, and gravatar. It has libraries for iOS, Android, Ruby, Node, PHP, Python, and JavaScript.

Simply Follow as below URL

https://graph.facebook.com/facebook_user_id/picture?type=square

type may be normal,small,medium,large. Or square (f you want to get square picture, the square size is limited to 50x50).

Through the Javascript SDK (v2.12 - April, 2017) you can get the details of the picture request this way:

FB.api("/" + uid + "/picture?redirect=0", function (response) {
  console.log(response);

  // prints the following:
  //data: {
  //  height: 50
  //  is_silhouette: false
  //  url: "https://lookaside.facebook.com/platform/profilepic/?asid=…&height=50&width=50&ext=…&hash…"
  //  width: 50
  //}

  if (response && !response.error) {
    // change the src attribute of img elements
    [...document.getElementsByClassName('fb-user-img')].forEach(
      i => i.src = response.data.url
    );

    // OR redirect to the URL above
    location.assign(response.data.url);
  }
});

For getting the JSON response the parameter redirect with 0 (zero) as value is important since the request redirects to the image by default. You may still add other parameters in the same URL. Examples:

• "/" + uid + "/picture?redirect=0&width=100&height=100": a 100x100 image will be returned;
• "/" + uid + "/picture?redirect=0&type=large": a 200x200 image is returned. Other possible type values include: small, normal, album, and square.

To get largest size of the image

https://graph.facebook.com/{userID}?fields=picture.width(720).height(720) 

or anything else you need as size. Based on experience, type=large is not the largest result you can obtain.

You can use AngularJs for this, Its two -way data binding feature will get solution with minimum effort and less code.

<div> <input type="text" name="" ng-model="fbid"><br/> <img src="https://graph.facebook.com/{{fbid}}/picture?type=normal"> </div>

I hope this answers your query.Note: You can use other library as well.