1. virtual techdays
INDIA │ 22-24 November 2010
Integrating Social Networks with ASP.NET
Krishna Chaitanya T │ Future Web Research Lab, SETLabs, Infosys
WE SOCIAL♥

2.  Overview of the social web
 Trends, Platforms and APIs
 Enhancing websites with social experiences
 Facebook for websites
 Twitter widgets
 Fun with Facebook’s Open Graph API
 App setup in FB platform
 jQuery + JavaScript SDK
 The oAuth handshake flow
 Implementing FB oAuth using C#
virtual techdays
S E S S I O N A G E N D A
INDIA │ 22-24 November 2010 WE SOCIAL♥

3.  Trends
 Web 1.0: Static, centralized, users read content, publishing rather than participation.
 Web 2.0: Dynamic, decentralized, AJAX, widgets, sharing, mashups, mobile, real time,
collective minds, interactive, location based
 Platforms
 Facebook: Building social connections. Emphasizes profiles & people
 Twitter: Information network. Emphasizes content
 Foursquare: Location based social networking
 LinkedIn, MySpace, NetFlix, Flickr, Delicious, Digg etc
 APIs
 Every social network has its own REST based API, (mostly) sticking to open standards.
 This session concentrates on: Facebook Graph API, Twitter API for ASP.NET sites.
virtual techdays
Overview of the social web
INDIA │ 22-24 November 2010 WE SOCIAL♥

4.  Websites can be made more social and interactive within minutes
 Facebook social plugins for websites
 Extensions of facebook, very simple code
 Login button – login to your site with FB auth
 Like Button – share pages from your site to FB
 Others include: Comments, Activity Feed, Like Box, Face Pile, Live Stream
 Open Graph <meta> tags make your page equivalent to FB page
 Twitter Everywhere/widgets
 Twitter updates on your website
 Search Widget – display real time tweets for live events
 Facebook-Twitter Integration app
 For more control & customization, we need to play with core APIs.
virtual techdays
Enhancing websites with social experiences
INDIA │ 22-24 November 2010 WE SOCIAL♥

5.  Rest based API, unique ID per object, JSON response. Public data queries:
 Object for VTD FB page: http://graph.facebook.com/49570201848
 Object for Microsoft PDC FB page: http://graph.facebook.com/MicrosoftPDC
 Meta data: http://graph.facebook.com/MicrosoftPDC?metadata=1
 For querying private data, access token is required via FB authorization
 PDC Statuses: http://graph.facebook.com/microsoftpdc/statuses?accesstoken=‘token’
 To use graph API with JavaScript SDK:
 you need to register an FB app and get application ID (app Id)
 Use the App Id in FB JavaScript API. jQuery suits perfect for AJAX & other cool stuff.
virtual techdays
Fun with Facebook’s Open Graph API
INDIA │ 22-24 November 2010 WE SOCIAL♥

6. virtual techdays
DEMO: Facebook social plugins, Twitter widget
INDIA │ 22-24 November 2010 WE SOCIAL♥

7.  Most social n/w use oAuth protocol for authorization. [oAuth=‘no passwords please’]
 FB JavaScript SDK simplifies login/signup without worrying about oAuth protocol.
 To get FB “access token” programmatically, oAuth flow should be understood. Here are the
steps of oAuth flow:
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=...
virtual techdays Querying private data…
INDIA │ 22-24 November 2010 WE SOCIAL♥

8. virtual techdays oAuth handshake Flow Diagram
[Note: This is a generic oAuth flow diagram applicable to all social network APIs.]
INDIA │ 22-24 November 2010 WE SOCIAL♥

9. virtual techdays
DEMO: Fetching Facebook friends list using C#
INDIA │ 22-24 November 2010 WE SOCIAL♥

10. virtual techdays
RESOURCES
 Facebook social plugins
 http://developers.facebook.com/plugins
 Twitter widgets
 http://twitter.com/about/resources/widgets
 Facebook SDKs used in demos
 C# SDK: http://github.com/facebook/csharp-sdk
 JavaScript SDK: http://developers.facebook.com/docs/reference/javascript/
INDIA │ 22-24 November 2010 WE SOCIAL♥

11. virtual techdays
Twitter: @novogeek │ Blog: www.novogeek.com
INDIA │ 22-24 November 2010 WE SOCIAL♥