How to Design a Facebook Timeline for Business Page

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.

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.

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

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. 

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! 

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.

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"

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)