Charlie Cheever's presentation to developers at Facebook Developer Garage Uganda on how to build an application on Facebook.

1. Facebook Developer Garage
Kampala
Charlie Cheever
Platform Engineering, Facebook

2. Review: A Web App
pretty simple

3. 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

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

5. TechCrunch
(technology blog)

6. TechCrunch

7. TechCrunch

8. iLike
(social music)

9. Flixster
(social movies)

10. Prolific
(games!)

11. Facebook Platform Technology
• API
• FBML

12. 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

13. 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

14. 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?

15. FBML Canvas Apps

16. FBML Canvas Apps

17. IFrame Canvas Apps

18. IFrame Canvas Apps
Using XFBML

19. IFrame Canvas Apps

20. 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

21. Facebook Connect Apps

22. 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

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

24. 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.

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

26. Your Preview
program

27. First
Program

29. Remember
this name.

30. Now
we have
a real
website

31. http://www.facebook.com/developers

33. Remember this Canvas URL

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

35. Add the following to your app.
import(quot;facebookquot;);
fb.init();
print(quot;Hello Kampala!quot;);

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

38. Clicking
Publish will
take your
application live

40. 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/

41. Questions?
charlie@facebook.com