0
Facebook App DevelopmentAn introduction by Cristiano Betta
About meSenior Web Developer@ Nudge London
About meFreelance WebDeveloper
About meHobby Photographer
About meGeek
Why Facebook Apps?Bring existing apps into Facebook
Why Facebook Apps?Harvest social relationships
Why Facebook Apps?	Campaign on Facebook
Why Facebook Apps?	Bring a brand into Facebook
Why Facebook AppsLaunch brand within Facebook
Facebook API
Facebook APIFBML/XFBML
Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags
Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags <fb:name uid="12345" capitalize="true"...
Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags <fb:name uid="12345" capitalize="true"...
Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags <fb:name uid="12345" capitalize="true"...
Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags <fb:name uid="12345" capitalize="true"...
Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags <fb:name uid="12345" capitalize="true"...
What’s in a FB app?Application Directory
What’s in a FB app?About Page
What’s in a FB app?Profile
What’s in a FB app?Applications menu
What’s in a FB app?Bookmarks
What’s in a FB app?Applications Tab
What’s in a FB app?Boxes Tab
What’s in a FB app?Profile Info Section
What’s in a FB app?Publisher
What’s in a FB app?News Feed
What’s in a FB app?    And much more.....
Integration Points Canvas pages  Canvas  Tab  Attachment
Integration Points Asynchronous FBML  Profile box  Info tab box  Boxes Tab
Canvas   Facebook in Browser                Application Canvas         Facebook Server         Application Server
Canvas                      Facebook in Browser                                   Application Canvas1 - Browser makes requ...
Canvas                      Facebook in Browser                                   Application Canvas1 - Browser makes requ...
Canvas                           Facebook in Browser                                        Application Canvas1 - Browser ...
Canvas                           Facebook in Browser                                        Application Canvas1 - Browser ...
Canvas                            Facebook in Browser                                         Application Canvas1 - Browse...
Canvas                            Facebook in Browser                                         Application Canvas1 - Browse...
Canvas                            Facebook in Browser                                         Application Canvas1 - Browse...
Canvas                            Facebook in Browser                                         Application Canvas1 - Browse...
Canvas                            Facebook in Browser                                         Application Canvas1 - Browse...
Canvas                            Facebook in Browser                                         Application Canvas1 - Browse...
Profile	   Facebook in Browser                      Profile Box          Facebook Server          Application Server
Profile	                         Facebook in Browser                                            Profile Box0 - Application p...
Profile	                         Facebook in Browser                                            Profile Box0 - Application p...
Profile	                         Facebook in Browser                                            Profile Box0 - Application p...
Profile	                         Facebook in Browser                                            Profile Box0 - Application p...
Profile	                         Facebook in Browser                                            Profile Box0 - Application p...
Profile	                         Facebook in Browser                                            Profile Box0 - Application p...
Authentication
Authentication
Without Authorization
Without Authorization fb_sig_added fb_sig_api_key fb_sig_friends fb_sig_time fb_sig_user/fb_sig_canvas_user
Without Authorization
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...
When authorized
When authorizedfb_sig_session_keyfb_sig_expiresfb_sig_profile_update_timefb_sig_ext_perms
Security?
Security? fb_sig!
How to get startedhttp://www.facebook.com/developers
How to get startedCreate a new app and get API key, Secret, andmore....
How to get startedSetup your application canvas with API key
How to get startedRead the wiki for reference on FBML, FBJS, API,etc - http://wiki.developers.facebook.com/
How to get startedMake sure to get the libraries
How to get startedWrite a hello world, and see what happens
More about mecristianobetta.com
More about menudgelondon.com/cristiano
Questions...?
Upcoming SlideShare
Loading in...5
×

Facebook App Development

719

Published on

An excellent presentation on Facebook Development Platform and its key areas.

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

  • Be the first to like this

No Downloads
Views
Total Views
719
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Facebook App Development"

  1. 1. Facebook App DevelopmentAn introduction by Cristiano Betta
  2. 2. About meSenior Web Developer@ Nudge London
  3. 3. About meFreelance WebDeveloper
  4. 4. About meHobby Photographer
  5. 5. About meGeek
  6. 6. Why Facebook Apps?Bring existing apps into Facebook
  7. 7. Why Facebook Apps?Harvest social relationships
  8. 8. Why Facebook Apps? Campaign on Facebook
  9. 9. Why Facebook Apps? Bring a brand into Facebook
  10. 10. Why Facebook AppsLaunch brand within Facebook
  11. 11. Facebook API
  12. 12. Facebook APIFBML/XFBML
  13. 13. Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags
  14. 14. Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags <fb:name uid="12345" capitalize="true" />
  15. 15. Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags <fb:name uid="12345" capitalize="true" />FQL
  16. 16. Facebook APIFBML/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. 17. Facebook APIFBML/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. 18. Facebook APIFBML/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=12345FBJS
  19. 19. What’s in a FB app?Application Directory
  20. 20. What’s in a FB app?About Page
  21. 21. What’s in a FB app?Profile
  22. 22. What’s in a FB app?Applications menu
  23. 23. What’s in a FB app?Bookmarks
  24. 24. What’s in a FB app?Applications Tab
  25. 25. What’s in a FB app?Boxes Tab
  26. 26. What’s in a FB app?Profile Info Section
  27. 27. What’s in a FB app?Publisher
  28. 28. What’s in a FB app?News Feed
  29. 29. What’s in a FB app? And much more.....
  30. 30. Integration Points Canvas pages Canvas Tab Attachment
  31. 31. Integration Points Asynchronous FBML Profile box Info tab box Boxes Tab
  32. 32. Canvas Facebook in Browser Application Canvas Facebook Server Application Server
  33. 33. Canvas Facebook in Browser Application Canvas1 - Browser makes request Facebook Server Application Server
  34. 34. Canvas Facebook in Browser Application Canvas1 - Browser makes request Facebook Server Application Server
  35. 35. Canvas Facebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server Facebook Server Application Server
  36. 36. Canvas Facebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server Facebook Server Application Server
  37. 37. Canvas Facebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server3 - App Calls FB API (optional) Facebook Server Application Server
  38. 38. Canvas Facebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server3 - App Calls FB API (optional) Facebook Server Application Server
  39. 39. Canvas Facebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server3 - App Calls FB API (optional) Facebook Server4 - App returns FBML Application Server
  40. 40. Canvas Facebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server3 - App Calls FB API (optional) Facebook Server4 - App returns FBML Application Server
  41. 41. Canvas Facebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server3 - App Calls FB API (optional) Facebook Server4 - App returns FBML5 - Facebook renders FBMLto HTML Application Server
  42. 42. Canvas Facebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server3 - App Calls FB API (optional) Facebook Server4 - App returns FBML5 - Facebook renders FBMLto HTML Application Server
  43. 43. Profile Facebook in Browser Profile Box Facebook Server Application Server
  44. 44. Profile Facebook in Browser Profile Box0 - Application provides FBML Facebook Server Application Server
  45. 45. Profile Facebook in Browser Profile Box0 - Application provides FBML Facebook Server Application Server
  46. 46. Profile Facebook in Browser Profile Box0 - Application provides FBML1 - Browser makes request Facebook Server Application Server
  47. 47. Profile Facebook in Browser Profile Box0 - Application provides FBML1 - Browser makes request Facebook Server Application Server
  48. 48. Profile Facebook in Browser Profile Box0 - Application provides FBML1 - Browser makes request2 - Facebook server renders Facebook Serverprofile FBML to HTML Application Server
  49. 49. Profile Facebook in Browser Profile Box0 - Application provides FBML1 - Browser makes request2 - Facebook server renders Facebook Serverprofile FBML to HTML Application Server
  50. 50. Authentication
  51. 51. Authentication
  52. 52. Without Authorization
  53. 53. Without Authorization fb_sig_added fb_sig_api_key fb_sig_friends fb_sig_time fb_sig_user/fb_sig_canvas_user
  54. 54. Without Authorization
  55. 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. 56. When authorized
  57. 57. When authorizedfb_sig_session_keyfb_sig_expiresfb_sig_profile_update_timefb_sig_ext_perms
  58. 58. Security?
  59. 59. Security? fb_sig!
  60. 60. How to get startedhttp://www.facebook.com/developers
  61. 61. How to get startedCreate a new app and get API key, Secret, andmore....
  62. 62. How to get startedSetup your application canvas with API key
  63. 63. How to get startedRead the wiki for reference on FBML, FBJS, API,etc - http://wiki.developers.facebook.com/
  64. 64. How to get startedMake sure to get the libraries
  65. 65. How to get startedWrite a hello world, and see what happens
  66. 66. More about mecristianobetta.com
  67. 67. More about menudgelondon.com/cristiano
  68. 68. Questions...?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×