facebook app development

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 mecristianobetta.com

More about menudgelondon.com/cristiano

Questions...?