Application Info Sections
From Facebook Developer Wiki
The Info tab on the profile allows users to express their interests in a more structured way than before. The tab includes standard Facebook profile data such as contact information, user interests, and school/work histories. Additionally, users can add structured information from applications using application info sections. An application info section is a list of text and/or images provided via an application.
An application info section is 540 pixels wide, which includes padding. Height will be limited by number of items displayed (if displaying image blocks) or by text length (approximately 5 lines per field of data).
Note: These height limits may change.
Each section is identified by a bold text header. The header contains up to 25 characters and cannot contain punctuation, and your company name (if provided) appears next to the section header in parentheses in lighter text.
If there is more content in an application info section than Facebook can display inline, Facebook renders a See All link (and/or a See All icon) in the right margin. In addition, an Edit link and/or Edit icon will appear next to the See All link when applicable.
Contents |
[edit] Formatting the Application Info Section
Each application info section comprises a series of fields (like favorite book, friend, or band), where each field can contain one or more items. Items can be text-only or images with titles and descriptions.
Fields are proper-cased by Facebook. Facebook enforces that each key string must end in a colon (":").
Fields have a character limit of around 30 characters. It’s a good practice to ensure that keys don’t wrap onto a second line.
Your application can have as many fields as you want, and only the fields that a user has selected are visible in the profile. The others are made visible for editing when the profile owner edits that section in profile.
The item associated with the field can be text or an object. An object consists of a thumbnail image, with or without associated text.
[edit] Text-Only Info Sections
Text-only info sections are freeform text fields that the user enters in CSV form (similar to editing interests on the profile today). When the user saves the information, Facebook sends the data back to application. The application has to convert the data to field tokens, hyperlink them, then sends the hyperlinked fields back to Facebook.
Text items are entered free form into a text area when the profile owner is editing inline. There is a limit of approximately 5 lines per field before a See All link appears.
For object items, the field must be displayed to the user and indentation should be same as for text items so that they are all aligned. Objects are represented with a combination of an image and/or text and link directly to an object within an application.
[edit] Object Info Sections
Object info sections contain only a single field and an array of info_items. The field is the title for the items and can contain up to 30 characters. The info_items array contains the following items:
- label – the label for the item that appears on the profile.
- link – a hyperlink associated with that item.
- sublabel – additional information about the item in smaller text below the label. For example, in a field of My Favorite Books, the label could be the book title and the sublabel could be the book author.
- description – a description of the item.
- image – an image of up to 50 x 50 pixels associated with the item. The images should either be square or fit the golden ratio. Facebook will resize or deal with images gracefully that don't fit these dimensions.
The label and link are required, and the remaining items are optional. The image below illustrates an application info section that uses objects. All the info items are listed.
Objects can be represented only in a new line-separated list (that is, one object per row). The object name is one line of text (roughly top-aligned, padded slightly) and the optional description can be a second line of text.
You cannot combine Object (type 5) and Text (type 1) into the same info section. If you have any field that is a type 5, it will be displayed and none of the text fields will be shown.
[edit] Installing an Application Info Tab Section
The user adds a new section by visiting an application’s canvas page and clicking the Add to Info button that the application can place onto their page via the <fb:add-section-button section="info" /> FBML tag. The Add to Info button will only appear if the application has already called profile.setInfo and set info for that user. We recommend you call profile.setInfo after the user has entered enough data for your application to be able to make a compelling info section.
If the user already has an info section from the application, the Add to Info button will not appear on that application’s canvas page.
[edit] Editing Info Sections
Users can edit info section values inline. When users edit a thumbnail section, they can select objects to appear in their info section by using a typeahead containing items the application previously set as options ("items"). For example, an application listing college courses would have a pre-populated list of courses. As with text-based info sections, when the user saves the information, Facebook updates the application. A user can also delete fields and items.
A typeahead selector allows for adding specific values or objects inline. You should provide Facebook with a list of all available objects which the user can then select to add to their info section. You should also provide a callback URL (the Information Update Callback URL on the User Profiles tab in the application settings editor) so Facebook can tell you which objects were added. Updates occur inline without the user having to reload the page.
[edit] Application Info Section API Calls
For information about the new API calls for the application info sections, read the following:
- profile.setInfo: Configures an application info section that the specified user can install on the Info tab of profile.
- profile.getInfo: Returns the specified user’s application info section for the calling application.
- profile.setInfoOptions: Specifies the objects for a field for an application info section. These options populate the typeahead for a thumbnail.
- profile.getInfoOptions: Returns the options associated with the specified field for an application info section.
