devcon2010facebookappsnovogeek-101023135228-phpapp01

8/6/2019 devcon2010facebookappsnovogeek-101023135228-phpapp01

1/12

DevCon 2010Hyderabad 24th October

Facebookappsdevelopment for web devs

Krishna Chaitanya T Future Web Research Lab, SETLabs, Infosys


2/12

Overview of Facebook platform&the social web

The Facebook Graph API

Getting started with Facebook apps

How Facebook Authentication works (C# demo)

JavaScript SDK & Social plugins

S E S S IO N A G E N D A

DevCon 2010

Hyderabad 24th October


3/12

Facebook.comDevCon 2010



4/12

More than 500 million active users, 150 million mobile users

Over 900 million objects that people interact with (pages, groups, events)

More than 1 million developers & 555,000 apps More

Social Graph A graph that connects people & things they care about

FB Platform Set of APIs & tools to integrate with social graph. Available for

websites, apps on Facebook, mobile apps

Personalized experiences. Ex: Docs.com

OVERVIEWDevCon 2010



5/12

Provides consistent viewofFB socialgraph

Everyobject in the socialgraph has uniqueID

Query: https://graph.facebook.com/[IDor UserName]

Allobjects areaccessible similarly & all responses areJSON objects Object forMUGH group:http://graph.facebook.com/themugh

PictureofBillGates:http://graph.facebook.com/billgates/picture

Connections:Relationships b/wobjects(requires authentication)

Query: https://graph.facebook.com/ID/CONNECTION_TYPE

Friends:https://graph.facebook.com/me/friends?limit=15

Books:https://graph.facebook.com/me/books

PeopleattendingDevCon: https://graph.facebook.com/152359924805795/attending

FacebookGraph APIDevCon 2010



6/12

Register your facebook app

Specify canvas page & canvas URL (can use http://localhost during dev)

The App Id is client_Id & App Secret is client_secret. Well use this later.

Choose Canvas Type as Iframe or FBML and save changes.

Host your app at canvas URL and test. (The demos here use Iframe)

Getting started with FBappsDevCon 2010



7/12

FB uses oAuth 2.0 protocol for authentication.

Authorized requests toFacebook requireaccess token . Hereare the steps to make

authorized requests:

1. Redirect to

https://graph.facebook.com/oauth/authorize? client_id=...&

redirect_uri=http://www.example.com/oauth_redirect

2. User authorizes-> FB redirects to redirect_uriwith theparameter code

3. Extract the code & redirect to:

https://graph.facebook.com/oauth/access_token? client_id=...&redirect_uri=http://www.example.com/oauth_redirect& client_secret=...&

code=...

4. From theabove request,Facebook returns access_token. Use this to make

authorized requests like:

https://graph.facebook.com/me?access_token=...

Facebook AuthenticationDevCon 2010



8/12

DEMO: Making Facebook oAuth handshake using C#



9/12

Simplifies authenticationprocess without worryingabout oAuth handshake.

Enables allfeatures ofGraph APIviaJavaScript

The SDK is open source and is available on GitHub.

API is initializedlike this:

FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});

Subscribe toevents, trigger UI interactions, make calls toGraph API.

Social plugins: Embeddable social features to integrate into your site, single line of

code.

Extensions of facebook, ensure data is not shared hosted sites

Login button, Like box, Like button, Comments, Activity feed, Recommendations,

Live stream & FacePile.

JavaScript SDK & social pluginsDevCon 2010



10/12

DEMO: Creating Facebookappwith JavaScript SDK&jQuery



11/12

Facebook Docs

http://developers.facebook.com/docs/

Facebook C# SDK

http://github.com/facebook/csharp-sdk

Facebook JavaScript SDK

http://developers.facebook.com/docs/reference/javascript/

RESOURCES

DevCon 2010



12/12

Twitter:@novogeek Blog: www.novogeek.com


Demo Facebook app: http://apps.facebook.com/devcon-app

devcon2010facebookappsnovogeek-101023135228-phpapp01

Documents