The Open & Social Web - Kings of Code 2009

3,902 views
3,789 views

Published on

Slides from the Open & Social Web presentation at the 2009 Kings of Code conference.

Published in: Technology, News & Politics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,902
On SlideShare
0
From Embeds
0
Number of Embeds
1,318
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

The Open & Social Web - Kings of Code 2009

  1. 1. The Open & Social Web Chris Chabot Developer Advocate, Google
  2. 2. The Web is better when it’s Social David Glazer, Director of Engineering at the launch of OpenSocial, Nov 2007
  3. 3. a.k.a. “The Registration Hell”
  4. 4. a.k.a. “The Registration Hell” 92% Success Rate!
  5. 5. OpenSocial’s Growth
  6. 6. In other words..
  7. 7. The Web is going social ... and the Social Web is going open
  8. 8. Using OpenSocial OpenSocial Concepts
  9. 9. What OpenSocial Provides
  10. 10. Using OpenSocial - Viewer and Owner Dan (OWNER) Chris (VIEWER)
  11. 11. Using OpenSocial - Viewer and Owner http://chabotc.com (OWNER) Chris (VIEWER)
  12. 12. Using OpenSocial - Viewer and Owner Dan’s Friends (OWNER FRIENDS)
  13. 13. Using OpenSocial - Viewer and Owner My Friends (VIEWER FRIENDS)
  14. 14. Using OpenSocial - Views • OpenSocial differentiates different page types – Home • Personal home page • Owner == Viewer – Profile • Someone else looking at your page • Owner && Viewer – Canvas • Full screen gadget view • Owner && Viewer
  15. 15. HTML XML JS Writing a Gadget
  16. 16. OpenSocial Gadget - Gadget XML <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Hello World!"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html" view=”profile”> <![CDATA[ Hello, world! ]]> </Content> </Module>
  17. 17. OpenSocial Gadget - onLoad handler <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Hello World!"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"> <![CDATA[ <script type=”text/javascript”> function init() { loadFriends(); } gadgets.util.registerOnLoadHandler(init); </script> ]]> </Content> </Module>
  18. 18. OpenSocial Gadget - Fetching Friends function loadFriends() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest( opensocial.IdSpec.PersonId.VIEWER),'viewer'); var viewerFriends = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIENDS" }); req.add( req.newFetchPeopleRequest( viewerFriends), 'viewerFriends'); req.send(onLoadFriends); }
  19. 19. OpenSocial Gadget - Using the result function onLoadFriends(data) { var viewer = data.get('viewer').getData(); var viewerFriends = data.get('viewerFriends').getData();   html = new Array(); html.push('<ul>'); viewerFriends.each(function(person) { html.push( '<li>' + person.getDisplayName() + "</li>" ); }); html.push('</ul>'); document.getElementById('friends').innerHTML = html.join(''); }
  20. 20. OpenSocial Gadget - OSDA http://osda.appspot.com
  21. 21. OpenSocial Gadget - OSDA
  22. 22. OpenSocial Gadget - OSDA
  23. 23. Server to Server
  24. 24. OpenSocial - OpenSocial Client Libraries • For Server to Server, use the REST API • Libraries exist for popular languages: – http://code.google.com/p/opensocial-php-client/ – http://code.google.com/p/opensocial-java-client/ – http://code.google.com/p/opensocial-ruby-client/ – http://code.google.com/p/opensocial-python-client/ – http://code.google.com/p/opensocial-as3-client/ 36
  25. 25. OpenSocial - OpenSocial Client Libraries <?php $storage = new osapiFileStorage('/tmp/osapi'); $provider = new osapiNetlogProvider(); $auth = osapiOAuth3Legged::performOAuthLogin(....); $osapi = new osapi($provider, $auth); $batch = $osapi->newBatch(); $batch->add( $osapi->people->get( array( 'userId' => $userId, 'groupId' => '@self' ), 'self'); $result = $batch->execute(); ?>
  26. 26. OpenSocial - OpenSocial Client Libraries • iGoogle, Gmail • $provider = new osapiGoogleProvider(); • Google Friend Connect • $provider = new osapiFriendConnectProvider(); • Hi5 • $provider = new osapiNetlogProvider(); • MySpace • $provider = new osapiMySpaceProvider(); • Netlog • $provider = new osapiNetlogProvider(); • orkut • $provider = new osapiOrkutProvider(); • Partuza • $provider = new osapiPartuzaProvider(); • Plaxo • $provider = new osapiPlaxoProvider(); • XRDS (discovery) • $provider = new osapiXRDSProvider(‘http://www.example.org’); • Custom • $provider = new osapiProvider(‘requestTokenUrl’, ‘authUrl’, ‘accessTokenUrl’, ‘restEndpoint’, ‘rpcEndpoint’);
  27. 27. Social, anywhere?
  28. 28. Google Friend Connect • May 2008 Google Friend Connect preview – Preview release, for whitelisted sites only – Make your website social – Long tail, no technical skills required – Copy and past javascript – Add OpenSocial applications • December 2008 General availability • February 2009 Social bar – Easier integration • March 2009 – Allow deep customized integration through outside of IFrame JS – Server side integration (REST API’s) 40
  29. 29. Friend Connect - outside of the IFrame
  30. 30. Friend Connect - outside of the IFrame http://www.ossamples.com/api/
  31. 31. Friend Connect - outside of the IFrame
  32. 32. Friend Connect - REST API
  33. 33. OpenSocial - What’s ahead ? OpenSocial 0.9 and beyond
  34. 34. Proxied Content
  35. 35. Proxied Content
  36. 36. Proxied Content <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Hello World!"> <Require feature="opensocial-0.9"/> </ModulePrefs> <Content view=”profile” type="html" href=”http://example.org/profile.php”> <os:ViewerRequest key="vwr"/> <os:OwnerRequest key="ownr"/> </Content> </Module>
  37. 37. Lightweight JS - OSAPI osapi.people.getViewer({ fields: ['name', 'birthday'] }).execute(function(result) { alert('Your name is ' + result.name + '!'); alert('Your birthday is ' + result.birthday + '!'); });
  38. 38. OSML tags • OpenSocial Markup Language • os:PeopleSelector • os:Name • os:Badge • os:Get <form action="/top_friends.php" method="POST"> Select your top 8 friends: <os:PeopleSelector group="${ViewerFriends}" multiple="true" max="8" inputName="top8" /> </form>
  39. 39. OpenSocial Templating & Data-Pipelining ... <Require feature="opensocial-data" /> <Require feature="opensocial-templates"> ... <script type="text/os-data" xmlns:os="http://ns.opensocial.org/2008/markup"> <os:HttpRequest key="song" href="http://mysongserver.com"/ </script>   <script type="text/os-template"> <a href="${song.url}"> <img src="${song.albumThumbnail}"/> ${song.title} By ${song.artist} From ${song.album} </a> </script>
  40. 40. And going to new places..
  41. 41. Going to new places..
  42. 42. Going to new places..
  43. 43. Going to new places..
  44. 44. Going to new places..
  45. 45. Resources Getting started: http://www.opensocial.org/ Documentation: http://wiki.opensocial.org Friend Connect: http://www.google.com/friendconnect
  46. 46. Google I/O Social Videos Find them at: http://code.google.com/events/io/sessions.htm • Beyond Cut & Paste: Deep integrations with Google Friend Connect • Building a Business with Social Apps • Designing OpenSocial Apps for Speed and Scale • Google and the Social Web • Google Friend Connect Gadgets: Best Practices in Code and Interaction Design • Google Friend Connect In The Real World • Powering Mobile Apps with Social Data • The Social Web: An Implementor's Guide
  47. 47. The Open & Social Web Q&A

×