The POST
and DELETE
methods for the /PAGE-ID/tabs
endpoint are deprecated. Please visit the
Graph API Changelog
for more information.
This guide explains how to get, create, manage, and delete Page Tabs using the Graph API.
Beginning June 30, 2022, access to the /PAGE-ID/tabs
endpoint will be restricted to apps that have accessed it in the last 90 days.
Major brands, celebrities, and organizations use Facebook Pages as their social home on the web. Besides standard tabs like "About", "Events" or "Photos" you can add custom Page tabs via the Facebook platform. These custom Page tabs load content from your webserver using an iframe. Page tabs will only be displayed in the web UI. Mobile custom tabs are not supported at this time.
Only Pages with 2000 or more likes can create custom Page tabs.
The amount of space available to your tab app is bounded by the outer context of Facebook. It may be configured to display with a width of 520 pixels (default) or 810 pixels.
To read Page Tabs, you will need:
MANAGE
task on the Page.pages_manage_metadata
permissionIf a person is not able to perform the task on the Page, you will need the following:
To create Page Tabs, you will need:
MANAGE
task on the Page.pages_manage_metadata
permissionSend a
POST
request to the
/{page-id}/tabs
edge:
curl -i -X POST "https://graph.facebook.com/{page-id}/tabs?
custom_name=My Custom Tab&
tab={app_id}&
access_token={page-access-token}"
On success, your app gets this response:
{ "success": true }
To add and manage tabs using the UI visit our Help Center.
Send a GET
request to the /{page-id}/tabs
endpoint:
curl -i -X GET "https://graph.facebook.com/{page-id}/tabs/?access_token={access=token}"
On success, your app gets this response:
{ "data": [ { "id": "19292868552/tabs/posts", "name": "Posts", "link": "/FacebookforDevelopers/posts/", "is_permanent": true, "position": 1, "is_non_connection_landing_tab": false }, { "id": "19292868552/tabs/videos", "name": "Videos", "link": "/FacebookforDevelopers/videos/", "is_permanent": true, "position": 2, "is_non_connection_landing_tab": false }, { "id": "19292868552/tabs/about", "name": "About", "link": "/FacebookforDevelopers/about/", "is_permanent": true, "position": 3, "is_non_connection_landing_tab": false }, ...
Send a POST
request to the /{page-id}/tabs/{tab-name}
endpoint and set the position
parameter:
curl -i -X POST "https://graphfacebook.com/{page-id}/tabs/{tab-name}?
position=5&
access_token={page-access-token}"
On success, your app gets this response:
{ "success": true }
A person who manages a Facebook Page can download your tab app to their Page. You will be notified via a callback URL that someone has added your app to their Page. This does not require any extended permissions.
This dialog can be used with the JavaScript SDK by performing a full page redirect to a URL.
FB.ui({ method: 'pagetab', redirect_uri: '{your-callback-url}' }, function(response){});
The above example assumes that the person has already logged in to your app.
https://www.facebook.com/dialog/pagetab? app_id={your-app-id} &redirect_uri={your-callback-url}
You can use the following parameters in the redirect:
Parameter | Description |
---|---|
Required | The unique ID of your app. |
| The URL a person is redirected to after they click a button on the dialog. Required when using URL redirection. |
| Determines how the dialog is rendered. Not available on mobile devices. |
When your tab is loaded on Facebook, an HTTP POST request is made to your Secure Page Tab URL. This POST request will contain parameters including the signed_request
parameter which you can use for authorization and customizing content for your Users.
The signed_request
is base64url encoded and signed with an HMAC version of your App Secret, based on the OAuth 2.0 spec. When your app receives the signed_request
you will need to parse and verify it before it can be used. This is performed in three steps:
On success, the JSON object looks something like this:
{ "oauth_token": "{user-access-token}", "algorithm": "HMAC-SHA256", "expires": 1291840400, "issued_at": 1291836800, "user_id": "218471" }
If you want to customize the content shown to each User, include the app_data
parameter in the original query. It might look like this:
https://www.facebook.com/{page-id}?sk=app_{app_id}&app_data={string-data}
You can use that to customize the content you render if you control the generation of the link.