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 Facebook  Twitter: Information network. Emphasizes content Twitter  Foursquare: Location based social networking Foursquare  LinkedIn, MySpace, NetFlix, Flickr, Delicious, Digg etc LinkedInMySpaceNetFlixFlickrDeliciousDigg  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.Facebook Graph APITwitter API 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 tags make your page equivalent to FB page  Twitter Anywhere/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/49570201848http://graph.facebook.com/49570201848  Object for Microsoft PDC FB page: http://graph.facebook.com/MicrosoftPDChttp://graph.facebook.com/MicrosoftPDC  Meta data: http://graph.facebook.com/MicrosoftPDC?metadata=1http://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’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)register  Use the App Id in FB JavaScript API. jQuery suits perfect for AJAX & other cool stuff.FB JavaScript API virtual techdays Fun with Facebook’s Open Graph API INDIA │ 22-24 November 2010 WE ♥ SOCIAL

6. virtual techdays DEMO: Integrating 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 http://developers.facebook.com/plugins  Twitter widgets  http://dev.twitter.com/anywhere http://dev.twitter.com/anywhere  http://twitter.com/about/resources/widgets http://twitter.com/about/resources/widgets  Facebook SDKs used in demos  C# SDK: http://github.com/facebook/csharp-sdkhttp://github.com/facebook/csharp-sdk  JavaScript SDK: http://developers.facebook.com/docs/reference/javascript/http://developers.facebook.com/docs/reference/javascript/ INDIA │ 22-24 November 2010 WE ♥ SOCIAL

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