Facebook App Development

34,038 views
32,723 views

Published on

A little talk I gave at BarCamp Liverpool on how to get started with Facebook Apps. Totally out of date by now (2013).

Published in: Technology
2 Comments
26 Likes
Statistics
Notes
  • @cristiano ... nice share but I'd like some tips for compliance of FB apps on Windows8, that might help me in facebook app development. http://www.appostrophic.com/facebook-application-development/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Excellent presentation! Seriously speaking: this helped me a lot to get started.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
34,038
On SlideShare
0
From Embeds
0
Number of Embeds
206
Actions
Shares
0
Downloads
932
Comments
2
Likes
26
Embeds 0
No embeds

No notes for slide

Facebook App Development

  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=quot;12345quot; capitalize=quot;truequot; />
  15. Facebook API FBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags <fb:name uid=quot;12345quot; capitalize=quot;truequot; /> FQL
  16. Facebook API FBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags <fb:name uid=quot;12345quot; capitalize=quot;truequot; /> 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=quot;12345quot; capitalize=quot;truequot; /> 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=quot;12345quot; capitalize=quot;truequot; /> 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...?

×