How to write a FaceBook Application
-
Upload
duy-nhan-nguyen -
Category
Documents
-
view
2.965 -
download
7
Transcript of How to write a FaceBook Application
![Page 1: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/1.jpg)
Facebook App DevelopmentAn introduction by Cristiano Betta
![Page 2: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/2.jpg)
About meSenior Web Developer @ Nudge London
![Page 3: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/3.jpg)
About meFreelance Web Developer
![Page 4: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/4.jpg)
About meHobby Photographer
![Page 5: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/5.jpg)
About meGeek
![Page 6: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/6.jpg)
Why Facebook Apps?Bring existing apps into Facebook
![Page 7: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/7.jpg)
Why Facebook Apps?Harvest social relationships
![Page 8: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/8.jpg)
Why Facebook Apps?Campaign on Facebook
![Page 9: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/9.jpg)
Why Facebook Apps?Bring a brand into Facebook
![Page 10: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/10.jpg)
Why Facebook AppsLaunch brand within Facebook
![Page 11: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/11.jpg)
Facebook API
![Page 12: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/12.jpg)
Facebook APIFBML/XFBML
![Page 13: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/13.jpg)
Facebook APIFBML/XFBML
Subset of HTML/XML, with some extra (powerful) Facebook tags
![Page 14: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/14.jpg)
Facebook APIFBML/XFBML
Subset of HTML/XML, with some extra (powerful) Facebook tags
<fb:name uid="12345" capitalize="true" />
![Page 15: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/15.jpg)
Facebook APIFBML/XFBML
Subset of HTML/XML, with some extra (powerful) Facebook tags
<fb:name uid="12345" capitalize="true" />
FQL
![Page 16: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/16.jpg)
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
![Page 17: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/17.jpg)
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
![Page 18: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/18.jpg)
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
![Page 19: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/19.jpg)
What’s in a FB app?Application Directory
![Page 20: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/20.jpg)
What’s in a FB app?About Page
![Page 21: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/21.jpg)
What’s in a FB app?Profile
![Page 22: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/22.jpg)
What’s in a FB app?Applications menu
![Page 23: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/23.jpg)
What’s in a FB app?Bookmarks
![Page 24: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/24.jpg)
What’s in a FB app?Applications Tab
![Page 25: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/25.jpg)
What’s in a FB app?Boxes Tab
![Page 26: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/26.jpg)
What’s in a FB app?Profile Info Section
![Page 27: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/27.jpg)
What’s in a FB app?Publisher
![Page 28: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/28.jpg)
What’s in a FB app?News Feed
![Page 29: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/29.jpg)
What’s in a FB app?And much more.....
![Page 30: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/30.jpg)
Integration Points
Canvas pages
Canvas
Tab
Attachment
![Page 31: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/31.jpg)
Integration Points
Asynchronous FBML
Profile box
Info tab box
Boxes Tab
![Page 32: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/32.jpg)
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
![Page 33: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/33.jpg)
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
![Page 34: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/34.jpg)
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
![Page 35: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/35.jpg)
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
2 - FB server calls web server
![Page 36: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/36.jpg)
Canvas Facebook in Browser
Application Canvas
Facebook Server
Application Server
1 - Browser makes request
2 - FB server calls web server
![Page 37: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/37.jpg)
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)
![Page 38: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/38.jpg)
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)
![Page 39: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/39.jpg)
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
![Page 40: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/40.jpg)
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
![Page 41: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/41.jpg)
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
![Page 42: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/42.jpg)
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
![Page 43: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/43.jpg)
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
![Page 44: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/44.jpg)
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
0 - Application provides FBML
![Page 45: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/45.jpg)
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
0 - Application provides FBML
![Page 46: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/46.jpg)
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
0 - Application provides FBML
1 - Browser makes request
![Page 47: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/47.jpg)
Profile Facebook in Browser
Profile Box
Facebook Server
Application Server
0 - Application provides FBML
1 - Browser makes request
![Page 48: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/48.jpg)
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
![Page 49: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/49.jpg)
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
![Page 50: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/50.jpg)
Authentication
![Page 51: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/51.jpg)
Authentication
![Page 52: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/52.jpg)
Without Authorization
![Page 53: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/53.jpg)
Without Authorization
fb_sig_added
fb_sig_api_key
fb_sig_friends
fb_sig_time
fb_sig_user/fb_sig_canvas_user
![Page 54: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/54.jpg)
Without Authorization
![Page 55: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/55.jpg)
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
![Page 56: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/56.jpg)
When authorized
![Page 57: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/57.jpg)
When authorized
fb_sig_session_key
fb_sig_expires
fb_sig_profile_update_time
fb_sig_ext_perms
![Page 58: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/58.jpg)
Security?
![Page 59: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/59.jpg)
Security? fb_sig!
![Page 60: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/60.jpg)
How to get startedhttp://www.facebook.com/developers
![Page 61: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/61.jpg)
How to get startedCreate a new app and get API key, Secret, and more....
![Page 62: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/62.jpg)
How to get startedSetup your application canvas with API key
![Page 63: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/63.jpg)
How to get startedRead the wiki for reference on FBML, FBJS, API, etc - http://wiki.developers.facebook.com/
![Page 64: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/64.jpg)
How to get startedMake sure to get the libraries
![Page 65: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/65.jpg)
How to get startedWrite a hello world, and see what happens
![Page 67: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/67.jpg)
More about menudgelondon.com/cristiano
![Page 68: How to write a FaceBook Application](https://reader036.fdocuments.us/reader036/viewer/2022062418/5558b9a4d8b42a7e298b4ea2/html5/thumbnails/68.jpg)
Questions...?