Your SlideShare is downloading. ×
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Facebook App Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Facebook App Development

31,143

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).

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
24 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
31,143
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
921
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...?

×