New Design Tabbed Profile
From Facebook Developers Wiki
Contents |
[edit] The Tabbed Profile
In order to make it easier to read, navigate, and communicate on users' profiles, we've organized the profile into a set of tabs. We've also given users the ability to add application-specific tabs, so they can feature their favorite applications and personalize their profiles.
Tabs appear below the user's name. By default, there are four tabs: Feed, Wall, Info, and Photos. Users cannot delete or rename these tabs. The Feed tab is the default tab to appear when a user views a friend's profile. The Info tab is the default when a viewing a non-friend's profile.
Up to six tabs can be displayed on the profile before being added to a >> (More Tabs) drop down.
[edit] Application-Specific Tabs
Users can create new tabs to feature applications they want to highlight. Each tab can feature one application, and each application can only have one tab.
An application tab is 760 pixels wide.
Each application tab has a label. The labels are text only; a favicon cannot appear on the tab label at this time. By default, the tab uses the application name as the label, truncating the label after approximately 15 characters (depending upon the letters used). You can provide a shorter name if you want, and users can rename an application tab inline on the profile.
Application tab labels must adhere to Facebook Platform Policy, in that they cannot be deceptive and do not use Facebook element names. For example, a Wall-like application cannot use the name "Wall" as its label.
You register an application tab on Facebook by specifying a tab URL in your application settings. This is a URL relative to your application’s canvas page. Once a tab URL is registered, the application appears in the plus (+) menu for adding a tab as soon as a user accepts your application’s Terms of Service.
Application tabs are slightly different than canvas pages. When a user first goes to a tab, it is in passive mode. This means applications cannot autoplay Flash or onload JavaScript. Once user interacts with the tab – like clicking the Flash object, the page becomes active, so it can play Flash, execute JavaScript, and so forth.
For the best user experience, use a requirelogin link instead of redirecting back to the login page. Use "requirelogin=true" in an <a> tag or any other tag.
[edit] Application Tab Behavior
Application tabs behave like a hybrid of a canvas page and a profile box. A tab has the following properties:
- It fetches data from its application servers.
- It can load AJAX.
- It doesn't know who the viewing user is, unless the viewer is the owner of the profile.
- Applications use the owner's session key on the owner's application tabs.
- If a user is viewing another user's application tab, the application is granted a read-only session so Facebook can fetch the tab information and generate the page. Because it's read-only, the application cannot post Feed stories for viewing the tab, and can't modify any data for the user who owns the tab.
- If a viewing user submits a form on an application tab, that user's UID is sent to the application, but that user's session key is not.
- Applications cannot autoplay Flash.
- Applications cannot onload JavaScript.
- Applications cannot use iframes on tabs.
- Absolute URLs on a tab take the user to your application's canvas page.
- Relative URLs are treated as if they are relative to your home canvas page and AJAX-loads in the tab.
[edit] Installing a Tab
Only users can install new tabs, and on their own profiles there is a >> (More Tabs) menu that includes all applications recently used that have tab support and an option to add a Boxes tab if they do not currently have one.
[edit] The "Boxes" Tab
The "Boxes" tab contains application profile boxes. A user will have a "Boxes" tab added to their new profile by default if she currently has application boxes that do not support integration with the main profile left column or if she has more profile boxes than can fit into the main profile left column (more than 5).
A user can install new profile boxes on the "Boxes" tab later if the application wasn't pre-installed already. The user can do this directly from the "Boxes" tab or can move any profile section from the main profile to the "Boxes" tab with the edit capability. To do this, the user must add a profile box to the main profile, then use the edit capability to move it to the "Boxes" tab. You create a new profile box on the main profile by calling profile.setFBML and passing the profile_main parameter.
The "Boxes" tab retains the existing fb:wide and fb:narrow dimensions, so your existing profile boxes will work with the new design without making any changes.
