Facebook Design Guide (Summer 2014 Version)

© OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 1© OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com
FACEBOOK
DESIGN
GUIDE
Specs & Best
Practices:
July 2014
Revision

© OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 1
Overview
FACEBOOK DESIGN GUIDE FOR BUSINESS PAGES
The major elements covered in this guide include:
Over the years, there have been a number of updates to business pages on Facebook, the most recent of
which began rolling out on March 10, 2014, becoming universally live in June 2014. This set of changes was
intended to make it easier for both fans and page admins to navigate Facebook pages. All posts “by the page”
now appear in a single column on the right, while practically every other feature is located in a single column on
the left. Within the header at the top of the page, there are even more changes, all designed to create a more
streamlined look. The biggest change of all, however, is Facebook’s new emphasis on images. Now, more than
ever, having a good mix of photos, images and videos to share on your timeline is critical in your efforts to reach
and engage with the largest possible audience.
This guide was written for marketers who seek to explore all options for displaying images on Facebook, as well
as any other specs and best practices they need to be aware of when designing a page.
+ Cover Photo
+ Shared Images on Timeline
+ Shared Videos on Timeline
+ Events
+ Mobile (Responsive) Display Considerations
+ Profile Photo
+ Shared Links on Timeline
+ Apps and Sections
+ Offers
Cover Photo
Profile Photo
Profile Photo
on Timeline
Shared
Link/
Shared
Images

Quick Reference Asset Checklist
These are the dimensions that Facebook will use to display images when they appear as a preview in posts on
your timeline. When users click on these previews, they will see the full-sized original image.
NAME DIMENSIONS
COVER PHOTO 851 pixels wide x 315 pixels high
PROFILE PHOTO 160 pixels wide x 160 pixels high
PROFILE PHOTO THUMBNAIL 40 pixels wide x 40 pixels high (automatically scaled down)
SHARED IMAGE THUMBNAILS 105 pixels wide x 105 pixels high
SINGLE SHARED IMAGE 504 pixels wide x 504 pixels high
TWO HORIZONTAL IMAGES Each: 504 pixels wide x 251 pixels high
TWO VERTICAL IMAGES Each: 251 pixels wide x 504 pixels high
TWO SQUARE IMAGES Each: 251 pixels wide x 252 pixels high
THREE IMAGES WITH HORIZONTAL PRIMARY
Primary Image: 504 pixels wide x 251 pixels high
Each Other Image: 251 pixels wide x 251 pixels high
THREE IMAGES WITH VERTICAL PRIMARY
Each Other Image: 251 pixels wide x 251 pixels high
THREE IMAGES WITH SQUARE PRIMARY
Left Image: 166 pixels wide x 167 pixels high
Center Image: 165 pixels wide x 167 pixels high
Right Image: 167 pixels wide x 167 pixels high
FOUR IMAGES WITH HORIZONTAL PRIMARY
Bottom Left Image: 166 pixels wide x 167 pixels high
Bottom Center Image: 165 pixels wide x 167 pixels high
Bottom Right Image: 167 pixels wide x 167 pixels high
FOUR IMAGES WITH VERTICAL PRIMARY
Top Side Image: 167 pixels wide x 166 pixels high
Center Side Image: 167 pixels wide x 165 pixels high
Bottom Side Image: 167 pixels wide x 167 high
FOUR SQUARE IMAGES Each Image: 251 pixels wide x 251 pixels high
SHARED LINKS 484 pixels wide x 252 pixels high
SHARED VIDEOS 504 pixels wide x 283 pixels high
SHARED VIDEO THUMBNAILS
Top Thumbnail: 319 pixels wide x 176 pixels high
(automatically scaled down)
Each Bottom Thumbnail: 157 pixels wide x 87 pixels high
(automatically scaled down)
APPS 810 pixels wide x 1200 pixels high
APP THUMBNAILS 111 pixels wide x 74 pixels high
EVENTS 784 pixels wide x 295 pixels high
OFFERS 470 pixels wide x 246 pixels high

Cover Photo
All users can see your cover photo, regardless of whether they have liked your page, so be sure to feature a
high-quality, aesthetically-pleasing image that reflects your brand in the most favorable light possible. It is a best
practice to limit the amount of text on your cover photo to less than 20 percent of the full image size. Your brand
name and business category will automatically appear in white letters on your cover photo, just to the right of
your profile photo, so make sure that that area of your cover photo will not clash with white text.
Cover photos are displayed at 851 pixels wide x 315 pixels high. You can crop a larger photo or adjust its
positioning to fit the display area, but you cannot resize a smaller photo to fit the display area. If you do use a
photo that is smaller than 851 pixels wide x 315 pixels high, it be automatically resized to fit Facebook’s standard
cover photo dimensions, which will make the photo appear blurry and grainy.
Specs / Best Practices
+ Dimensions: 851 pixels wide x 315 pixels high
851 pixels
315 pixels
This image will appear at the bottom left-hand corner
of your cover photo. It is considered a best practice for
businesses to display an image of their logo as their
profile photo. Your profile photo must be at least 180
pixels wide, but Facebook will automatically resize your
image to fit its 160 pixels wide x 160 pixels high profile
photo display dimensions.
Profile Photo
160 pixels
160 pixels

PROFILE PHOTO ON TIMELINE
This is how your profile photo will look next to everything you post, on your own page and everywhere else on
Facebook. It is important to have a profile picture that still looks clear and stands out, even when shrunk down
to Facebook’s 40 pixels wide x 40 pixels high timeline profile photo display dimensions.
The nine images that a page has posted most
recently will also appear as 105 pixel wide x 105
pixel high thumbnails in the small “Photos” box on
the left of the timeline. Facebook will automatically
shrink images to 105 pixels wide x 105 pixels high
for this section.
Shared Images on Timeline
IMAGE THUMBNAILS IN SIDE SECTION
40 pixels
40 pixels
105 pixels
105 pixels
Overdrive Interactive shared a link.
11 hours ago

SINGLE SHARED IMAGES
Single images you share will be displayed on your timeline as up to 504 pixels wide x 504 pixels high. Larger
images will be scaled down automatically. Facebook recommends that users share images that are 720 pixels,
960 pixels or 2048 pixels wide. Images with widths smaller than 504 pixels will appear with grey bars on both
sides.
When you upload multiple images to Facebook, previews of these images will be displayed on your timeline.
This automatic preview is performed with both independent images and images uploaded as part of an album.
The next five pages present and explain the different ways in which Facebook displays uploaded images on the
timeline, with image orientation and dimensions noted for each.
MULTIPLE THUMBNAIL IMAGES
504 pixels
504 pixels

Specs / Best Practices - Two Vertical Images
+ Dimensions: 251 pixels wide x 504 pixels high (each)
Specs / Best Practices - Two Horizontal Images
251 pixels 251 pixels
504 pixels
504 pixels
504 pixels
251 pixels
251 pixels

Specs / Best Practices - Two Square Images
Specs / Best Practices - Three Images with Horizontal Primary
+ Dimensions: 251 pixels wide x 504 pixels high (primary image)
251 pixels wide x 251 pixels high (each bottom image)
504 pixels
251 pixels
251 pixels
252 pixels
251 pixels251 pixels

Specs / Best Practices - Three Images with Vertical Primary
251 pixels wide x 251 pixels high (each bottom image)
Specs / Best Practices - Three Images with Square Primary
+ Dimensions: 166 pixels wide x 167 pixels high (left image)
165 pixels wide x 167 pixels high (primary/center image)
167 pixels wide x 167 pixels high (right image)
251 pixels
251 pixels
167 pixels
166 pixels 165 pixels 167 pixels
167 pixels
504 pixels

Specs / Best Practices - Four Images with Horizontal Primary
166 pixels wide x 167 pixels high (bottom left image)
165 pixels wide x 167 pixels high (bottom center image)
167 pixels wide x 167 pixels high (bottom right image)
Specs / Best Practices - Four Images with Vertical Primary
167 pixels wide x 166 pixels high (top side image)
167 pixels wide x 165 pixels high (center side image)
167 pixels wide x 167 pixels high (bottom side image)
504 pixels
335 pixels
167 pixels
166 pixels 165 pixels 167 pixels
166 pixels
165 pixels
167 pixels
504 pixels

Specs / Best Practices - Four Square Images Primary
You have the option to either use the image that
is automatically pulled from the destination page,
or to upload an image of your own. This image
must be at least 484 pixels wide x 252 pixels
high; larger images will be scaled down to this
size. Smaller images will appear as a 90 pixel
wide x 90 pixel thumbnail next to a preview of
text from the article.
When you share a link on your page’s timeline, an image from the destination page usually appears as part of
the post, along with a brief description of the destination page or an excerpt of its content.
SHARED LINKS ON TIMELINE
252 pixels
484 pixels
Other Dimensions

Shared Videos on Timeline
The three videos that a page has posted most
recently will also appear as thumbnails in the
small “Videos” box on the left of the timeline, just
below the small “Photos” box. A 319 pixel wide
x 176 pixel tall thumbnail of the most recently
uploaded video will be placed on top, with the
two previously-uploaded videos directly below it,
each displayed as 157 pixel wide x 87 pixel high
thumbnails.
+ Dimensions: 319 pixels wide x 176 pixel high (top video)
157 pixels wide x 87 pixels high (each bottom video)
VIDEO THUMBNAILS IN SIDE SECTION
319 pixels
157 pixels
87 pixels
176 pixels
157 pixels
504 pixels
283 pixels
When you post an uploaded video on your page, a screenshot from that video will appear on the timeline with a
“play” button superimposed on top of it so users can watch the video. The standard size for a video post is 504
pixels wide x 283 pixels high. However, Facebook will automatically format videos with other dimensions to fit
onto the timeline.

The apps section to the left of the timeline
displays three of the apps you have added
to your company’s Facebook page. You can
choose each app’s accompanying thumbnail,
regardless of whether you downloaded the app
from the Facebook App Center or created it
yourself. Once added, each app will appear as
a 111 pixel wide x 74 pixel high thumbnail in a
small gray box on the left of your timeline, just
above the small “Photos” thumbnail box.
APPS THUMBNAILS
Apps
With the new Facebook redesign, apps can be accessed on the top header, above the timeline, under as part
of the “More” dropdown list. Once an app is selected from the dropdown list, it will open on its own page, with
its name displayed on the header. You can add apps to your page through the Facebook App Center, or by
creating your own. Although they may include photos, images or graphic, apps themselves are not images, and
thus have no standard dimensions to note.
Events
Each event you create for your page will include its own cover photo, displayed at 784 pixels wide x 295 pixels
high.
111 pixels
74 pixels
784 pixels
295 pixels

Offers
Facebook allows pages to create offers to show up on
their page’s timeline, as well as the News Feed of the
page’s fans. For different sums of money, offers may be
“boosted” to a wider audience range, such as friends of
fans. Offers can range from contest, to free downloads, to
coupons, etc. When you create an offer on Facebook, you
can either upload a new accompanying image or select
an existing image from images already uploaded by your
Facebook page. Choose an image that clearly illustrates
your offer, as this image will be displayed alongside your
offer, at a prominent size of 470 pixels wide x 246 pixels
high.
Mobile Considerations
As long as you adhere to the specs and best practices above, your Facebook
page should render properly in a responsive design on any mobile or tablet
device. However, Overdrive Interactive highly recommends a comprehensive
quality control (QC) process to test your design on both iOS (Apple) and Android
mobile (Google) devices. Make sure to view your Facebook page in both the app
and browser environments.
For more information on uploading images to Facebook and building your
business page, as well as the latest information about any updates that are
made to the channel, visit the Facebook for Business News page at https://www.
facebook.com/business/news.
With all of the options for customization that Facebook offers, there is a seemingly endless number of factors to
consider when creating new apps and ads. However, this guide should provide you with all the information you
need to display any type of image as a business on Facebook as well as any other specs and best practices you
need to be aware of in designing a page.
Conclusion
470 pixels
246 pixels
Overdrive Interactive posted an offer.
a few seconds ago
Download the Digital Advertising Guide for free!
Free 100 Pages Guide
Expires August 1,2014
Like - Comment - Share

DIGITAL MARKETING SERVICES
About Overdrive
Call Us: 617-254-5000
Email Us: info@overdriveinteractive.com
Visit Us: www.ovrdrv.com
Like Us: www.facebook.com/overdriveinteractive
Follow Us: www.twitter.com/ovrdrv
Download this guide: www.ovrdrv.com/facebook-design-guide
NEED HELP WITH YOUR DIGITAL MARKETING?
+ Social Media Marketing
+ Search Marketing (SEO and SEM)
+ Online Media Planning, Buying and Management
+ Website and Application Development
+ Digital Creative Services
+ Inbound Marketing
+ Email and Marketing Automation Management
Take action and see why some of the world’s leading brands turn to Overdrive Interactive to launch, manage
and measure their online marketing channels:
Overdrive Interactive is a digital marketing agency based in Boston that helps clients grow their businesses with
highly creative and measurable digital marketing programs. We specialize in eliminating the blurry line between
online media, search engine marketing and cutting edge technology to create social media marketing platforms
and campaigns that encourage engaging experiences, create lasting consumer connections and drive profitable
customer relationships.

Facebook Design Guide (Summer 2014 Version)

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (11)

Similaire à Facebook Design Guide (Summer 2014 Version)

Similaire à Facebook Design Guide (Summer 2014 Version) (20)

Plus de Overdrive Interactive

Plus de Overdrive Interactive (15)

Dernier

Dernier (20)

Facebook Design Guide (Summer 2014 Version)