How to Design a Facebook Timeline for Business Page

by Sunforged

Image specifications, formats and uses of the new features created by the Timeline for Business Pages at Facebook

What are the dimensions for the cover image for Timeline for Business pages?

How to set featured apps and set custom images to appear, can we still fangate and other pertinent questions answered within.

A complete guide on how to visually brand a Facebook page in the timeline format.

Screenshot of Completed Facebook Timeline for Business and Fan Pages
Screenshot of Completed Facebook Timeline for Business and Fan Pages

Anatomy of a Facebook Timeline for Fan Pages Layout

Many of us have had to scramble before to keep up with the Facebook changes, the retirement of FBML and the creation of Open Graph destroyed many Facebook Brand and Fan Pages. Then just when we successfully redesign and re-implement strategies under that protocol, Facebook makes the additional change of requiring a SSL certificate for all Facebook tabs and canvas apps.

So, it really is no surprise that Facebook has decided to shake up the climate yet again.

For the purpose of this tutorial I will assume you have familiarity with the personal timeline options view by now, I realize some are still hiding out avoiding that change but as a FB Developer I have had the Timeline view enabled on my personal account for nearly 5 months at the time of this publication (3-1-12) and a great amount of material already exists on the net to assist you with the rather intuitive new features

 

The visual layout of the Timeline for Brands and Fan pages is made up of 3 main features.

  • Cover Image
  • Profile Image
  • Featured Apps

Additionally, the About details and your featured stories can be utilized in your design.

Creating Your Cover Image for Your Fan Page

In my opinion, the best Facebook Timeline for Business designs will integrate all the customizable features into a comprehensive and unified design.

 

The largest part of this design will be your COVER IMAGE


The official image specifications for a Facebook Timeline for Brands cover image is:

 851px x 315px

You can design with a larger image if you like as one can move the cover image around a bit to get the positioning you desire. But, I prefer to use the exact dimensions in case I want to integrate the profile image into the Cover image seamlessly.

 

Caution: Restrictions on content in Facebook Cover Images

Facebook has made specific restrictions on what is contained in a cover image:

"Cover images must be at least 399 pixels wide and may not contain:

  • Price or purchase information, such as "40% off" or "Download it at our website"
  • Contact information, such as web address, email, mailing address or other information intended for your Page's About section
  • References to user interface elements, such as Like or Share, or any other Facebook site features
  • Calls to action, such as "Get it now" or "Tell your friends"" 

     

 

With that in mind, have fun and create an image that is eye catching and informative about your Brand or Service.

At the conclusion of this tutorial I have included a .jpeg that you can download and use as your template in a basic photo editor such as Paint and a more advanced Photoshop .psd that has all the parts of the cover image broken into editable layers with a mockup layer that shows where the profile image will appear.


Brand Page before starting edits for Timeline view

New Facebook Brand Admin Page before entering Cover Image
New Facebook Brand Admin Page before entering Cover Image

Create Your Profile Picture for Your Design

What are the specs for Facebook Timeline Profile Images

It is not necessary to directly integrate your Profile image into the design of your cover image, keep in mind that Facebook now allows you to make comments and interact with other Brand, Fan and Business Pages as your brand, so it is probably more useful to have an image that will work well in that smaller format when you leave comments and such on other pages.

 

The official specs for a Facebook Timeline PROFILE IMAGE are: 

  • Display Size: 124w x 125h 
  • Minimum upload size: 180 x 180

Selecting Your Featured Apps

If you look at the picture above that I snapped before starting any edits to the Facebook timeline design, you will notice the line of thumbnails showing a, QR code, a thumbs up, text preview and a stock Facebook image and a small down arrow with the number 2.

These were my photos, likes, notes and pre-existing custom apps, in that order.

With the new timeline view one can control what featured apps appear and can even change the main thumbnail. Only the "Photos" tab is not movable and the image for "Likes" cannot be replaced..

Change your Featured Apps: What Apps Appear.

When in edit mode, the featured apps are very easily changed. Simply click the down arrow and drag and drop as you see fit or click the small pencil/edit icon that appears and use the options to switch around the apps.

If you had previously had a default tab for fangating or increasing your likes, be sure to keep that as  a top app. 

Set your Featured Apps to show Custom Images

These featured apps (with the exception of Photos and Likes) can be configured to show custom images in the tabs.

 

The official specs for Facebook App Custom Tab Images are: 

111px x 74px 


When composing my design, I paid no attention to any required size and was auto-sized in a way I consider acceptable. But, those are the spec if you want them.

This is where the game is still to young for me to make any recommendations, that little tab is now one of the sole places to attempt a Call to Action and get eyes on what used to be your "Fan Gate or Like Lock" . So try and create something that can really draw a click in I guess! 

 

The Death of Fangating?

How tabs are featured and used in the new design for Facebook Timeline Fan Pages

One can no longer set a default tab to create a squeeze page for Like Locking and Fan Gating, but that may not mean an end to the practice.

I do partly assume that part of this design change was to discourage that practice, for the most part viewers on the net dont like content locking and this exacerbated by the use of such practices by low quality products and misleading marketers.

In your own editorial content you can still link directly to an app page. (Other than changing the size I have not yet customized this tab to fit the new creatives)

For example:

Read more at HubsAcademy on Facebook (just click and open in new browser tab to see new app tab format)

The app "tabs" are now much large and more complex designs can be created.

Since, public and private content can still be set for Fans and Non-Fans, Fangating can still be utilized by Brands that desire such a promotional method .

The new official specs for Facebook Tab Pages are: up to 810px in width this includes 8px side margins so your actual design should be a maximum of 794px wide.

Pin a story to feature it at the top of your timeline

You can select any story or image from your timeline and "pin" it to the top. This will stay in place for a week. Which gives you further opportunity to utilize a clever graphic or post to inspire whatever interactions you desire your fans and visitors to partake in.

How to pin a story to the top of your timeline:

Select a story in your timeline, hover over the top right corner (pencil icon will appear) ->click edit or delete -> select "pin to top"

Edit your Featured Likes

Manage what appears first in your timeline view

In your Facebook Timeline view the top right section of your page will show a "Like Box" you can edit what "Likes" are showcased there by heading to:

Admin Panel -> Edit Page -> Featured (in left sidebar) 

About The Author

Joshua is a Partner at Xobba.com, an online news source created to showcase online writers and teach the wordpress platform and basic seo and social media marketing practices in a hands on and cooperative manner.

He also runs a small boutique Hosting and Wordpress Customization Business at iHostpress.com

The Facebook Page used for this design tutorial is an open community devoted to showcasing,sharing and discussing concepts in SEO, Marketing, Design and Copywriting from authoritative resources.

He also provides custom Facebook Design Services via his business, Sunforged Media Group , with prices starting at as little as $97 for a custom Facebook solution.

Become a Facebook Pro Developer

A VERY Marketable skill
Facebook Application Development with Graph API Cookbook

Only $44.99
Updated: 04/19/2012, Sunforged
 
Thank you! Would you like to post a comment now?
11

Comments

Only logged-in users are allowed to comment. Login
Sunforged on 04/19/2012

@Moneymind - at this point it would be quite a foolish decision to ignore the market dominance held by Facebook. The correct answer, is actually, one should ALSO create a Google+ page for your business (and Twitter, and LinkedIn, and GooglePlaces etc)

In fact. I began a similar article for designing Google+ business pages under the new design options (which I don't even think existed when you originally commented) , I will finish it up shortly and link to it here.

themoneymind review on 04/06/2012

The facebook timeline is messy and buggy. Considering to move to google+.

Blog Designer Jen on 03/31/2012

This has been incredibly useful. I appreciate the effort that you went through to clairify the changes of the facebook timeline. I have so many apps installed and I was dreading the process but you explained it all perfectly. Thanks again!

Sunforged on 03/20/2012

Hi Sherrie,

Yeah, the example site is, well a site, so I consider the .com to be part of the actual brand name. So, I translated the cover requirement of "no web address" to mean a URL and using just a domain name to be acceptable.

This is still untested waters and FB doesnt have much of a track record of policing pages for trivial issues such as this one. So I took the route that fit my needs. If I was working on a client project, I would probably suggest to play it a bit safer and just take out the TLD.

So in short, I have no idea if its ok with FB, which is why I posted the exact FB language of the requirements rather than try to create my own (possibly flawed) translation.

Sherrie Wirth on 03/20/2012

Hi there! Thanks so much for this walk-through. It is a life saver.

I have a quick question though...I am confused about the rule that you can't use a web address in the cover photo. My company name includes .com (ExhibitSticker.com). I see that yours does too and that you have used it in your cover photo. Is that o.k. with FB? I sure hope so!

brlamc on 03/08/2012

Excellent information here.

KathyMcGraw on 03/07/2012

This was valuable to me as I had no idea how to convert my FB page. Hopefully I can follow your directions, but sure wish they had just left well enough alone!

Sunforged on 03/07/2012

@Wayne,

Finding the time to integrate Social Media into your presence is highly suggestible. It may not be much more than a frill for many who are just aff marketers flogging other peoples products, but when you create your own products, have a true fan base and create original quality niche content such as you do , I think it is a high priority and proper promotion tool for one such as yourself

Sunforged on 03/07/2012

Across the various types of Facebook Layouts, FB has made interface changes that make the site more uniform.

First Personal Timelines, then new apps and a dev option to use the timeline style with web pages (ala Pinterest,Spotify, Social readers) .. now the Business/Fan page change, you might have noticed that even groups now have the option for a "Cover Image"

I saw today that there is an option for a desktop Facebook Messenger plus FB gave us all email addresses on the last change , the FB app is one of the, if not THE most used phone app for iOs and android - they def are following the google model of infiltrating every platform and aspect of your online, mobile and computing life!

I also like these changes, I hate that I have to redesign around 40 pages of my own and much of my customizations are out the window, but you know, "Adapt or Die!"

katiem2 on 03/07/2012

I meant a lot of sites are following the old facebook setup, now facebooks changes :) good!


You might also like

Chef Keem - who the hell is he?

Chef Keem is online, that's for sure - would over a half million Google searc...

Building A Personal Brand

If want to improve your career, be recognised as an expert, succeed as an onl...


Disclosure: This page generates income for authors based on affiliate relationships with our partners, including Amazon, Google and others.
Loading ...
Error!