Facebook Developer Garage
Kampala
Charlie Cheever
Platform Engineering, Facebook

Review: A Web App
pretty simple

A Facebook App - What do you Get?
• Authentication for free. Less code for you to write, less work for
users to login, a realer concept of identity
• Data about the people who use your app
• names, profile pictures, interests, favorite books, favorite movies
• ... and friends
• Messaging (notifications, requests) -> Distribution
• Convenient widgets. Friend selector, mp3 player, etc.
• You can show ads on your application and keep all those revenues

Some Examples of What’s Being
Done with the Facebook Platform

TechCrunch
(technology blog)

TechCrunch

TechCrunch

iLike
(social music)

Flixster
(social movies)

Prolific
(games!)

Facebook Platform Technology
• API
• FBML

Facebook API
• Read data from Facebook
• about users, ex. names, profile pictures, favorite books,
favorite movies, etc.
• other data like photos, groups, events, etc.
• almost all the data that’s available on Facebook
• Messaging - sending e-mails to users, sending Facebook
requests, sending Facebook notifications
• Publishing news feed stories

FBML
• Basically HTML with a few extras
• Sanitary - Safe for Facebook to display anywhere
• Makes it easy to efficiently embed social data
• Provides convenient widgets like friend
selectors

How Facebook Apps Work
• Facebook Connect Applications
• FBML Canvas Applications
• IFrame Canvas Applications
• Big Question: How do we efficiently involve
a third party when a user loads a webpage?

FBML Canvas Apps

FBML Canvas Apps

IFrame Canvas Apps

IFrame Canvas Apps
Using XFBML

IFrame Canvas Apps

Facebook Connect Apps
1. initial request from user
Your Server
User
4. regular response from your server
2. server-side API call to Facebook (optional)
5. JS API Call to Facebook
3. server-side API response (optional)
6. JS API response from Facebook
Facebook

Facebook Connect Apps

Getting Your Feet Wet
Some Simple Examples
• http://apps.facebook.com/devgaragekampala/
• A Facebook app that I’ve set up that will let
you test out snippets of code and get some
experience with the API and FBML

Examples
• http://apps.facebook.com/devgaragekampala/
• Hello, Uganda!
• Hello, Mark Zuckerberg
• Hello friends!
• Pick a friend
• Someone Else’s Code

Setting Up A Real App
• We’ll use a free hosting service called
AppJet in this example but you can use any
kind of hosting.

• AppJet is a free, web-based hosting service
• Great for prototyping websites with Javascript
• Has built-in Facebook support

Your Preview
program

First
Program

Remember
this name.

Now
we have
a real
website

http://www.facebook.com/developers

Remember this Canvas URL

Congratulations!
You now have a Facebook application.
Write these
keys down

Add the following to your app.
import(\"facebook\");
fb.init();
print(\"Hello Kampala!\");

Type in your Canvas url
Paste in your API Key
and Secret

Clicking
Publish will
take your
application live

Web Resources
• FB Developers Wiki: http://wiki.developers.facebook.com/
• API Test Console: http://developers.facebook.com/tools.php?api
• FBML Test Console: http://developers.facebook.com/tools.php?fbml
• AppJet (free, easy hosting): http://www.appjet.com/
• FB Developer App (for setting up an app): http://www.facebook.com/
developers/
• Facebook Developer Site: http://developers.facebook.com/

Questions?
charlie@facebook.com