Note: portions of this post (minus the details specific to Facebook Tab Manager) were published as a report for Information Week’s The BrainYard.
Facebook has just 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 https://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 today, 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 celebrating 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 the NBC’s Today Show. However, the Facebook Developers discussion thread on the changes is filled with more complaints than praise.
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.
You can still set a tab to show different content to people who have and have not liked a page. However, if they click the like button, the page does not automatically refresh to show the fan content. There is a bug report that’s been filed on this. , but I’m not sure Facebook will acknowledge this as a bug or if it’s how they want things to work now. Or maybe it will emerge that there’s some bit of JavaScript you can add to your page to get the refresh-on-like behavior. No one seems to have the answer on this yet. Update March 2, 2pm ET: FB developer relations now says: “This is a bug and the fix should be in soon. Thanks for your patience!” So it wasn’t intentional after all, or if so they changed their minds.
Adjusting to the new design requires some other changes.
Here is how the BrainYard page looked pre-Timeline:
The BrainYard page pre-Timeline
And after I initially turned on the preview:
The BrainYard Page with Timeline layout
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, where 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 screen shot 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.
The larger icon must be set
IMPORTANT: Another thing you will need to set through the developers utility — which didn’t necessarily used to be important, but now is — would be the urls for the app or canvas display of your content. When I first turned on the Timeline preview for the BrainYard page, which included a tab for which I hadn’t provided the parameters, the tab did not display when I clicked on the icon for it. Then, when I tried to turn off Timeline preview, I found that the tab was no longer displayed on the menu in the old layout. Adding the canvas url parameters on the form and saving my app again cleared up that problem.
There is some history here. When Facebook introduced the current iframe-based incarnation of page tabs, you were always required to specify the url for the app canvas first because the tab content was registered as if it were a file or a directory beneath the level of the canvas. So the url to your tab content had to be something like site.com/fbtab/canvas/tab/. A few months later, the app registration tool was redesigned to allow the app and the tab to be defined as two independent urls.
Facebook Tab Manager was designed to support the same content being displayed as either an app or a tab, and the instructions displayed in WordPress always provide the parameters for registering an app canvas version. However, I personally have gotten out of the habit of entering those parameters when I’m not specifically planning to display the content as anything other than a tab. It just wasn’t important. Now, it is.
Here is what that custom tab for displaying a list of headlines looked like, pre-Timeline:
A custom tab in the old layout
Here is what it looked like after activating Timeline, before making any other changes:
Existing tab in the new layout
Note that must 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.
A custom tab with initial CSS tweaks
Because Facebook Tab Manager sets a width on the body element to prevent scroll bars from being displayed, I had to override the default css by adding this code in the CSS styles field of the Facebook Tab Manager post editor.
body { width: 810px;}
Update 3/17/2012: Wider tabs are supported without this workaround in version 3.2.
Here is what my initial redesign of this Facebook page came out, with the tab icon fixed and a cover image added.
Initial redesign
This could still use some love from a professional designer, but it’s workable for now.
References:
