Your SlideShare is downloading. ×
Facebook Design Guide (Summer 2014 Version)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Facebook Design Guide (Summer 2014 Version)

880
views

Published on

Written to reflect the channel’s summer 2014 redesign, this practical guide will help you understand the design specifications and best practices for your company’s Facebook page. …

Written to reflect the channel’s summer 2014 redesign, this practical guide will help you understand the design specifications and best practices for your company’s Facebook page.

The guide covers:
- Optimal dimensions
- Cover photos and profile photos
- Shared images and links
- Events, apps and sections
- And much more!

Published in: Social Media

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
880
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 1© OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com FACEBOOK DESIGN GUIDE Specs & Best Practices: July 2014 Revision
  • 2. © 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
  • 3. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 2 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 Primary Image: 251 pixels wide x 504 pixels high 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 Primary Image: 504 pixels wide x 335 pixels high 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 Primary Image: 335 pixels wide x 504 pixels high 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
  • 4. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 3 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. Specs / Best Practices + Dimensions: 160 pixels wide x 160 pixels high Profile Photo 160 pixels 160 pixels
  • 5. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 4 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. Specs / Best Practices + Dimensions: 40 pixels wide x 40 pixels high 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. Specs / Best Practices + Dimensions: 105 pixels wide x 105 pixels high 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
  • 6. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 5 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. Specs / Best Practices + Dimensions: 504 pixels wide x 504 pixels high 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
  • 7. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 6 Specs / Best Practices - Two Vertical Images + Dimensions: 251 pixels wide x 504 pixels high (each) Specs / Best Practices - Two Horizontal Images + Dimensions: 504 pixels wide x 251 pixels high (each) 251 pixels 251 pixels 504 pixels 504 pixels 504 pixels 251 pixels 251 pixels
  • 8. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 7 Specs / Best Practices - Two Square Images + Dimensions: 251 pixels wide x 252 pixels high (each) 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 251 pixels 251 pixels 252 pixels 251 pixels251 pixels
  • 9. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 8 Specs / Best Practices - Three Images with Vertical Primary + Dimensions: 251 pixels wide x 504 pixels high (primary image) 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 251 pixels 251 pixels 167 pixels 166 pixels 165 pixels 167 pixels 167 pixels 504 pixels
  • 10. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 9 Specs / Best Practices - Four Images with Horizontal Primary + Dimensions: 504 pixels wide x 335 pixels high (primary image) 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 + Dimensions: 335 pixels wide x 504 pixels high (primary image) 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 167 pixels335 pixels 504 pixels
  • 11. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 10 Specs / Best Practices - Four Square Images Primary + Dimensions: 251 pixels wide x 251 pixels high (each) 251 pixels 251 pixels 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. Specs / Best Practices + Dimensions: 484 pixels wide x 252 pixels high 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 251 pixels251 pixels 251 pixels251 pixels Other Dimensions
  • 12. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 11 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. Specs / Best Practices + 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. Specs / Best Practices + Dimensions: 504 pixels wide x 283 pixels high
  • 13. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 12 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. Specs / Best Practices + Dimensions: 111 pixels wide x 74 pixels high 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. Specs / Best Practices + Dimensions: 784 pixels wide x 295 pixels high 111 pixels 74 pixels 784 pixels 295 pixels
  • 14. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 13 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. Specs / Best Practices + Dimensions: 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
  • 15. © OVERDRIVE INTERACTIVE | 2014 | www.OverdriveInteractive.com 14 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.