Graph API Version

Page Canvas Elements

Reading

PageCanvasElements

Example

Graph API Explorer
GET /v7.0/{page-id}/canvas_elements HTTP/1.1
Host: graph.facebook.com
/* PHP SDK v5.0.0 */
/* make the API call */
try {
  // Returns a `Facebook\FacebookResponse` object
  $response = $fb->get(
    '/{page-id}/canvas_elements',
    '{access-token}'
  );
} catch(Facebook\Exceptions\FacebookResponseException $e) {
  echo 'Graph returned an error: ' . $e->getMessage();
  exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
  echo 'Facebook SDK returned an error: ' . $e->getMessage();
  exit;
}
$graphNode = $response->getGraphNode();
/* handle the result */
/* make the API call */
FB.api(
    "/{page-id}/canvas_elements",
    function (response) {
      if (response && !response.error) {
        /* handle the result */
      }
    }
);
/* make the API call */
new GraphRequest(
    AccessToken.getCurrentAccessToken(),
    "/{page-id}/canvas_elements",
    null,
    HttpMethod.GET,
    new GraphRequest.Callback() {
        public void onCompleted(GraphResponse response) {
            /* handle the result */
        }
    }
).executeAsync();
// For more complex open graph stories, use `FBSDKShareAPI`
// with `FBSDKShareOpenGraphContent`
/* make the API call */
FBSDKGraphRequest *request = [[FBSDKGraphRequest alloc]
                               initWithGraphPath:@"/{page-id}/canvas_elements"
                                      parameters:params
                                      HTTPMethod:@"GET"];
[request startWithCompletionHandler:^(FBSDKGraphRequestConnection *connection,
                                      id result,
                                      NSError *error) {
    // Handle the result
}];
If you want to learn how to use the Graph API, read our Using Graph API guide.

Parameters

This endpoint doesn't have any parameters.

Fields

Reading from this edge will return a JSON formatted result:

{ "data": [], "paging": {} }

data

A list of CanvasBodyElement nodes.

paging

For more details about pagination, see the Graph API guide.

Validation Rules

ErrorDescription
100Invalid parameter

Creating

You can make a POST request to canvas_elements edge from the following paths:
When posting to this edge, a CanvasBodyElement will be created.

Parameters

ParameterDescription
canvas_button
Object

Create a canvas button that belongs to a page

name
string
Default value: Button

Name of the button

button_color
string
Default value: FF000000

The color of the button

rich_text
Object

The text inside the button

Required
button_style
enum {BUTTON_OUTLINE, BUTTON_FILLED}
Default value: BUTTON_OUTLINE

The style of the button

open_url_action
Object

the destination url after user clicks the button, by setting this, the canvas button will have action with OPEN URL type

text_alignment
enum {LEFT, CENTER, RIGHT}
Default value: CENTER

The alignment of the text on the button

text_color
string
Default value: FF777777

The color of the text on the button

font_size
int64
Default value: 15

The size of the font for the text on the button

font_family
string
Default value: sans-serif

The font family of the text on the button

line_height
float
Default value: 1

The line height of the text on the button

top_padding
float
Default value: 0

The padding above the button

deep_link
string

Deep link destination only for mobile apps (used for mobile install or engagement ads and app link is supported)

bottom_padding
float
Default value: 0

The padding below the button

background_color
string
Default value: FFFFFFFF

Background color of the button

canvas_carousel
Object

Create a canvas carousel that belongs to a page

name
string
Default value: Carousel

Name of the carousel element

child_elements
list<id>

The child elements of the carousel. Typically, they are canvas photo elements

Required
style
enum {FIT_TO_WIDTH, FIT_TO_HEIGHT}
Default value: FIT_TO_WIDTH

The presentation style of the carousel

top_padding
float
Default value: 0

The padding above the carousel

bottom_padding
float
Default value: 0

The padding below the carousel

canvas_footer
Object

Create a canvas footer that belongs to a page

name
string
Default value: Footer

Name of the footer element

child_elements
list<id>

The child elements inside a footer, typically, it is a canvas button element.

Required
background_color
string
Default value: FFFFFFFF

Background color of the button

canvas_header
Object

Create a canvas header that belongs to a page

name
string
Default value: "Header"

Name of the header element

child_elements
array<rich_media_photo_element ID>

The child elements (typically a photo) inside the header

background_color
string

The background color of the header

canvas_lead_form
Object

The id of corresponding published lead form

leadgen_data_id
leadgen_data ID

Required
name
string
Default value: "Lead Gen Form"

top_padding
float
Default value: 0

bottom_padding
float
Default value: 0

canvas_photo
Object

Create a canvas photo that belongs to a page

photo_id
id

ID of Facebook photo used in the photo element

photo_url
URI

open_url_action
Object

The action associated with the photo

deep_link
string

Deep link destination only for mobile apps (used for mobile install or engagement ads and app link is supported)

destination_set_id
id

style
enum {FIT_TO_WIDTH, FIT_TO_WIDTH_EXPANDABLE, FIT_TO_HEIGHT}

The presentation style of the photo

name
string
Default value: Photo

Name of the photo element

top_padding
float
Default value: 0

The padding above the photo element

bottom_padding
float
Default value: 0

The padding below the photo element

product_tags
list<Object>

product_id
numeric string or integer

Required
coordinates
list<float>

hide_product_prices
boolean

canvas_product_list
Object

Creat a canvas product list that belongs to a page

name
string
Default value: Product

product_id_list
list<int64>

top_padding
float
Default value: 0

bottom_padding
float
Default value: 0

item_headline
string
Default value:

item_description
string
Default value:

canvas_product_set
Object

Creat a canvas product set that belongs to a page

name
string
Default value: Product

Name of the product set element

max_items
int64
Default value: 50

Maximum number of products to show

product_set_id
id

The product set id which contains a subset of products within a product catalog

top_padding
float
Default value: 0

The padding above the product set

bottom_padding
float
Default value: 0

The padding below the product set

image_overlay_spec
Object

How to render overlays over a product item

overlay_template
enum {PILL_WITH_TEXT, CIRCLE_WITH_TEXT, TRIANGLE_WITH_TEXT}

Required
text_type
enum {PRICE, STRIKETHROUGH_PRICE, PERCENTAGE_OFF, CUSTOM, FROM_PRICE, DISCLAIMER, GUEST_RATING, STAR_RATING}

Required
text_font
enum {DROID_SERIF_REGULAR, LATO_REGULAR, NUNITO_SANS_BOLD, OPEN_SANS_BOLD, OPEN_SANS_CONDENSED_BOLD, PT_SERIF_BOLD, ROBOTO_MEDIUM, ROBOTO_CONDENSED_REGULAR, NOTO_SANS_REGULAR, DYNADS_HYBRID_BOLD}

Required
position
enum {TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT}

Required
theme_color
enum {BACKGROUND_E50900_TEXT_FFFFFF, BACKGROUND_F78400_TEXT_FFFFFF, BACKGROUND_00AF4C_TEXT_FFFFFF, BACKGROUND_0090FF_TEXT_FFFFFF, BACKGROUND_755DDE_TEXT_FFFFFF, BACKGROUND_F23474_TEXT_FFFFFF, BACKGROUND_595959_TEXT_FFFFFF, BACKGROUND_000000_TEXT_FFFFFF, BACKGROUND_FFFFFF_TEXT_C91B00, BACKGROUND_FFFFFF_TEXT_F78400, BACKGROUND_FFFFFF_TEXT_009C2A, BACKGROUND_FFFFFF_TEXT_007AD0, BACKGROUND_FFFFFF_TEXT_755DDE, BACKGROUND_FFFFFF_TEXT_F23474, BACKGROUND_FFFFFF_TEXT_646464, BACKGROUND_FFFFFF_TEXT_000000}

Required
float_with_margin
boolean

text_template_tags
array<string>

custom_text_type
enum {FREE_SHIPPING}

item_headline
string
Default value:

item_description
string
Default value:

retailer_item_ids
list<string>

show_in_feed
boolean

storefront_setting
JSON object

enable_sections
boolean
Default value: false

enable_sections

canvas_store_locator
Object

Create a canvas store locator that belongs to a page

page_set_id
numeric string or integer

The page set id used for the store locator

name
string
Default value: Store Locator

Name of the store locator element

typeface
string
Default value: HelveticaNeue-Light

Font used to display info about the store

header_background_color
string
Default value: FF000000

Header background color for the store locator

canvas_text
Object

Create a canvas text that belongs to a page

name
string
Default value: Text

Name of the text element

rich_text
Object

The text content of the text element

Required
text_alignment
enum {LEFT, CENTER, RIGHT}
Default value: CENTER

The alignment of the text

text_color
string
Default value: FF777777

The color of the text

font_size
int64
Default value: 15

The size of the font for the text

font_family
string
Default value: sans-serif

The font family of the text

line_height
float
Default value: 1

The line height of the text

top_padding
float
Default value: 0

The padding above the text

bottom_padding
float
Default value: 0

The padding below the text

background_color
string

The color of the background for the text

canvas_video
Object

Create a canvas video that belongs to a page

name
string
Default value: Video

Name of the video element

video_id
id

ID of Facebook video used in the video element

video_url
URI

style
enum {FIT_TO_WIDTH, FIT_TO_HEIGHT}
Default value: FIT_TO_WIDTH

The presentation style of the video

top_padding
float
Default value: 0

The padding above the video

bottom_padding
float
Default value: 0

The padding below the video

Return Type

This endpoint supports read-after-write and will read the node represented by id in the return type.
Struct {
id: numeric string,
}

Validation Rules

ErrorDescription
100Invalid parameter
200Permissions error
210User not visible
80001There have been too many calls to this Page account. Wait a bit and try again. For more info, please refer to https://developers.facebook.com/docs/graph-api/overview/rate-limiting.

Updating

You can't perform this operation on this endpoint.

Deleting

You can't perform this operation on this endpoint.