Ads News
by Fredrik Carlsen
April 3
Canvas API

Today we are announcing the Canvas API for advertisers. You can now easily create Canvas campaigns on Facebook through the API. By using sight, sound, and motion, the canvas format allows advertisers to effectively drive both brand and direct response objectives.

Canvases are built with a simple set of components that are the building blocks of the experience. We narrowed the creation experience down to a minimal set of features which can create powerful and compelling creative experiences, like photo, video, text, button, header, footer, store locator and product set. These flexible Canvas components are all available through the API.

In these examples we demonstrate how you can create canvas components and how they are used to build a canvas. See Canvas on Facebook Ads guide for a visual example of each element.

To build a canvas through the API, you must first create the canvas components you want to use, e.g. a photo or a button:

Photo:

use FacebookAds\Api;
use FacebookAds\Http\RequestInterface;

$params = array(
  'canvas_photo' => array(
    'bottom_padding' => 20,
    'name' => 'Canvas Photo Name',
    'open_url_action' => array('url' => '<URL>'),
    'photo_id' => <PHOTO_ID>,
    'style' => 'FIT_TO_WIDTH',
    'top_padding' => 20,
  ),
);

$data = Api::instance()->call(
  '/'.<PAGE_ID>.'/canvas_elements',
  RequestInterface::METHOD_POST,
  $params)->getContent();
curl \
  -F 'canvas_photo={ 
    "bottom_padding": 20, 
    "name": "Canvas Photo Name", 
    "open_url_action": {"url":"<URL>"}, 
    "photo_id": "<PHOTO_ID>", 
    "style": "FIT_TO_WIDTH", 
    "top_padding": 20 
  }' \
  -F 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v2.9/<PAGE_ID>/canvas_elements

Button:

use FacebookAds\Api;
use FacebookAds\Http\RequestInterface;

$params = array(
  'canvas_button' => array(
    'bottom_padding' => 0,
    'button_color' => 'FF000000',
    'button_style' => 'BUTTON_FILLED',
    'font_family' => 'sans-serif',
    'font_size' => 15,
    'line_height' => 1,
    'name' => 'Canvas Button Name',
    'open_url_action' => array('url' => '<URL>'),
    'rich_text' => array('plain_text' => 'Click Me'),
    'text_alignment' => 'CENTER',
    'text_color' => 'FF777777',
    'top_padding' => 0,
  ),
);

$data = Api::instance()->call(
  '/'.<PAGE_ID>.'/canvas_elements',
  RequestInterface::METHOD_POST,
  $params)->getContent();
curl \
  -F 'canvas_button={ 
    "bottom_padding": 0, 
    "button_color": "FF000000", 
    "button_style": "BUTTON_FILLED", 
    "font_family": "sans-serif", 
    "font_size": 15, 
    "line_height": 1, 
    "name": "Canvas Button Name", 
    "open_url_action": {"url":"<URL>"}, 
    "rich_text": {"plain_text":"Click Me"}, 
    "text_alignment": "CENTER", 
    "text_color": "FF777777", 
    "top_padding": 0 
  }' \
  -F 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v2.9/<PAGE_ID>/canvas_elements

Then you add the element to for instance a header:

use FacebookAds\Api;
use FacebookAds\Http\RequestInterface;

$params = array(
  'canvas_header' => array(
    'name' => 'Canvas Header Name',
    'background_color' => 'FFFFFF',
    'child_elements' => array(<CANVAS_PHOTO_ID>),
  ),
);

$data = Api::instance()->call(
  '/'.<PAGE_ID>.'/canvas_elements',
  RequestInterface::METHOD_POST,
  $params)->getContent();
curl \
  -F 'canvas_header={ 
    "name": "Canvas Header Name", 
    "background_color": "FFFFFF", 
    "child_elements": ["<CANVAS_PHOTO_ID>"] 
  }' \
  -F 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v2.9/<PAGE_ID>/canvas_elements

Or to a carousel:

use FacebookAds\Api;
use FacebookAds\Http\RequestInterface;

$params = array(
  'canvas_carousel' => array(
    'bottom_padding' => 12,
    'child_elements' => array(
      <CANVAS_PHOTO_ID_1>,
      <CANVAS_PHOTO_ID_2>,
      <CANVAS_PHOTO_ID_3>,
    ),
    'name' => 'Canvas Carousel Name',
    'style' => 'FIT_TO_WIDTH',
    'top_padding' => 12,
  ),
);

$data = Api::instance()->call(
  '/'.<PAGE_ID>.'/canvas_elements',
  RequestInterface::METHOD_POST,
  $params)->getContent();
curl \
  -F 'canvas_carousel={ 
    "bottom_padding": 12, 
    "child_elements": [ 
      "<CANVAS_PHOTO_ID_1>", 
      "<CANVAS_PHOTO_ID_2>", 
      "<CANVAS_PHOTO_ID_3>" 
    ], 
    "name": "Canvas Carousel Name", 
    "style": "FIT_TO_WIDTH", 
    "top_padding": 12 
  }' \
  -F 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v2.9/<PAGE_ID>/canvas_elements

Finally, you create a canvas and add the canvas elements you created:

use FacebookAds\Api;
use FacebookAds\Http\RequestInterface;

$params = array(
  'background_color' => 'FFFFFF',
  'body_element_ids' => array(<CANVAS_PHOTO_ID>),
  'is_hidden' => false,
  'is_published' => false,
  'name' => 'Canvas Name',
);

$data = Api::instance()->call(
  '/' . <PAGE_ID> . '/canvases',
  RequestInterface::METHOD_POST,
  $params)->getContent();
curl \
  -F 'background_color=FFFFFF' \
  -F 'body_element_ids=["<CANVAS_PHOTO_ID>"]' \
  -F 'is_hidden=' \
  -F 'is_published=' \
  -F 'name=Canvas Name' \
  -F 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v2.9/<PAGE_ID>/canvases

You can create, edit and delete canvas elements. For a full overview on the API, see more at Canvas API