User Profile, Picture, and Feed

Learn how to view user profiles, profile pictures, and user feeds using the Facebook Graph API.

We'll cover the following

Fetch the user's profile

User profile
User profile

A user’s profile on Facebook is a place for users to present themselves to the world and connect with others on the platform. It is a personal space where users can share information about themselves, their interests, and their activities. A user’s profile typically includes their name, profile picture, cover photo, and personal information like work history, education history, marital status, and location. Users can customize their profile by adding or editing this information, and they can also choose who can see their profile and what information is visible to others.

Viewing a user's profile is part of every user-based platform and is essential for providing a good user experience. The base URL for the endpoint is:

https://graph.facebook.com/v16.0/me

If we have the user_id of the person, we can also use the following endpoint to access the user's profile:

https://graph.facebook.com/v16.0/{user_id}

Request Parameters

Parameter

Type

Category

Description

access_token

String

Mandatory

This is the token that we received after app authentication and authorization.

user_id

String

Mandatory

This is the ID of the user. Note that this is a path parameter.

fields

String

Optional

These are the fields we want in the response from the API call.

After getting the user access token, we can use the Graph API endpoint to fetch the user's profile who authorized our app by approving the public_profile permission during the authorization step. The code below calls the endpoint above. Click the “Run” button to see the response.

Press + to interact
// Importing libraries here
import fetch from "node-fetch"
// Define endpoint URL here
const endpointUrl = new URL("https://graph.facebook.com/v16.0/me");
const headerParameters = {
    contentType: "application/json",
};
// Setting API call options
const options = {
    method: "GET",
    headers: headerParameters,
};
// Define Query Parameters here
const queryParameters = new URLSearchParams({
    access_token: '{{USER_ACCESS_TOKEN}}',
    fields: 'id,name,email,age_range,birthday,gender'
});
// Function to make API call
async function fetchUserProfile() {
    try {
        endpointUrl.search = queryParameters;
        const response = await fetch(endpointUrl, options);
        // Printing response
        printResponse(response);
    } catch (error) {
        // Printing error message
        printError(error);
    }
}
// Calling function to make API call
fetchUserProfile();

In the code widget above:

  • Line 5: We define the endpoint URL in the endpointUrl variable. We use the /me endpoint in the code above to fetch the user's profile.

  • Lines 18–21: We add the access_token and the fields we want in the response from the API call in the queryParameters variable. We specify the id, name, email, age_range, birthday, and gender in the field parameter.

  • Line 27: We use the fetch function to make the API call.

Response Fields

Name

Type

Description

id

String

This is the user's ID, which is unique to the app.

name

String

This is the user's full name.

email

String

This is the user's primary email address.

age_range

String

This is the user's age segment.

gender

String

This is the user's gender, such as male, female, or custom.

birthday

String

This is the user's birthday.

Note: Replace /me with the id that we received in the response and click the “Run” button. Notice that the output is exactly the same as we received before.

User's profile picture

A user's profile picture is a vital part of their identity on Facebook, and it is a way for them to present themselves and connect with others on the platform. A user's profile picture on Facebook is an image that represents the user on the forum. The user can choose a profile picture that reflects their personality, interests, or identity. Some people use a photo of themselves, while others use a graphic or illustration. Once we have an access token, we can use it to make a GET request to the Graph API to retrieve the user's profile. The base URL for this endpoint is:

https://graph.facebook.com/v16.0/{user_id}/picture

Request Parameters

Parameter

Type

Category

Description

access_token

String

Mandatory

This is the token that we received after app authentication and authorization.

user_id

String

Mandatory

This is the ID of the user. Note that this is a path parameter.

height

Integer

Optional

This is the picture's height in pixels.

width

Integer

Optional

This is the picture's width in pixels.

redirect

Boolean

Optional

If redirect=0, then it returns a JSON that describes the image. If redirect=true, then it returns a picture.

type

String

Optional

This is the size of the picture we need in response. Possible values are: small, normal, large, and square.

The code below retrieves the JSON for the user's profile picture. Click the “Run” button to see the response.

Press + to interact
// Importing libraries here
import fetch from "node-fetch"
// Define endpoint URL here
const endpointUrl = new URL("https://graph.facebook.com/v16.0/{{USER_ID}}/picture");
const headerParameters = {
    contentType: "application/json",
};
// Setting API call options
const options = {
    method: "GET",
    headers: headerParameters,
};
// Define Query Parameters here
const queryParameters = new URLSearchParams({
    access_token: '{{USER_ACCESS_TOKEN}}',
    redirect: 0,
    type: 'normal',
});
// Function to make API call
async function fetchProfilePicture() {
    try {
        endpointUrl.search = queryParameters;
        const response = await fetch(endpointUrl, options);
        // Printing response
        printResponse(response);
    } catch (error) {
        // Printing error message
        printError(error);
    }
}
// Calling function to make API call
fetchProfilePicture();

In the code widget above:

  • Line 5: We embed the user’s ID to the endpoint URL in the endpointUrl variable.

  • Lines 18–22: We add the access_token, set redirect to 0, and set type to normal in the queryParameters variable.

  • Line 28: We use the fetch function to make the API call.

Response Fields

Name

Type

Description

id

String

This is the profile picture's ID.

is_silhouette

Boolean

This is a boolean value, which indicates whether the profile picture is a silhouette (a default image) or a custom uploaded image.

url

String

This specifies the URL of the profile picture.

width

Integer

This is the picture's width in pixels.

height

Integer

This is the picture's height in pixels.

Viewing the user's feed

The Facebook user feed is a stream of updates, posts, and other content shared by the user and their friends. It is a central part of the Facebook experience because it allows us to keep up with the latest happenings in our social network and engage with our friends and loved ones. In the Facebook Graph API, feed refers to the stream of updates and posts generated by a user's friends and the pages they follow. It is a collection of all the content shared with the user and is displayed on the user's home page on Facebook. The base URL for the above endpoint is:

https://graph.facebook.com/v16.0/{user_id}/feed

Request Parameters

Parameter

Type

Category

Description

access_token

String

Mandatory

This is the token that we received after app authentication and authorization.

user_id

String

Mandatory

This is the ID of the user. Note that this is a path parameter.

fields

String

Optional

These are the fields we want in the response from the API call.

limit

String

Optional

This specifies the maximum number of results we want in the response.

To access a user's feed using the Facebook Graph API, we have to make a GET request to the feed edge with the user's ID and an access token with user_posts permission. The code below calls the endpoint above. Click the “Run” button to see the response.

Press + to interact
// Importing libraries here
import fetch from "node-fetch"
// Define endpoint URL here
const endpointUrl = new URL("https://graph.facebook.com/v16.0/{{USER_ID}}/feed");
const headerParameters = {
    contentType: "application/json",
};
// Setting API call options
const options = {
    method: "GET",
    headers: headerParameters,
};
// Define Query Parameters here
const queryParameters = new URLSearchParams({
    access_token: '{{USER_ACCESS_TOKEN}}',
    fields: 'message,full_picture,link,created_time,privacy',
    limit: '10'
});
// Function to make API call
async function fetchUserFeed() {
    try {
        endpointUrl.search = queryParameters;
        const response = await fetch(endpointUrl, options);
        // Printing response
        printResponse(response);
    } catch (error) {
        // Printing error message
        printError(error);
    }
}
// Calling function to make API call
fetchUserFeed();

In the code widget above:

  • Line 5: We define the endpoint URL in the endpointUrl variable.

  • Lines 18–22: We add the access_token, set the limit to 10 to specify the maximum number of results to return in response, and specify the fields we want in the response from the API call in the queryParameters variable.

  • Line 28: We use the fetch function to make the API call.

Note: The paging field is a pagination object that is included in the response when a request returns a list of results that is too large to fit in a single response. The paging object includes the previous and next fields that contain URL strings that can be used to retrieve the previous or next set of results, respectively.

Response Fields

Name

Type

Description

id

String

This is the ID for the post.

message

String

This is the post's text, if it was a text-based post.

story

String

This is the post's text if it was a story-based post.

created_time

DateTime

The time the post was created, in ISO 8601 format.

attachments

Object

These are the additional attachments to the post, such as links, photos, videos, etc.

likes

Object

This is information about the post's likes, including the count and a list of users who have liked the post.

comments

Object

This is information about the post's comments, including the count and a list of comment objects.

shares

Object

This is information about the post's shares, including the count and a list of users who have shared the post.

reactions

Object

This is information about the post's reactions, including the count and a list of reaction objects.

paging

Object

This is the information about the pagination of the feed. It contains fields such as next and previous, which we can use to retrieve the next and previous pages of the feed, respectively.

summary

Object

This is a summary of the feed containing information such as total_count (number of total posts in the feed) and can_like (indicating whether or not the feed can be liked).

Note: For a newly created profile, populate the user feed; otherwise, you'll get an empty list as the API response.