1. DevCon 2010
Hyderabad │ 24th
October
Facebook apps development for web devs
Krishna Chaitanya T │ Future Web Research Lab, SETLabs, Infosys

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

3. Facebook.comDevCon 2010
Hyderabad │ 24th
October

4.  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
Hyderabad │ 24th
October

5.  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 APIDevCon 2010
Hyderabad │ 24th
October

6.  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 appsDevCon 2010
Hyderabad │ 24th
October

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

8. DEMO: Making Facebook oAuth handshake using C#
DevCon 2010
Hyderabad │ 24th
October

9.  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 pluginsDevCon 2010
Hyderabad │ 24th
October

10. DEMO: Creating Facebook app with JavaScript SDK & jQuery
DevCon 2010
Hyderabad │ 24th
October

11.  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
Hyderabad │ 24th
October

12. Twitter: @novogeek │ Blog: www.novogeek.com
DevCon 2010
Hyderabad │ 24th
October
Demo Facebook app: http://apps.facebook.com/devcon-app