how to write a facebook application
TRANSCRIPT
Facebook App DevelopmentAn introduction by Cristiano Betta
About meSenior Web Developer @ Nudge London
About meFreelance Web Developer
About meHobby Photographer
About meGeek
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 AppsLaunch brand within Facebook
Facebook API
Facebook APIFBML/XFBML
Facebook APIFBML/XFBML
Subset of HTML/XML, with some extra (powerful) Facebook tags
Facebook APIFBML/XFBML
Subset of HTML/XML, with some extra (powerful) Facebook tags
<fb:name uid="12345" capitalize="true" />
Facebook APIFBML/XFBML
Subset of HTML/XML, with some extra (powerful) Facebook tags
<fb:name uid="12345" capitalize="true" />
FQL
Facebook APIFBML/XFBML
Subset of HTML/XML, with some extra (powerful) Facebook tags
<fb:name uid="12345" capitalize="true" />
FQL
Ideal for querying extra data server side
Facebook APIFBML/XFBML
Subset of HTML/XML, with some extra (powerful) Facebook tags
<fb:name uid="12345" capitalize="true" />
FQL
Ideal for querying extra data server side
SELECT name, pic FROM user WHERE uid=12345
Facebook APIFBML/XFBML
Subset of HTML/XML, with some extra (powerful) Facebook tags
<fb:name uid="12345" capitalize="true" />
FQL
Ideal for querying extra data server side
SELECT name, pic FROM user WHERE uid=12345
FBJS
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 Server
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
2 - FB server calls web server
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
2 - FB server calls web server
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)
4 - App returns FBML
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)
4 - App returns FBML
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)
4 - App returns FBML5 - Facebook renders FBML to HTML
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
2 - FB server calls web server
3 - App Calls FB API (optional)
4 - App returns FBML5 - Facebook renders FBML to HTML
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
0 - Application provides FBML
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
0 - Application provides FBML
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
0 - Application provides FBML
1 - Browser makes request
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
0 - Application provides FBML
1 - Browser makes request
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
0 - Application provides FBML
1 - Browser makes request2 - Facebook server renders profile FBML to HTML
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
0 - Application provides FBML
1 - Browser makes request2 - Facebook server renders profile FBML to HTML
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_id
fb_sig_page_added
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 startedhttp://www.facebook.com/developers
How to get startedCreate a new app and get API key, Secret, and more....
How to get startedSetup your application canvas with API key
How to get startedRead the wiki for reference on FBML, FBJS, API, etc - http://wiki.developers.facebook.com/
How to get startedMake sure to get the libraries
How to get startedWrite a hello world, and see what happens
More about menudgelondon.com/cristiano
Questions...?