Facebook Design Guide (Summer 2014 Version)

© OVERDRIVE INTERACTIVE | 2014 | www.Overdr ive In te rac t i ve .com 1© OVERDRIVE INTERACTIVE | 2014 | www.Overdr ive In te rac t i ve .com

FACEBOOKDESIGNGUIDESpecs & Best Practices: July 2014 Revision

http://www.ovrdrv.com/facebook-design-guide?utm_source=deliverable&utm_medium=pdf&utm_campaign=fb%20design%20guide

http://www.ovrdrv.com/?utm_source=deliverable&utm_medium=pdf&utm_campaign=fb%20design%20guide


© OVERDRIVE INTERACTIVE | 2014 | www.Overdr ive In te rac t i ve .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 ChecklistThese 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 PRIMARYPrimary Image: 504 pixels wide x 251 pixels highEach Other Image: 251 pixels wide x 251 pixels high

THREE IMAGES WITH VERTICAL PRIMARYPrimary Image: 251 pixels wide x 504 pixels highEach Other Image: 251 pixels wide x 251 pixels high

THREE IMAGES WITH SQUARE PRIMARY

Left Image: 166 pixels wide x 167 pixels highCenter Image: 165 pixels wide x 167 pixels highRight Image: 167 pixels wide x 167 pixels high

FOUR IMAGES WITH HORIZONTAL PRIMARY

Primary Image: 504 pixels wide x 335 pixels highBottom Left Image: 166 pixels wide x 167 pixels highBottom Center Image: 165 pixels wide x 167 pixels highBottom Right Image: 167 pixels wide x 167 pixels high

FOUR IMAGES WITH VERTICAL PRIMARY

Primary Image: 335 pixels wide x 504 pixels highTop Side Image: 167 pixels wide x 166 pixels highCenter Side Image: 167 pixels wide x 165 pixels highBottom 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 PhotoAll 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 TimelineIMAGE 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


© OVERDRIVE INTERACTIVE | 2014 | www.Overdr ive In te rac t i ve .com 1 1

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

AppsWith 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.

EventsEach 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



OffersFacebook 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 GuideExpires August 1,2014

Like - Comment - Share



DIGITAL MARKETING SERVICES

About Overdrive

Call Us: 617-254-5000

Email Us: [email protected]

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.

http://www.ovrdrv.com/facebook-design-guide?utm_source=deliverable&utm_medium=pdf&utm_campaign=fb%20design%20guide



http://www.facebook.com/overdriveinteractive?utm_source=deliverable&utm_medium=pdf&utm_campaign=fb%20design%20guide

http://www.twitter.com/ovrdrv?utm_source=deliverable&utm_medium=pdf&utm_campaign=fb%20design%20guide

mailto: [email protected]

Facebook Design Guide (Summer 2014 Version)

Social Media

Transcript of Facebook Design Guide (Summer 2014 Version)