Facebook App Development
An introduction by Cristiano Betta
About me
Senior Web Developer
@ Nudge London
About me
Freelance Web
Developer
About me
Hobby Photographer
About me
Geek
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 Apps
Launch brand within Facebook
Facebook API
Facebook API
FBML/XFBML
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
 <fb:name uid=quot;12345quot; capit...
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
 <fb:name uid=quot;12345quot; capit...
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
 <fb:name uid=quot;12345quot; capit...
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
 <fb:name uid=quot;12345quot; capit...
Facebook API
FBML/XFBML
 Subset of HTML/XML, with some extra (powerful)
 Facebook tags
 <fb:name uid=quot;12345quot; capit...
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 Serv...
Canvas                      Facebook in Browser

                                   Application Canvas
1 - Browser makes r...
Canvas                      Facebook in Browser

                                   Application Canvas
1 - Browser makes r...
Canvas                           Facebook in Browser

                                        Application Canvas
1 - Brows...
Canvas                           Facebook in Browser

                                        Application Canvas
1 - Brows...
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Bro...
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Bro...
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Bro...
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Bro...
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Bro...
Canvas                            Facebook in Browser

                                         Application Canvas
1 - Bro...
Profile	   Facebook in Browser

                      Profile Box



          Facebook Server




          Application Ser...
Profile	                         Facebook in Browser

                                            Profile Box
0 - Applicatio...
Profile	                         Facebook in Browser

                                            Profile Box
0 - Applicatio...
Profile	                         Facebook in Browser

                                            Profile Box
0 - Applicatio...
Profile	                         Facebook in Browser

                                            Profile Box
0 - Applicatio...
Profile	                         Facebook in Browser

                                            Profile Box
0 - Applicatio...
Profile	                         Facebook in Browser

                                            Profile Box
0 - Applicatio...
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_...
When authorized
When authorized

fb_sig_session_key
fb_sig_expires
fb_sig_profile_update_time
fb_sig_ext_perms
Security?
Security? fb_sig!
How to get started
http://www.facebook.com/developers
How to get started
Create a new app and get API key, Secret, and
more....
How to get started
Setup your application canvas with API key
How to get started
Read the wiki for reference on FBML, FBJS, API,
etc - http://wiki.developers.facebook.com/
How to get started
Make sure to get the libraries
How to get started
Write a hello world, and see what happens
More about me
cristianobetta.com
More about me
nudgelondon.com/cristiano
Questions...?
Upcoming SlideShare
Loading in...5
×

Facebook App Development

31,255

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
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,255
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
924
Comments
2
Likes
24
Embeds 0
No embeds

No notes for slide

Facebook App Development

  1. 1. Facebook App Development An introduction by Cristiano Betta
  2. 2. About me Senior Web Developer @ Nudge London
  3. 3. About me Freelance Web Developer
  4. 4. About me Hobby Photographer
  5. 5. About me Geek
  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 Apps Launch brand within Facebook
  11. 11. Facebook API
  12. 12. Facebook API FBML/XFBML
  13. 13. Facebook API FBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags
  14. 14. Facebook API FBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags <fb:name uid=quot;12345quot; capitalize=quot;truequot; />
  15. 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. 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. 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. 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. 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 Canvas 1 - Browser makes request Facebook Server Application Server
  34. 34. Canvas Facebook in Browser Application Canvas 1 - Browser makes request Facebook Server Application Server
  35. 35. Canvas Facebook in Browser Application Canvas 1 - Browser makes request 2 - FB server calls web server Facebook Server Application Server
  36. 36. Canvas Facebook in Browser Application Canvas 1 - Browser makes request 2 - FB server calls web server Facebook Server Application Server
  37. 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. 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. 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. 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. 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. 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. 43. Profile Facebook in Browser Profile Box Facebook Server Application Server
  44. 44. Profile Facebook in Browser Profile Box 0 - Application provides FBML Facebook Server Application Server
  45. 45. Profile Facebook in Browser Profile Box 0 - Application provides FBML Facebook Server Application Server
  46. 46. Profile Facebook in Browser Profile Box 0 - Application provides FBML 1 - Browser makes request Facebook Server Application Server
  47. 47. Profile Facebook in Browser Profile Box 0 - Application provides FBML 1 - Browser makes request Facebook Server Application Server
  48. 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. 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. 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 authorized fb_sig_session_key fb_sig_expires fb_sig_profile_update_time fb_sig_ext_perms
  58. 58. Security?
  59. 59. Security? fb_sig!
  60. 60. How to get started http://www.facebook.com/developers
  61. 61. How to get started Create a new app and get API key, Secret, and more....
  62. 62. How to get started Setup your application canvas with API key
  63. 63. How to get started Read the wiki for reference on FBML, FBJS, API, etc - http://wiki.developers.facebook.com/
  64. 64. How to get started Make sure to get the libraries
  65. 65. How to get started Write a hello world, and see what happens
  66. 66. More about me cristianobetta.com
  67. 67. More about me nudgelondon.com/cristiano
  68. 68. Questions...?
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×