DesignerNotes

From Facebook Developer Wiki

Jump to: navigation, search

Important: This page was not written by Facebook and so may contain inaccuracies.


This page collects information relevant to designers in respect to developing facebook applications.

Facebook allows you to develop applications that integrate in various ways with the user interface that both users who install the application will see as well as friends of these users will see.

To get familar with the different integration points, the Anatomy of a Facebook App is a good start.

Contents

Facebook Content Areas

The Profile Box

The content within the profile box is cached on Facebook's servers. This content must be explicitly written to each user as they authorize/install your application and therefore can be unique to each user. There is a special FBML tag, fb:ref that you can use to globally reference cached content allowing parts of the profile box to be the same for each user, while other content remains unique. Changing Profile Content

    • Flash
      • The profile box can contain Flash content but it will not start unless a user clicks on it first.
    • Locations
      The user can drag and drop your application's profile box on the boxes tab of their profile or page to one of two columns, or move it to their wall tab.
      • Boxes Tab - Wide Column
        • Limited to 380 pixels wide (no height restriction)
        • Content within the fb:wide FBML tag will only be displayed when the profie box is in the wide column.
      • Boxes Tab - Narrow Column
        • Limited to 184 pixels wide (no height restriction)
        • Content within the fb:narrow FBML tag will only be displayed when the profie box is in the narrow column.
      • Main Profile - Next to Wall
        • Limited to 184 pixels wide and 250 pixels tall

Canvas Page

  • 760 pixels wide
  • NOT CACHED - This is not cached on the facebook servers it can either be in an IFrame or Embeded FBML content Read More
  • Users view this page at http://apps.facebook.com/[your app name]
  • Defined by your Canvas Callback URL in the application setup


Application Tab

  • Full Details
  • 760 pixels wide
  • NOT CACHED - This is not cached on the facebook servers it can either be in an IFrame or Embeded FBML content Read More
  • Displayed on user's tab strip or a page's tab stip, a maximum 6 tabs can be displayed before being added to a + (More Tabs) drop down.


Info Tab - Application Info Section

  • Full Details
  • Cached on Facebook's Servers
  • Can only be installed on a user's info tab, not a fan page info tab.
  • Two Types of Content:
  • Interaction Sequence:
    1. Application calls profile.setInfo to write content to the user's profile (not displayed)
    2. Application calls profile.setInfoOptions to set the available options across all users application info sections for your app.
    3. User clicks on button rendered by the <fb:add-section-button section="info" /> FBML tag to authorize the content to be displayed on their info tab.
    4. User sees the content that you've set from step 1
    5. User can change their content, after doing so you can be notified from facebook with their changess by a call to your page set in the applications settings under Profiles --> Info Section --> Information Update Callback URL

Icons/Logos

  • Small Application Icon
    • 16x16 - Transparent Gifs Recommended
  • Application Logo - Diplayed in Application Direcory
    • 75x75 - GIF,JPEG,PNG
  • Profile Picture - maximum of 200x600 user FQL table

Feed Forms and Publishing to Stream

  • Permissions -
  • Stream Publishing
    • Similar to Short story templates (see below) but more flexible as they are not template based, content can be created on the fly, the publish stream permission must be granted by the user before this API call can be used.
    • To publish using Feed forms, call Facebook.streamPublish or FB.Connect.streamPublish
  • Feed Templates
    • Details:
      • When writing to a user's profile templates may be used, these must be published to facebook before using them.. Facebook will cache these. They contain tokens which you will replace with text when publishing (i.e. {*actor*} just scored {* score *} in XXyy game.. can you beat <fb:pronoun uid="actor" useyou="false"/> score? ) would become ( "Susan just scored 1234 in XXyy game.. can you beat her score?" )
      • Templates are not required unless you use the older feed.publishUserAction method. If you use the various Open Stream API methods (stream.publish, Facebook.streamPublish, and FB.Connect.streamPublish), templates are not needed to create Feed stories.
    • Types:
      • One line stories - text only - max width 500 pixels
      • Short Stories
        • Requires user authorization if your application will publish short stories on their behalf.
        • Contains both a title template and body template.
        • Can contain up to 6 images 100,110, or 130 pixels wide by 100 pixels tall or a Flash file.
  • Publisher Box - A real time call to your server. (Not cached on Facebook)
    • The Publisher is displayed on user's profile or when user visits a friend's profile (two separate publishers)
    • Types:
      • Publish - for creating content on a friend's profile.
      • Self Publish - for creating content on a user's own profile.
    • Dimensions:
      • We recommend that your Publisher use a fluid layout, not one bound by fixed widths.
      • 420 pixels wide with max of 700 pixels high on user's profle
      • 436 pixels wide with max of 700 pixels high on home page

Off Facebook

  • Facebook Widgets
    Allows you to put facebook content on sites other than facebook.
    • Personal
      • Profile
      • Photo
    • Business
      • Fan Box
      • Live Stream Box
      • Page Badge

Other Related Information

Design Guidelines

Retrieved from "http://wiki.developers.facebook.com/index.php/DesignerNotes"
reference