How Timeline for Facebook Pages Impacts Page Tabs

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:

  • ahugessen

    Hi David, thanks for this.

    Having a little trouble changing the CSS to accommodate the new width. I created a test image 810 wide and uploaded to page … added the code in the css but now shows the image cut-off.

    Here is what the first few lines of my CSS look like:

    body { width: 810px;}body{background:#fff;font-family:”lucida grande”,tahoma,verdana,arial,sans-serif;font-size:11px;color:#333;margin:0;padding:0;border:0;text-align:left;direction:ltr;unicode-bidi:embed;}html .mceContentBody, #content {padding-right: 10px;}

    Also, it did not take the full height of the page. The bottom was cut off with no scroll options. Do you know if we will now have limited height to work with?

    Thanks

    • http://www.carrcommunications.com David F. Carr

      I haven’t done a test to make sure that the resizing JavaScript works. I’m assuming you have the checkbox to resize content checked in Facebook Tab Manager, correct?

      As for page width, I had to experiment with a few combinations of settings before I found something that worked.

      • Justintschaeffer

        I too am having the issue of the shortened page while the checkbox for resizing is checked. David, can you help with this? 

        • http://www.carrcommunications.com David F. Carr

          Please share a links for the Facebook tab as well as the url on your domain. I know the resizing is working on my own pages, but I’ll try to help track down the problem.

          • Justintschaeffer

            actually now that I check it is working. I guess I had to give it some R&R.  

          • http://www.carrcommunications.com David F. Carr

            Almost worse sometimes when things kind of “fix themselves” and you never know if the problem is really solved. Always possible it was a browser caching issue, if you didn’t have the resizing option checked at first and then didn’t get a full page refresh after you turned it on.

          • Brett

             David, I’m having the same issue of the page bottom being cut off since the switch to Timeline. I’ve updated to the current version of Tab Manager and checked the Resize box. The tab is at https://www.facebook.com/TheSuccessLoop/app_170178199725892, and the domain url is https://selectivesocialmedia.com/fbtab/success-loop/ . Width is set to 520 on both the app and the Tab Manager page.  Any ideas?

  • ahugessen

    EDIT – There is an option on the Developers page asking if you want to go 510 or 820 and clicking 820 fixed the first problem. Seems the height of page is still restricted though.

    • http://www.carrcommunications.com David F. Carr

      The resizing JavaScript provided with Facebook Tab Manager is still working in my tests. Resizing is a checkbox option in the fbtab editor (just so you’re not loading unnecessary code on your page tabs when they don’t need resizing). I wasn’t clear from your post whether you’re new to Facebook Tab Manager or someone who has been using it for a while.

  • ahugessen

    Yes, I am familiar with the plug-in and have been using it for a while. I just noticed that you mentioned the need to alter the CSS but that seems to not be necessary because of the radio button option (520 px or 810 px) on the developer page – at least that is how it is working for me.

    Regarding the height of the page – No I had forgotten to hit the re-size option

    Today, while trying to re-test, it seems that any changes I make are not appearing even something as simple as toggling the “show page name”. I’m wondering if others have having the same thing and this is a FB issue?

  • ahugessen

    Update – seem to have figured it out. Yes, the height issue was fixed with the resizing.

    Regarding the “no edits showing up” thing. When I looked at my Facebook Tabs in my WP dashboard it seems that a duplicate was created (?) when I edited that one the changes showed up.

    End result is that everything looks to be working fine – thanks for keeping everything current

  • Betholsondesign

    Thank you for this! I was worried about how timeline would mess with the old tabs. This makes me feel much better :)
    cheers

  • Danny Herran

    Thanks for the technical explanation. Was kind of scared about this. As usual, Facebook hides the documentation the best they can.

  • http://www.carrcommunications.com David F. Carr

    Update from FB developer relations on the page refresh after like bug: “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.

    You still won’t be able to set a default tab for your page, but if you can drive traffic to a tab with a link or with an ad, you will be able to show your “like this page for my special offer” message and have your super special content appear after the page refreshes. FB Tab Manager should work fine for this purpose, once they get that ironed out.

  • http://www.carrcommunications.com David F. Carr

    Here’s my follow-up article for Information Week’s The BrainYard

    Facebook Page Welcome Tabs: Big Loss Or Good Riddance? – The BrainYard – InformationWeek http://bit.ly/wMGPgg

  • justin schaeffer

    I have a really simple beginners question, I’m in the developer tool and I see no place to insert canvas urls like you mention above to make the app appear when using timeline for pages. Any thoughts? 

    • http://www.carrcommunications.com David F. Carr

      The current UI includes some panels that expand and contract. If click on the section labeled “App on Facebook” you will see the blanks for the canvas parameters there. The tab urls go under “Page Tab”

      Facebook user interfaces are subject to change without warning, of course, but that’s what I see today.

  • http://www.carrcommunications.com David F. Carr

    See this update – Facebook Tab Manager Update for Timeline Pages – on support for 810-pixel-wide tabs
    http://tabmgr.com/blog/2012/03/17/facebook-tab-manager-update-for-timeline-pages/