New Age Advertising : Facebook Canvas

Mon May 02, 2016 in   , , , Web Design

It is a well known fact that today, people are spending much more time on their mobile than they used to. What’s remained a big challenge for the advertisers is how to make their brand and product stories interesting and effective for their customers. Facebook Canvas helps the advertisers to share information in a better way after people click on their ad. The information offered after someone clicks loads quickly unlike how it used to be shown in banner ads - landing page era.

Facebook Canvas is a new post-click, full-screen, immersive mobile ad experience on Facebook that loads quickly. Within a Canvas, people can swipe through a carousel of images, tilt to view panoramic images and zoom in to view images in detail, making the Canvas experience immersive and engaging in a way that mobile sites aren’t. And Canvas uses the same technology that makes photos and videos load quickly on Facebook, so it loads as much as 10 times faster than the standard mobile web. To also understand how Facebook Reactions work click here.

Brands like Burberry, Coca Cola, ASUS, L’Occitane, etc have used Facebook Canvas to make their advertisements easy and attractive to view them on the mobile itself.

How can you create your own Facebook Canvas ad? Let us take you through a 10 step process, from start to finish.

Access Canvas Through Your Page

Open your page for which you want to create a Canvas.  To access Canvas, click on Publishing Tools from within your page.   On the left hand side, you can see an option for Canvas.From here, you can view a Canvas you’ve created before or create a new one. You can’t edit an existing canvas.


STEP 1 : Basics

To create a new one, click that Create button at the top.


Firstly, you can name your new canvas at the top.


You will be adding components to build your canvas on the left hand side.  On the right, you can preview what it will look like.You will  be asked to provide a theme, header, photo and button by default. Also, you can add, delete and move any items that you want.


canvas3 canvas4

You can select more components by clicking the Add Component button. You will then see the following options.


You can select one or several of these to add them to your canvas. You can also add multiples of each if you want. You decide!

STEP 2 : Select a Theme

The theme is essentially the background color for any empty space (mainly text blocks). You can select from the options of White, Black or Custom.


If you select Custom, click the color box next to it. You can select whichever color you want. This is how it will look like :


STEP 3 : Header

A fixed header can be inserted that will always sit at the top of your canvas.


The maximum size of a header is 882 x 66px. If your header is transparent, you can also select a background color as well as opacity.

STEP 4 : Photo

When adding a photo to your canvas, Facebook provides three options : Default Tap to Expand Tilt to Pan


Here are the specs for photo from Facebook :

  • The file formats to be used can be PNG or JPG.
  • Canvas is limited to make the use of upto 20 photos.
  • By default, the full width of the screen will get covered by the images.
  • A full width image is 1,080 pixels wide.
  • For the tilt to pan option, wider images can be used.
  • Facebook will focus on the middle portion of the image, if you use the tilt to pan option,
  • A full-height image is 1,920 pixels high.
  • For the tap to expand option, a taller image should be used.

STEP 5 : Button

This is an opportunity to send users to an external link. Your button will allow for a maximum of 30 characters, and you should allow for 48px of padding above and below. There are two options to show the button:

  • Inline
  • Fixed to the bottom of the canvas (similar to the fixed header at the top).


You can also add a carousel to your canvas, including a minimum of two images. While this is similar to creating a carousel ad, understand that these are images only and they don’t need to be square. Scaling options are default and tilt to pan. If you choose default, you can include a link. Otherwise, the tilt to pan option includes images only.


Here are the specs for canvas carousel from Facebook:

  • All images need to be the same size
  • Maximum width is 1,080 pixels
  • Maximum height is 1,920 pixels
  • Use PNG or JPG file type
  • Use up to 10 images per carousel

STEP 7 : Text

You can type the text in the space provided. Make sure you put something interesting here to grab your viewers attention.You can adjust the following:

  • Font face
  • Font size
  • Color
  • Bold, italics, underline
  • Alignment

You are allowed no more than 500 characters in a single text block.


STEP 8  : Video

Facebook makes the following suggestions if you wish to add a video :

  • Minimum resolution required is 720p.
  • Format has to be either MP4 or MOV.
  • You can have more than one video in the canvas, but the total time of all videos can’t be greater than two minutes.
  • Portrait orientation is recommended. Also, landscape videos will automatically resize.
  • Full screen videos should be avoided.
  • The first frame will be the thumbnail (you can’t change this). The video will auto play once you scroll to it.
  • The videos within a canvas auto play with sound and replay on a loop. They will stop as soon as you scroll by them.


For video scaling, you have two options:

  • Default : If you choose this option, the video will fit to the screen.
  • Tilt to pan : If you choose this option, the video will zoom in, and you can tilt your phone to see other areas of the video. This is most ideal for high resolution video tours.

STEP 9 : Product Set

This feature is for the E-commerce advertisers. Only if you have a product feed on Facebook,, you can display it here. You can’t determine the order of the products, and Facebook will dynamically display up to 40 at a time.

STEP 10 : Save, Preview and Finish

When you’re done, make sure you save the canvas at the top left. Before you click finish, you absolutely need to preview. The reason the preview is so important is that once you finish the canvas, you can’t edit it. After clicking on Preview on Device, Facebook will send an alert to your phone so that you can view it there.