Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Virtual Tech Days 2010 - Integrating Social Networks with ASP.NET

8,409 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Virtual Tech Days 2010 - Integrating Social Networks with ASP.NET

  1. 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. 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. 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. 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. 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. 6. virtual techdays DEMO: Facebook social plugins, Twitter widget INDIA │ 22-24 November 2010 WE SOCIAL♥
  7. 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. 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. 9. virtual techdays DEMO: Fetching Facebook friends list using C# INDIA │ 22-24 November 2010 WE SOCIAL♥
  10. 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. 11. virtual techdays Twitter: @novogeek │ Blog: www.novogeek.com INDIA │ 22-24 November 2010 WE SOCIAL♥

×