virtual techdaysINDIA │ 22-24 November 2010

Integrating Social Networks with ASP.NETKrishna Chaitanya T │ Future Web Research Lab, SETLabs, Infosys

WE SOCIAL♥

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

INDIA │ 22-24 November 2010 WE SOCIAL♥

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 techdaysOverview of the social web

INDIA │ 22-24 November 2010 WE SOCIAL♥

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 techdaysEnhancing websites with social experiences

INDIA │ 22-24 November 2010 WE SOCIAL♥

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 techdaysFun with Facebook’s Open Graph API

INDIA │ 22-24 November 2010 WE SOCIAL♥

virtual techdays

DEMO: Facebook social plugins, Twitter widget

INDIA │ 22-24 November 2010 WE SOCIAL♥

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♥

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♥

virtual techdays

DEMO: Fetching Facebook friends list using C#

INDIA │ 22-24 November 2010 WE SOCIAL♥

virtual techdaysRESOURCES

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♥

virtual techdays

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

INDIA │ 22-24 November 2010 WE SOCIAL♥