Changes in Facebook – Boxes, Tabs, FBML and More

Update: August 10, 2010:
Facebook is previewing the reduced-width application tab changes. See our blog post on the 520px application tab width reductions and the implications.

As many know, Facebook is planning some pretty significant changes in the coming weeks (or thereabouts) that developers really need to be aware of. These are not trivial changes, but significant changes in how information is displayed. Here is the PowerPoint that was distributed earlier in 2010.

The Big Picture….

• Reduced width of tab width from 760 to 520px;
• No iFrames;
• No Boxes, neither tabs nor boxes on the left-hand column of your Wall/Info tab, underneath your Page’s profile picture.

Facebook, in a PowerPoint that’s been distributed and is available here, states:

As part of a larger effort to improve user experience and promote consistency across the site, Facebook will be modifying Page and Profile layouts by simplifying how identity is managed and displayed.

Changes to layout:

• Tab width changing from 760 to 520 pixels [Discussed in a previous HyperArts post]
• Pages will no longer be able to implement iFrames on their Page. All custom content will need to be on a separate, custom tab, which you can add using FBML or a custom application.
• Boxes will no longer appear on Pages or Profiles. This means that Pages will no longer include the Boxes tab, or the Boxes that currently exist on the left-hand column of your Wall/Info tab, underneath your Page’s profile picture. You can move the content that currently exists in Boxes to a custom tab.

And then Facebook gets into some specifics:

Tabs
Tabs help organize the content on a Facebook Page. By default, every Facebook Page has a Wall and an Info tab (which cannot be removed). You can built a custom tab by adding the FBML application to your page and entering FBML code into it, so that it will display your custom content.

Boxes
Small, moveable application Boxes found on the Boxes tab and on the left-hand column of a Facebook Page’s Wall/Info tab.

FBML
Customize a rich, interactive experience on your Page using Facebook’s version of HTML. You can embed Flash animations or add a comments box to your custom experience (more info found on http://wiki.developers.facebook.com/ and http:// facebook.com/facebook-widgets/). The FBML tab can be as wide as 520 pixels and has no restrictions on height.

Fortunately, Facebook plans to warn developers and Page admins that the changes are imminent:

Page Admins will see a preview of what their tabs will look like after the design change, at least 2 weeks prior to launch.

Getting ready is simple:

• Adjust your tab widths
  Make sure all tab content will fit within 520 pixels. Includes native tabs (Wall, Info, Events, Photos, Video, Discussions, Reviews, etc.) & custom tabs
• Remove all Boxes (if applicable)
  Click “Edit Page” and ensure that you have copied the code for any/all FBML boxes. Remove all Boxes from your Boxes tab and Wall/Info tab (underneath page profile picture) by clicking “Edit Box” and then “Remove Box.” Once your Boxes tab is empty, navigate to another tab and the Boxes tab will disappear.
• Create custom content in FBML on a custom tab (optional)
  Move deleted content from Boxes to a new tab on your page by adding the FBML application to your page.
  • Click “Edit Page,” locate the FBML application, and “Application Settings” to be sure the application is configured as a tab. If some of your Boxes were custom applications (not FBML), make sure that the Application Settings enable the application to appear as a tab, then follow the same steps above to convert that application into a tab.
  • Click “Edit” to paste the code from your Boxes into the new tab. Adjust the code to arrange your content within the new 520px tab width.

  iFrames
  Preserving iFrames (on a custom tab)
  If you currently use an iFrame in your page and must preserve the content of one or more of your iFrames: Create a wrapper application that lives on a canvas page. This application can have iFrames since it sits on a canvas page. Have this light weight application include the image of what you want to display, with an “Activate” button. Link the “Activate” button to the canvas page wrapper application. More information here.

How to embed an iFrame application for Facebook

In a discussion on the Facebook Developers Wiki from 2008, this exchange:

“Q: Does [<fb:iframe>] work in FBML boxes on Facebook Pages or Facebook Profiles?
A: No. The <fb:iframe> tag can only be used in an Application Canvas Page — nowhere else with no exceptions.”

On the PowerPoint about the 2010 changes, above, they state: “Create a wrapper application that lives on a canvas page. This application can have iFrames since it sits on a canvas page. Have this light weight application include the image of what you want to display, with an “Activate” button. Link the “Activate” button to the canvas page wrapper application.”

Basically, you can still embed an iFrame in a Facebook application, but not in Static FBML. The JS activator suggested above acts as the “wrapper application” and conforms to their requirements. You have to create an iFrame application to do this. I will be posting a tutorial on how to do this shortly.

Other Resources

Roadmap Profile – Facebook Developer Wiki

Technorati Tags: Facebook, Facebook application tabs, Facebook Boxes tab, Facebook tabs, FBML