How to prepare for the upcoming
Overview of Changes
Timing: Late February
part of a larger effort to improve user experience and promote
consistency across the site, Facebook will be modifying Page and
Proﬁle layouts by simplifying how identity is managed and displayed.
▪ Changes to layout:
▪ Tab width changing from 760 to 520 pixels
▪ 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
▪ Boxes will no longer appear on Pages or Proﬁles. 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 proﬁle picture. You can move the content that
currently exists in Boxes to a custom tab.
Key Facebook Terms
Tabs, Boxes, FBML
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
Small, moveable application Boxes found on the Boxes tab and on the left-hand column of a
Facebook Page’s Wall/Info tab.
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.
3 easy steps
▪ PageAdmins 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:
1) Adjust your tab widths
2) Remove all Boxes (if applicable)
Sample preview of new 520px width on a
3) Create custom content in FBML on Page that hasn’t adjusted its tab widths
a custom tab (optional)
Adjust your tab widths
▪ Makesure all tab content will
ﬁt within 540 pixels
▪ Includes native tabs (Wall, Info,
Events, Photos, Video, Discussions, Currently 760px
Reviews, etc.) & custom tabs
Currently 760px 520px
Remove all Boxes
Step two (if applicable)
“Edit Page” and ensure
that you have copied the code Remove all Boxes
for any/all FBML boxes.
▪ Remove all Boxes from your
Boxes tab and Wall/Info tab
(underneath page proﬁle
picture) by clicking “Edit Box”
and then “Remove Box.”
your Boxes tab is empty,
navigate to another tab and the
Note: If you choose not to remove any Boxes, all Boxes and the
Boxes tab will disappear. Boxes tab will simply disappear the day of the product change.
Move content to a custom tab
Step three (optional)
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 conﬁgured 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.
Preserving iFrames (on a custom tab)
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: http://wiki.developers.facebook.com/index.php/Fb:iframe
▪ FBML: http://www.facebook.com/apps/application.php?id=4949752878
▪ Visit that link, click “Add to Page,” and then select the page to which
you’d like to add the application.
▪ Moreinformation about the changes:
a custom application:
Contact your Account Manager