DevCon 2010Hyderabad │ 24th October

Facebook apps development for web devs

Krishna Chaitanya T │ Future Web Research Lab, SETLabs, Infosys

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 I O N A G E N D A

DevCon 2010Hyderabad │ 24th October

Facebook.com

DevCon 2010Hyderabad │ 24th October

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

OVERVIEW

DevCon 2010Hyderabad │ 24th October

Provides consistent view of FB social graph Every object in the social graph has unique ID Query: https://graph.facebook.com/[ID or UserName] All objects are accessible similarly & all responses are JSON objects

Object for MUGH group: http://graph.facebook.com/themugh Picture of Bill Gates: http://graph.facebook.com/billgates/picture

Connections: Relationships b/w objects(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 People attending DevCon: https://graph.facebook.com/152359924805795/attending

Facebook Graph API

DevCon 2010Hyderabad │ 24th October

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”. We’ll 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 FB apps

DevCon 2010Hyderabad │ 24th October

FB uses oAuth 2.0 protocol for authentication. Authorized requests to Facebook require access token . Here are 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_uri” with the parameter “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 the above request, Facebook returns “access_token”. Use this to make authorized requests like :

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

Facebook Authentication

DevCon 2010Hyderabad │ 24th October

DEMO: Making Facebook oAuth handshake using C#

DevCon 2010Hyderabad │ 24th October

Simplifies authentication process without worrying about oAuth handshake. Enables all features of Graph API via JavaScript

The SDK is open source and is available on GitHub. API is initialized like this:

FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); Subscribe to events, trigger UI interactions, make calls to Graph 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 plugins

DevCon 2010Hyderabad │ 24th October

DEMO: Creating Facebook app with JavaScript SDK & jQuery

DevCon 2010Hyderabad │ 24th October

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 2010Hyderabad │ 24th October

Twitter: @novogeek │ Blog: www.novogeek.com

DevCon 2010Hyderabad │ 24th October

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