Facebook App Development

download Facebook App Development
  • date post

    17-May-2015
  • Category

    Technology

  • view

    717
  • download

    2

Embed Size (px)

description

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

Transcript of Facebook App Development

  • 1. Facebook App DevelopmentAn introduction by Cristiano Betta

2. About meSenior Web Developer@ Nudge London 3. About meFreelance WebDeveloper 4. About meHobby Photographer 5. About meGeek 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 AppsLaunch brand within Facebook 11. Facebook API 12. Facebook APIFBML/XFBML 13. Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags 14. Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags 15. Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags FQL 16. Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags FQL Ideal for querying extra data server side 17. Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags FQL Ideal for querying extra data server side SELECT name, pic FROM user WHERE uid=12345 18. Facebook APIFBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags FQL Ideal for querying extra data server side SELECT name, pic FROM user WHERE uid=12345FBJS 19. Whats in a FB app?Application Directory 20. Whats in a FB app?About Page 21. Whats in a FB app?Prole 22. Whats in a FB app?Applications menu 23. Whats in a FB app?Bookmarks 24. Whats in a FB app?Applications Tab 25. Whats in a FB app?Boxes Tab 26. Whats in a FB app?Prole Info Section 27. Whats in a FB app?Publisher 28. Whats in a FB app?News Feed 29. Whats in a FB app?And much more..... 30. Integration Points Canvas pagesCanvasTabAttachment 31. Integration Points Asynchronous FBMLProle boxInfo tab boxBoxes Tab 32. Canvas Facebook in BrowserApplication Canvas Facebook Server Application Server 33. CanvasFacebook in Browser Application Canvas1 - Browser makes requestFacebook ServerApplication Server 34. CanvasFacebook in Browser Application Canvas1 - Browser makes requestFacebook ServerApplication Server 35. Canvas Facebook in BrowserApplication Canvas1 - Browser makes request2 - FB server calls web server Facebook Server Application Server 36. Canvas Facebook in BrowserApplication Canvas1 - Browser makes request2 - FB server calls web server Facebook Server Application Server 37. CanvasFacebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server3 - App Calls FB API (optional) Facebook ServerApplication Server 38. CanvasFacebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server3 - App Calls FB API (optional) Facebook ServerApplication Server 39. CanvasFacebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server3 - App Calls FB API (optional) Facebook Server4 - App returns FBMLApplication Server 40. CanvasFacebook in Browser Application Canvas1 - Browser makes request2 - FB server calls web server3 - App Calls FB API (optional) Facebook Server4 - App returns FBMLApplication Server 41. CanvasFacebook 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 HTMLApplication Server 42. CanvasFacebook 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 HTMLApplication Server 43. Prole Facebook in BrowserProle BoxFacebook ServerApplication Server 44. Prole Facebook in BrowserProle Box0 - Application provides FBMLFacebook ServerApplication Server 45. Prole Facebook in BrowserProle Box0 - Application provides FBMLFacebook ServerApplication Server 46. Prole Facebook in BrowserProle Box0 - Application provides FBML1 - Browser makes requestFacebook ServerApplication Server 47. Prole Facebook in BrowserProle Box0 - Application provides FBML1 - Browser makes requestFacebook ServerApplication Server 48. Prole Facebook in BrowserProle Box0 - Application provides FBML1 - Browser makes request2 - Facebook server renders Facebook Serverprole FBML to HTMLApplication Server 49. Prole Facebook in BrowserProle Box0 - Application provides FBML1 - Browser makes request2 - Facebook server renders Facebook Serverprole FBML to HTMLApplication 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_prole_tab fb_sig_prole_user fb_sig_prole_session_key fb_sig_page_id fb_sig_page_added 56. When authorized 57. When authorizedfb_sig_session_keyfb_sig_expiresfb_sig_prole_update_timefb_sig_ext_perms 58. Security? 59. Security? fb_sig! 60. How to get startedhttp://www.facebook.com/developers 61. How to get startedCreate a new app and get API key, Secret, andmore.... 62. How to get startedSetup your application canvas with API key 63. How to get startedRead the wiki for reference on FBML, FBJS, API,etc - http://wiki.developers.facebook.com/ 64. How to get startedMake sure to get the libraries 65. How to get startedWrite a hello world, and see what happens 66. More about mecristianobetta.com 67. More about menudgelondon.com/cristiano 68. Questions...?