Tabbed Profile

From Facebook Developer Wiki

(Redirected from New Design Tabbed Profile)
Jump to: navigation, search

In order to make it easier to read, navigate, and communicate on users' profiles, profiles are organized into a series of tabs. Users and Page admins can add application-specific tabs, so they can feature their favorite applications and personalize their profiles and Pages.

Tabs appear below the user's name. By default for user profiles, there are four tabs: Wall, Info, Photos, and Boxes; for Facebook Pages, there are three tabs by default: Wall, Info, and Boxes (if the Page had any applications installed before March 4, 2009). Users and Page admins cannot delete these tabs. The Wall tab is the default tab to appear when a user views a friend's profile or a Page for which the user is a fan/supporter. The Info tab is the default when a viewing a non-friend's profile while the Boxes tab is the default when viewing a Page for which the user isn't a fan/supporter.

Up to six tabs can be displayed before being added to a + (More Tabs) drop down.


Contents

[edit] Application-Specific Tabs

Users and Page admins can add new tabs to feature applications they want to highlight on their profiles and Pages. Each tab can feature one application, and each application can only have one tab.

An application tab is 760 pixels wide. You can make your canvas pages as wide as an application tab if you want.

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 11 characters. You can provide a shorter name if you want.

Application tab labels must adhere to Facebook Platform Guidelines, 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. The UID of the tab owner is provided to your application with the fb_sig_profile_user parameter. A session key is sent with the fb_sig_profile_session_key parameter. For more information about which parameters are sent to your application, see Authorizing Applications.

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 and Policies

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.
  • 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 interacts with the tab (like submits a form, takes an action that causes an AJAX load of new content, or follows a relative URL that loads on the tab), that user's UID is sent to the application as the fb_sig_profile_user parameter, but that user's session key is not.
  • Applications cannot autoplay Flash.
  • Applications cannot onload JavaScript.
  • Applications cannot use iframes on tabs.
  • Application tabs cannot contain advertising of any kind.
  • 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. (This doesn't currently work, see bug 3324 for details)

[edit] Installing a Tab

Only users and Page admins can install new tabs, and on their own profiles there is a + (Add a new tab) menu that includes all applications recently used that have tab support and an option to add a Boxes tab if one currently doesn't exist.

[edit] The Boxes Tab

The Boxes tab contains application profile boxes. A user or Page will have a Boxes tab added to their new profile by default if they currently have application boxes that do not support integration with the main profile/Page left column or if they have more profile boxes than can fit into the main profile/Page left column (more than 5).

The Boxes tab retains the existing fb:wide and fb:narrow dimensions, so your profile boxes should be formatted to fit in whichever column works best for your profile box layout.

The user or Page admin can move any profile box 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.

[edit] Creating Profile Boxes

A user or Page admin can install new boxes on the profile.

  1. First, create the FBML and other markup for the profile box.
  2. To format a profile box so that can be installed on:
    • The Boxes tab, call profile.setFBML and pass the profile parameter.
    • The main profile (Wall and Info tabs), call profile.setFBML and pass the profile_main parameter.
  3. On your canvas page, render an Add to Profile button using fb:add-section-button. If you provide FBML for the Boxes tab and the main profile, then the user can decide where to place the box.

[edit] Box and Tab Demo

A Facebook application developer has created a screencast demonstrating the profile box and application tab.

reference