Anatomy of a Facebook App

From Facebook Developer Wiki

Jump to: navigation, search

Contents

[edit] Anatomy of a Facebook Application

A Facebook application can take on many forms. However, to fully utilize the suite of integration points and deliver a full user experience, we recommend integrating your application into the following areas of the Facebook profile:

In the article, you'll see how our sample application Smiley integrates many of these various components. Note that none of these integration points are mandatory, but the more you include in your application the richer the user experience becomes. You can also see another detailed explanation of the various integration points.

You'll specify these integration points when you configure your application.

[edit] Application Directory

Many users may find your application by browsing the Facebook Application Directory. This is where beautiful imagery and concise, descriptive text pay off. You need to submit your application to Facebook so it can be included in the directory.

[edit] About Page

The About page tells users about the application and is accessed from the Facebook Application Directory. It should inspire users to interact with your application. The About page is a Facebook Page.

[edit] Canvas Page

This is the main page of your application on Facebook. Application canvas pages appear within the Facebook frame and can either be FBML or an external Web site presented within an iframe.

[edit] User Dashboard

The user dashboard is usually accessed at the top of the application's canvas page. This is where users manage their own content within an application or see information about another user's content within that application.

To create a dashboard, use the Fb:dashboard FBML tag..

[edit] Profile

The Facebook profile is the online representation of the user's real world identity. We have included many integration points on the profile. This enables you to empower users to express themselves through your application.

[edit] Profile Box

The profile box is usually the place to show the most recently updated information or the most recent actions of the user. This information should reflect how the user would want to represent their identity through your application on their profile.

You create a profile box using profile.setFBML.

[edit] Applications Menu

The Applications menu is where users go to access your applications. They can bookmark applications, edit application settings, and go to their recently viewed and bookmarked applications.

Note: With the new profile design, your application icons appear on off-white backgrounds. We strongly recommend that, if you're not already doing so, you use transparent GIFs for your icons. For most applications, this should be as easy as adding transparency to the edges of the icon.

[edit] Bookmarks

Bookmarks appear on every user's home page as well as on the Applications menu.

[edit] Application Tabs

Application tabs let users feature full canvas-like pages for applications they enjoy the most. Tabs behave like a hybrid of a canvas page and a profile box.

You can read more information about tabs and how they behave.

[edit] Boxes Tab

The Boxes tab contains application profile boxes. Users can move profile boxes from the main profile to the Boxes tab and vice versa.

[edit] Application Info Sections

The Info tab on the profile allows users to express their interests in a more structured way than before. Users can add structured information from your applications by way of application info sections. An application info section is a list of text and/or images provided by your application.

When a user chooses to add an application info section, you set the format with profile.setInfo.

[edit] Publisher

Applications can integrate into the Publisher so users can create or find rich content and post it directly into their own or their friends' Walls. And these stories can leverage any of the new Feed story sizes — see below for more details.

[edit] Feed Forms

Feed forms are special FBML components that allow applications to publish Feed stories on the behalf of users. Your application can publish directly into the user's and the user's friends' Mini-Feeds.

[edit] Privacy Settings

Users can set their privacy options from your application's privacy/settings page. These options include approval for publishing stories...

... and whether the user wants to add or remove your application's profile box, tab, and info section, and who can see these elements.

A user can also decide whether to add a bookmark for your application. Bookmarks appear on the Applications menu — see above.

[edit] Feed

Applications can access a user's Feed and post content to it. For example, the Photos application publishes Feed stories about photos a user and her friends have uploaded recently. Each user has a maximum number of Feed stories that they can see from all applications. Once that maximum is reached they cannot see any more application stories during that sweep.

You send Feed stories as notifications; use Notifications.send.

In addition, your application can post content directly onto users' profiles by using Feed forms and the Publisher.

[edit] Alerts

Applications can send notifications to a user through email. Users must grant your application permission before they can receive email. The user of the application who triggers this action must approve of the email. You send email with notifications.sendEmail.

[edit] Requests

Applications can create requests that show up at the top right of a user's homepage. These requests are usually initiated by a user's friend and often require the user to take some form of action. An example of this in the Photos application is a photo tag request confirmation.

Like Feed stories, requests are also sent in the form of notifications, so use Notifications.send.

[edit] Interacting with Users

While the current version of the API does not support performing Facebook-specific actions directly, you can direct your users to various Facebook pages to perform an action. To do this, link the user to one of the following pages:

To... Use this URL...
View the specified user's profile. http://www.facebook.com/profile.php?id=XXXXX
Poke the specified user. http://www.facebook.com/poke.php?id=XXXXX
Send a message to the specified user. http://www.facebook.com/message.php?id=XXXXX&subject=XXXXX&msg=XXXXX

Note: subject and msg parameters are optional ways to pre-fill the contents of the message (the user will still be able to edit the message before sending).

Add the specified user as a friend. http://www.facebook.com/addfriend.php?id=XXXXX
See photos taken by the specified user. http://www.facebook.com/photos.php?id=XXXXX
See photos of the specified user. http://www.facebook.com/photo_search.php?id=XXXXX
Read or post on the specified user's Wall. http://www.facebook.com/wall.php?id=XXXXX
Read the specified user's notes. http://www.facebook.com/notes.php?id=XXXXX

Note: Facebook doesn't look fondly upon spammy behavior, so please don't encourage your users to abuse this functionality.

reference