1. Canvas: Creative specs and requirements
With more than 1 billion people visiting News Feed each day,1
Facebook provides the incredible opportunity for you to capture the
attention of people you want to connect with.
When advertising on Facebook, you can direct people from ads to an immersive and engaging experience on Facebook, called
Canvas, to further any advertising objective from brand awareness to product sales. Canvas offers a full screen of creative real estate,
customized with video, images and text, in a fast-loading and mobile-optimized experience.
Getting started with Canvas
Canvas is currently available in the website clicks and website conversion objectives. You can create a Canvas in the Canvas Editor
(located in the Publishing Tools section of your Page).
To learn more about how to build a Canvas, visit the Help Center: https://www.facebook.com/business/help/1659484897658040
Canvas creative recommendations
Tell a story: Ads with the canvas experience perform better when the
creative both tells a story and promotes a product. For example, feature a
collection or attributes of a product rather than a long list of products.
Make it interactive: With Canvas, you can also include horizontal scroll
elements so people can explore your story more deeply. This lets people
engage with the products or attributes that resonate most with them.
Experiment: This is a new in-app experience. Marketers are exploring
innovative new ways and using creative elements to achieve their business
objectives.
Specs
Ad Unit
• Recommended image size: 1,200 x 628 pixels
• Image ratio: 1.9:1
• Post text: 90 characters
• Headline: 45 characters
• “Tap to Open” CTA: Added by system,
non-customizable
The Canvas creation tool offers six components to visually tell a story:
Photos
Images use the full width of the screen by default.
• Full width image is 1080px @3x.
• Images used for ‘Tilt-to-pan’ can be wider. (see right)
• Full height image is 1920 @3x.
• Images have two sizing options:
• ‘Fit to width’ ensures the image is full width and allows for
variable height.
• ‘Fit to height’ forces the the image to fill the screen top to
bottom. If the image bleeds off the left and right edges, the
image will have the ‘Tilt-to-pan’ behavior. (see right)
• .png, .jpg file types are supported.
• Use a video to emulate an animated gif.
Tilt-to-pan
This feature allows a user to tilt the phone to the left or right to
reveal more of the image. To enable this, select the ‘Fit-to-height’
option in the Photo component of the Create Tool.
• While the image can scale up to 5x the width of the
screen (5400px), we recommend 3x (3240px) for
performance and usability.
• Image starts centered.
• The image is always 100% of the screen height (1920px).
1
Facebook internal data, September 2015
2. Jasper’s Market
Sponsored
Jasper’s Market
Jasper’s Market
Jasper’s Market
Jasper’s Market
:30 Product Video
Cut Down
Auto Play Video
Tilt-to-Pan Image
KSP Carousel
Discover great storage and workspace furniture
solutions.
Explore the possibilities.
We reimagined how storage and the common
desk can transform your workspace.
Tap to open
Video
All videos will be set to autoplay with sound on and to loop.
Like images, videos can also be set to appear full frame and will
gently snap into place.
Videos should be a minimum 720p (if full-screen, the preferred
aspect ratio is 1.78:1); 750x1334 for full screen but may be smaller
if they only take up a portion of the screen. Videos should be
encoded in mp4 or mov format.
• Each unit can support 1 or more videos. The total of all
videos must be 2 minutes or less.
• Build for portrait. Video will resize for landscape and play
just the video pack in the pillar box.
• First frame of video is poster frame (thumbnail).
Carousel
Images in carousels use the full width of the screen by default.
They must also maintain the same dimensions from image to
image. There is a max of 10 images per carousel.
Images can be full height or just partial height.
If you want text to h-scroll with the images, you will need to
render the type in the image. To make the text appear to be
separate from the photo, you can render the text on a solid
color background with the same image area as the photo.
The pagination dots always appear along the bottom edge of the
image. A light gray gradient is added to the bottom edge of the
carousel images to provide contract for the pagination dots.
Text
Canvas units can have multiple blocks of text up to 500 words
each. The text will be displayed against a background color set
by the theme (white, dark gray).
.
Options
• Font face: Serif, sans serif
• Font size: 6-72pt
• Font color: #rrggbb
• Alignment: Left, center, right
• Font style: Bold, italic, underline, applies to whole
block not individual words
Buttons
Each Canvas must have 1 or more CTAs. CTAs are button that
link to external URLs.
Buttons can either be filled with color or outlined with the
background color showing through.
Use a header bar to introduce people to your brand and the
Canvas experience. A few things to keep in mind:
• Brand logo (transparent png, max dimensions 66px by
180px @3x)
• Headers remain pinned at the top of the screen. If you
don’t want this behavior, you can instead use an image or
text element instead of a header.
Specs
• 48px high
• 30 character limit
• 48px padding top
and bottom
Options
• Font: Serif, sans serif
• Font color
• Fill color or outline
color