Facebook App Development

  • 30,963 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • @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/
    Are you sure you want to
    Your message goes here
  • Excellent presentation! Seriously speaking: this helped me a lot to get started.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
30,963
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
909
Comments
2
Likes
24

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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