Transitioning a Facebook Page to Timeline

Design Template for Creating Facebook Page Elements

Facebook will automatically transition all pages on March 30th. Page administrators are advised to be proactive in preparing for the transition now. AF-Design has created a Photoshop template to aid in the creation of Facebook design elements. Using this template, graphic designers will have the tools necessary to successfully present their brand on the new Facebook Timeline. The Timeline has three new elements which are similar to the elements of personal profile pages.

Cover Image: An image that takes over the top of the page. This image has two possible initial views when a user visits the page. Users who have smaller monitors or default browser size will see a shorter version of the cover image. These users need to scroll up to see the entire image. The design template provides a layer and guides for aligning your content to maximize the effectiveness of the page. This image should be 851×315 pixels. Facebook warns about placing promotional content or asking for on site actions such as Like, Share and so on.

Profile Picture: An image that represents you or your brand throughout Facebook. The image should be square and at least 125×125 pixels and fill the frame – Facebook will add any necessary borders automatically. Also note that Facebook uses scaled versions of this image throughout the site, specifically on stories you post to your Timeline and those stories that appear in Newsfeed. Experiment with scaling the image you selected and make sure it still looks “good” at 50×50 for the best user experience.

Favorite Application Icons: Images that convey meaning about important/featured applications on the profile. This is a great way to draw attention to your custom Facebook tabs and applications such Tweets and You Tube videos. These should be 111×74. Facebook will apply a stroke and rounded border to the image.

Download the Photoshop PSD of the Facebook Timeline page to get started.

Preview Timeline

After you have created your visual elements, return to your Facebook page and enter the preview mode for the new profile. In the preview mode, you can upload your creative and ensure everything looks the way you want.

How to Pin Content on Facebook

NOTE: Once you publish your page – your default tab will NO LONGER WORK. While this may be a problem in the short term, this is something you should prepare for now. Facebook will transition all pages automatically. The best way to mitigate this is to add a post to your page that features the tab you want to highlight and Pin it. Pinning is done by hovering over the top right of your content, clicking the pencil and the click ‘Pin to Top.’

Timeline for Pages Publish

After uploading your new creative and making the necessary changes to your profile, and if you are ready to go live – click “Publish” and the new Timeline will show for all viewers!

Congratulations, you’ve successfully migrated to the new Page Timeline! Like us to stay up to date on the latest Facebook changes that affect your Page and your applications and share this post with your friends!

This entry was posted in Facebook, Small Business, UX Design and tagged , , , , , , . Bookmark the permalink.

7 Responses to Transitioning a Facebook Page to Timeline

  1. Deanna says:

    Two issues:

    Based on the information here: http://www.facebook.com/help?faq=125379114252045, the cover image should be 851 x 315. (This article says that the dimensions are 851 x 350.)

    Facebook’s tour of the new page format says that the profile picture should be at least 180 pixels square, but this article says that it should be at least 125 pixels square.

    What gives? Did I read something wrong on FB?

  2. You mention pinning a post with a link to what would have been the default landing tab. Does this mean FB now allows us to post status updates with links to specific apps on the page? They took away that ability several months ago, so that every URL posted was automatically redirected to the page’s wall. Has that changed? If not, by taking away the default landing tab they’ve removed the last way we had of directing traffic to a contest or special promotion.

  3. Erik says:

    Deanna: Thanks for spotting the typo it is 815. I’ve updated the article. The 180 pixel wide image fills the old profile space. There may still be places off Facebook that use the larger image, but the new one is smaller as mentioned above.

    Savannah: Yes, you can post status updates with links to specific tabs. See this article for how the link structure has changed http://af-design.com/blog/2012/02/29/timeline-for-pages-what-you-need-to-know/ – the concept of a default landing page is going away but you can still run promotions and contests that leverage fan gates, you’ll just need to drive traffic differently.

  4. Umair Ulhaque says:

    I got it., but I have a confusion on about profile image is that how can we determine the profile image area while creating our custom cover image.. what amount of pixels (space) we have to leave from the top and left to have a place holder for our profile image?

    Please resolve this.

  5. Erik says:

    The profile image is placed automatically. We provide it for you in the PSD so you can create a nice cover image that doesn’t have key visual elements blocked by the profile image. You can turn off the Interference Elements layer prior to saving your Cover image.

  6. Andrea says:

    Thank you very much for the psd. I am about to create a new Facebook page for our company, and this will really streamline my efforts!!

  7. Thanks so much for this helpful article. I really struggle with FaceBook anyway, and this new layout they are foisting onto us is making my head spin! SO difficult to see the new posts. Whatever possessed them to implement this one? One post below another – simple, logical, very similar to blog layouts. Looking for entries from side to side: visually confusing, cluttered pages – it’s a total nightmare!

    I hate FaceBook anyway (biggest waste of time on the planet along with all the other social networking sites) and only have it because we’re now virtually bullied into HAVING to have it on our blogs. So this has now made a very unpleasant experience a thousand times worse. If I can ever figure out the WordPress.org plugin, it can enter my posts for me and I need never visit my page again.

    I sent feedback and I just hope it’s so negative that they’ll go back to the design table and start again. Sorry if this upsets anyone else – this is just my personal opinion and my personal experience.

    But thank you so much for trying to help!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>