1. Facebook App Development
An introduction by Cristiano Betta

2. About me
Senior Web Developer
@ Nudge London

3. About me
Freelance Web
Developer

4. About me
Hobby Photographer

5. About me
Geek

6. Why Facebook Apps?
Bring existing apps into Facebook

7. Why Facebook Apps?
Harvest social relationships

8. Why Facebook Apps?
Campaign on Facebook

9. Why Facebook Apps?
Bring a brand into Facebook

10. Why Facebook Apps
Launch brand within Facebook

11. Facebook API

12. Facebook API
FBML/XFBML

13. Facebook API
FBML/XFBML
Subset of HTML/XML, with some extra (powerful)
Facebook tags

14. Facebook API
FBML/XFBML
Subset of HTML/XML, with some extra (powerful)
Facebook tags
<fb:name uid="12345" capitalize="true" />

15. Facebook API
FBML/XFBML
Subset of HTML/XML, with some extra (powerful)
Facebook tags
<fb:name uid="12345" capitalize="true" />
FQL

16. Facebook API
FBML/XFBML
Subset of HTML/XML, with some extra (powerful)
Facebook tags
<fb:name uid="12345" capitalize="true" />
FQL
Ideal for querying extra data server side

17. Facebook API
FBML/XFBML
Subset of HTML/XML, with some extra (powerful)
Facebook tags
<fb:name uid="12345" capitalize="true" />
FQL
Ideal for querying extra data server side
SELECT name, pic FROM user WHERE uid=12345

18. Facebook API
FBML/XFBML
Subset of HTML/XML, with some extra (powerful)
Facebook tags
<fb:name uid="12345" capitalize="true" />
FQL
Ideal for querying extra data server side
SELECT name, pic FROM user WHERE uid=12345
FBJS

19. What’s in a FB app?
Application Directory

20. What’s in a FB app?
About Page

21. What’s in a FB app?
Profile

22. What’s in a FB app?
Applications menu

23. What’s in a FB app?
Bookmarks

24. What’s in a FB app?
Applications Tab

25. What’s in a FB app?
Boxes Tab

26. What’s in a FB app?
Profile Info Section

27. What’s in a FB app?
Publisher

28. What’s in a FB app?
News Feed

29. What’s in a FB app?
And much more.....

30. Integration Points
Canvas pages
Canvas
Tab
Attachment

31. Integration Points
Asynchronous FBML
Profile box
Info tab box
Boxes Tab

32. Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server

33. Canvas Facebook in Browser
Application Canvas
1 - Browser makes request
Facebook Server
Application Server

34. Canvas Facebook in Browser
Application Canvas
1 - Browser makes request
Facebook Server
Application Server

35. Canvas Facebook in Browser
Application Canvas
1 - Browser makes request
2 - FB server calls web server
Facebook Server
Application Server

36. Canvas Facebook in Browser
Application Canvas
1 - Browser makes request
2 - FB server calls web server
Facebook Server
Application Server

37. Canvas Facebook in Browser
Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional) Facebook Server
Application Server

38. Canvas Facebook in Browser
Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional) Facebook Server
Application Server

39. Canvas Facebook in Browser
Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional) Facebook Server
4 - App returns FBML
Application Server

40. Canvas Facebook in Browser
Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional) Facebook Server
4 - App returns FBML
Application Server

41. Canvas Facebook in Browser
Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional) Facebook Server
4 - App returns FBML
5 - Facebook renders FBML
to HTML
Application Server

42. Canvas Facebook in Browser
Application Canvas
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional) Facebook Server
4 - App returns FBML
5 - Facebook renders FBML
to HTML
Application Server

43. Profile Facebook in Browser
Profile Box
Facebook Server
Application Server

44. Profile Facebook in Browser
Profile Box
0 - Application provides FBML
Facebook Server
Application Server

45. Profile Facebook in Browser
Profile Box
0 - Application provides FBML
Facebook Server
Application Server

46. Profile Facebook in Browser
Profile Box
0 - Application provides FBML
1 - Browser makes request
Facebook Server
Application Server

47. Profile Facebook in Browser
Profile Box
0 - Application provides FBML
1 - Browser makes request
Facebook Server
Application Server

48. Profile Facebook in Browser
Profile Box
0 - Application provides FBML
1 - Browser makes request
2 - Facebook server renders Facebook Server
profile FBML to HTML
Application Server

49. Profile Facebook in Browser
Profile Box
0 - Application provides FBML
1 - Browser makes request
2 - Facebook server renders Facebook Server
profile FBML to HTML
Application Server

50. Authentication

51. Authentication

52. Without Authorization

53. Without Authorization
fb_sig_added
fb_sig_api_key
fb_sig_friends
fb_sig_time
fb_sig_user/fb_sig_canvas_user

54. Without Authorization

55. Without Authorization
fb_sig_in_canvas
fb_sig_in_profile_tab
fb_sig_profile_user
fb_sig_profile_session_key
fb_sig_page_id
fb_sig_page_added

56. When authorized

57. When authorized
fb_sig_session_key
fb_sig_expires
fb_sig_profile_update_time
fb_sig_ext_perms

58. Security?

59. Security? fb_sig!

60. How to get started
http://www.facebook.com/developers

61. How to get started
Create a new app and get API key, Secret, and
more....

62. How to get started
Setup your application canvas with API key

63. How to get started
Read the wiki for reference on FBML, FBJS, API,
etc - http://wiki.developers.facebook.com/

64. How to get started
Make sure to get the libraries

65. How to get started
Write a hello world, and see what happens

66. More about me
cristianobetta.com

67. More about me
nudgelondon.com/cristiano

68. Questions...?