Timeline For Facebook Pages Takes Getting Used To

Facebook has officially announced Timeline for Facebook Pages, giving developers and designers 30 days to make adjustments before the change becomes mandatory.

Having recently been tinkering with The BrainYard page at www.facebook.com/thebyard, trying to build it into the community resource it ought to be for readers, I took the jump and activated the new Timeline, after scrambling to make some quick changes. Although existing page tabs will display under the new layout, they are displayed differently, and there are several design and setup changes to be made.

Timeline for Pages looks great in the video Facebook released announcing the change, and on some of the pages whose designers got an early heads-up such as those for The New York Times, Lance Armstrong's Livestrong organization, and NBC's Today Show.

However, the Facebook Developers discussion thread on the changes is filled with more complaints than praise. Businesses that have been working with Facebook integration partners such as Buddy Media and Vitrue should have a smoother transition because those firms have been included in development preview briefings and have already made adjustments to their products. The challenge will be for organizations and individual developers who didn't have that access to quickly come up to speed.

One of the ways Facebook Page owners used to entice people to click the Like button on their pages was by defining a default page tab, usually displaying an image and message urging people to like the page in order to get access to subscribers-only content. After the visitor clicked the button, the page would refresh, displaying that special content. With the new design, those welcome pages are no longer supported.

Adjusting to the new design also requires some changes. Here is how the BrainYard page looked pre-Timeline:

by_home_old

And after I initially turned on the preview:

bytimeline1

Note that the menu of tabs on the left-hand side of the page is gone. Instead, tabs are represented by the row of four icons at the top of the page. Photos is always shown as the first icon, but you can rearrange or select the others.Note that I now have a generic icon for the BrainYard Stories tab, whereas before I had a small image of the colored ball icon used in our logo next to the tab. Fixing this required adding a larger image (which previously only used to be used for content displayed as an "app" rather than as a tab).

For example, the screenshot below is from a custom tab I registered to display clips of my work. Note that the small scissors icon is set, but the larger one isn't--until now, it didn't need to be.

app_icon

Now here is what that custom tab for displaying a list of headlines looked like, pre-Timeline:

by_tab_old

Here is what it looked like after activating Timeline, before making any other changes:

by_tab600

Note that most of the wrap-around Facebook content is gone, leaving the app floating, centered in the middle of the page with a lot of white space all around. Facebook tabs used to be limited to a 520-pixel width, but now they can be displayed as wide as 810 pixels. Designers will probably welcome having more room for larger images and other custom content, but initially the transition could be awkward.

The technology Facebook uses to embed apps and page tabs is the HTML iframe, a technique for embedding one Web page inside another. Apps and page tabs are registered using a developer tool on the Facebook website, where the developer records the URLs of the Web pages that will be referenced. When a Facebook user navigates to a tab, the website generates an iframe to contain the content from that external application.

There is now a radio-button setting in the app registration tool that lets you toggle between the 520- and 810-pixel widths for the iframe. Initially, your tab will still be displayed within a 520-pixel wide iframe, with that frame centered on the page. Here is the same tab in the 810-pixel layout.

by_tab2

Here is how my initial redesign of this Facebook page came out, with the tab icon fixed and a cover image added.

bytimeline2

This could still use some love from a professional designer, but it's workable for now.

Attend this Enterprise 2.0 webcast, Rebalancing The IT-User Relationship: The Business Value In Consumerization, and learn how the consumerization of IT will ultimately help organizations drive innovation and productivity, retain customers, and create a business advantage. It happens March 7. (Free registration required.)