This action might not be possible to undo. Are you sure you want to continue?
. 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 10.Requests
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)
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.
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.
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.
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).
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.
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 recently.
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.
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 Application
1. 2. 3. 4. 5. 6. 7.
Introduction Integrating Hello World Pushing FBML to the profile box Using mock-AJAX in the profile box Using MySQL to create a counter Putting the examples together Downloads
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 http://tperry256.dreamhost.com/f8/tutorialapp/. 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. 2. 3. 4.
5. 6. Go to http://developers.facebook.com/ Click on 'Get Started' Click on 'Add Facebook Developer Application' A link to 'Developer' should appear in the left nav on Facebook now. Go to the Developer App. Click on the button that says 'Setup New Application' Here are the steps for filling out the form:
1. 2. 3.
Application Name: for our app, we put 'Tutorial Application' - you should put in a different name. Check the Terms of service box. Click on the Optional Fields link - this will bring up more options.
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.
Callback Url: for our app, we put 'http://tperry256.dreamhost.com/f8/tutorialapp/' 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. 7. 8. 9.
Canvas Page URL: http://apps.facebook.com/: for our app, we put 'tutorialapp' - you must put in a different name. Use FBML: keep this setting. Application Type: leave this set to 'Website'. 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 'http://apps.facebook.com/tutorialapp/' -- 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 'http://apps.facebook.com/tutorialapp/' -- 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. 8.
9. Click on the 'Submit' button. 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. Copy the latest version of the php5 client library into your application's directory on the server.