Charlie Cheever Facebook Developer Garage Uganda

3,708 views

Published on

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

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,708
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
50
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Charlie Cheever Facebook Developer Garage Uganda

  1. 1. Facebook Developer Garage Kampala Charlie Cheever Platform Engineering, Facebook
  2. 2. Review: A Web App pretty simple
  3. 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. 4. Some Examples of What’s Being Done with the Facebook Platform
  5. 5. TechCrunch (technology blog)
  6. 6. TechCrunch
  7. 7. TechCrunch
  8. 8. iLike (social music)
  9. 9. Flixster (social movies)
  10. 10. Prolific (games!)
  11. 11. Facebook Platform Technology • API • FBML
  12. 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. 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. 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. 15. FBML Canvas Apps
  16. 16. FBML Canvas Apps
  17. 17. IFrame Canvas Apps
  18. 18. IFrame Canvas Apps Using XFBML
  19. 19. IFrame Canvas Apps
  20. 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. 21. Facebook Connect Apps
  22. 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. 23. Examples • http://apps.facebook.com/devgaragekampala/ • Hello, Uganda! • Hello, Mark Zuckerberg • Hello friends! • Pick a friend • Someone Else’s Code
  24. 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. 25. • AppJet is a free, web-based hosting service • Great for prototyping websites with Javascript • Has built-in Facebook support
  26. 26. Your Preview program
  27. 27. First Program
  28. 28. Remember this name.
  29. 29. Now we have a real website
  30. 30. http://www.facebook.com/developers
  31. 31. Remember this Canvas URL
  32. 32. Congratulations! You now have a Facebook application. Write these keys down
  33. 33. Add the following to your app. import(quot;facebookquot;); fb.init(); print(quot;Hello Kampala!quot;);
  34. 34. Type in your Canvas url Paste in your API Key and Secret
  35. 35. Clicking Publish will take your application live
  36. 36. 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/
  37. 37. Questions? charlie@facebook.com

×