Facebook App Development

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; capitalize=quot;truequot; />

Facebook API FBML/XFBML Subset of HTML/XML, with some extra (powerful) Facebook tags <fb:name uid=quot;12345quot; capitalize=quot;truequot; /> FQL

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

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

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

What’s in a FB app? Application Directory

What’s in a FB app? About Page

What’s in a FB app? Proﬁle

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? Proﬁle 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 Proﬁle box Info tab box Boxes Tab

Canvas Facebook in Browser Application Canvas Facebook Server Application Server

Canvas Facebook in Browser Application Canvas 1 - Browser makes request Facebook Server Application Server

Canvas Facebook in Browser Application Canvas 1 - Browser makes request 2 - FB server calls web server Facebook Server Application Server

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

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

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

Proﬁle Facebook in Browser Proﬁle Box Facebook Server Application Server

Proﬁle Facebook in Browser Proﬁle Box 0 - Application provides FBML Facebook Server Application Server

Proﬁle Facebook in Browser Proﬁle Box 0 - Application provides FBML 1 - Browser makes request Facebook Server Application Server

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

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_proﬁle_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/

http://www.slideshare.net	93
http://blog.cristianobetta.com	51
http://www.techiegyan.com	4
http://www.e-presentations.us	3
http://web.educastur.princast.es	1
http://webcache.googleusercontent.com	1
http://www.hvgpress.hu	1
http://cristianobetta.com	1

Facebook App Development

by Cristiano Betta on Dec 08, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 155

Statistics

Facebook App Development — Presentation Transcript