You are on page 1of 13

The Facebook Platform is a standards-based web service with methods for accessing and

contributing Facebook data. The methods as easy to understand as possible.

What is the Facebook API?

The Facebook API is a web service which provides a way for external applications to
access Facebook content on behalf of Facebook members. The Facebook API can be used to create or
enhance both web and desktop applications.

How does the API key system work?

The API key uniquely identifies your application and is sent on every request made to the Facebook API server. This includes

the initial user redirect to the Facebook login page, and subsequent requests to obtain Facebook information related to that

user. This is essentially the developer application's unchanging public key.

What languages does the Facebook API support?

The API currently exchanges data over a REST-based protocol. Developer applications send text data in a POST request to the

Facebook API server, and the server responds with data according to a proprietary XML schema. Developers may use any

programming language to deliver these POST requests and read the responses, though we may provide sample client libraries

in some common programming languages to aid developers.

What is REST?

REST stands for Representational State Transfer. The Facebook API currently supports a REST based protocol; to learn more

refer to Wikipedia's definition.

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

1. Product Directory
2. About
3. Left Nav
4. Facebook Canvas Pages
a. Home
b. User Dashboard
c. Settings
5. Profile
a. Profile Box
b. Profile Action Links
6. Privacy Settings
7. News Feed
8. Alerts
9. Message Attachments

Below you will see all these various components as they are applied to our own Photos
Application. It should be noted that none of these pages are mandatory but the more you
include in your application the richer the experience becomes (for example, no one's going to
install your app called "Lefty" that is only a left nav link)

Product Directory
Many users may find your application by browsing the Facebook Application Directory. This
is where beautiful imagery and concise, descriptive text pay off.
The about page tells users about the application and is accessed from the Facebook
Application Directory. It should inspire users to install the application.
Left Nav
Applications can have their icon and name added to the left hand Facebook navigation. This
will link to that application's homepage.

Facebook Canvas Pages

Facebook Canvas pages are presented within the Facebook frame and can either be FBML or
an external html site presented within an iframe.
An application's homepage is accessed from the Facebook Left Nav. Ideally this homepage
would aggregate friend data to create a page worth coming back to quite often. For example,
the photo homepage shows your friends' recently created albums.
User Dashboard
The user dashboard is usually accessed from the top right drop-down menu in the user's
profile. This is where users manage their own content within an application or see
information about another user's content within that application.
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 the user to
express themselves through your application.

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.
Profile Action Links
Under a user's photo in their profile you can display a quick link to more info about that
user's presence within your application. You can install these links even for users who haven't
installed your application; have added your application (or, in the case of the profile of a user
who has added your application, it will show up for all viewers).

Privacy Settings
Users will be able to set who can see your application's profile box from Facebook's privacy
page. Any other privacy settings you wish to incorporate should be built into your
application's privacy/settings page.
News Feed
Applications can access News Feed and post stories to it. Each user has a maximum number
of News Feed stories that they can see from all applications. Once that maximum is reached
they will no longer see any more application stories during that sweep. For example, the
Photos application publishes News Feed stories about photos your friends have uploaded
Applications can send notifications to a user through email. The user of the application who
triggers this action must approve of the email, and users can opt out of receiving the email for
any application that has ever sent them emails.

Message Attachments
Applications can create attachments that appear in a dropdown menu on the message
composer. When the user selects that action, content is fetched and placed inside an
attachment box below the message text in the composer.

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.
Step-by-step Guide to Creating an
1. Introduction

2. Integrating Hello World

3. Pushing FBML to the profile box

4. Using mock-AJAX in the profile box

5. Using MySQL to create a counter

6. Putting the examples together


This tutorial describes how we created a platform application called 'tutorialapp' that you can use as

a template when creating your own platform app. The tutorial assumes that you have access to a

web server running php5.

The final version of 'tutorialapp' is hosted at If you

follow this link it will ask you to login to Facebook and add the 'tutorialapp' application. You can get

access to a server like this from a variety of hosting companies for just a few dollars a month.

When you create your own app, you will using a different application name and a different server.

We have highlighted these things that will be different for your application.

Integrating Hello World

1. Go to

2. Click on 'Get Started'

3. Click on 'Add Facebook Developer Application'

4. A link to 'Developer' should appear in the left nav on Facebook now. Go to the Developer


5. Click on the button that says 'Setup New Application'

6. Here are the steps for filling out the form:

1. Application Name: for our app, we put 'Tutorial Application' - you should put in a

different name.

2. Check the Terms of service box.

3. Click on the Optional Fields link - this will bring up more options.
4. Support E-mail: your Facebook contact email may be filled in automatically, but

you might not want to give out your personal email to everyone who adds your

app! You do have to put a valid email address that you can check, however.

5. Callback Url: for our app, we put '' -

you should put something DIFFERENT - in particular, you should put the url of the

directory on your server where you will create your application.

6. Canvas Page URL: for our app, we put 'tutorialapp'

- you must put in a different name.

7. Use FBML: keep this setting.

8. Application Type: leave this set to 'Website'.

9. Can your application be added to Facebook: set to 'yes' - this will bring up

more options.

10. TOS URL: you can leave this blank.

11. Post-Add Url: for our app, we put '' -- you
should put something DIFFERENT - in particular, you should put your full canvas

page url.

12. Default FBML: type in the text 'hello'.

13. Leave everything else under Installation Options blank.
14. Side Nav Url: for our app, we put '' -- you
should put something DIFFERENT - in particular, you should put your canvas page

url here as well.

15. Leave everything else under Integration Points blank.

7. Click on the 'Submit' button.

8. Go the the 'My Applications' page and check that your application was created. There are

a couple ways to get here depending on where you are in the Developer application.

9. Copy the latest version of the php5 client library into your application's directory on the