OpenSocial Done Right

1,053 views
1,010 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,053
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

OpenSocial Done Right

  1. 1. OpenSocial done right Implementing OpenSocial for 16m users Bastian Hofmann Mittwoch, 2. Juni 2010
  2. 2. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Agenda 2 Mittwoch, 2. Juni 2010
  3. 3. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Agenda  What is a Gadget?  What is OpenSocial?  What about privacy?  How do you integrate OpenSocial in your site?  How to enrich the user experience beyond that? 2 Mittwoch, 2. Juni 2010
  4. 4. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net About VZ-Netzwerke three networks 40% daily logins 16.5 million users 30 minutes per user per day 3 Mittwoch, 2. Juni 2010
  5. 5. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Visits April 2010 (IVW) VZ 440.719.168 T-Online 403.820.631 MSN 254.417.174 Yahoo 196.320.307 WKW 168.762.246 Bild 137.471.037 ProSieben 133.225.524 SPON 124.266.343 0 250.000.000 500.000.000 4 Mittwoch, 2. Juni 2010
  6. 6. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net and compared with monthly TV reach Every VZ-Network surpasses TV in the digital native user group (14 - 29) 5 Mittwoch, 2. Juni 2010
  7. 7. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Apps at VZ-Netzwerke over 60 Apps in Gallery, ca. 140 Apps live Launch Dec. 2009 over 14 million installations 9 million daily page impressions in canvas view 6 Mittwoch, 2. Juni 2010
  8. 8. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net What is a Gadget?  XML file with HTML and JavaScript (and CSS, Images, Flash, ...)  Application based on the Google Gadgets specification  Can be included on various platforms, which support this specification 7 Mittwoch, 2. Juni 2010
  9. 9. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net How to include gadgets?  The Gadget Server  renders the Gadget XML  provides the JavaScript API  provides the REST (or RPC) API  Rendered result is included through an <iframe> into the parent page (Container) 8 Mittwoch, 2. Juni 2010
  10. 10. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Gadget Features  Gadget specification includes a rich JavaScript API with a multitude of features  preferences  views  dynamic-height  flash  io  ...  Extendabel 9 Mittwoch, 2. Juni 2010
  11. 11. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net One Gadget - Different Views 10 Mittwoch, 2. Juni 2010
  12. 12. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net One Gadget - Different Views  Profile 10 Mittwoch, 2. Juni 2010
  13. 13. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net One Gadget - Different Views  Profile  Canvas 10 Mittwoch, 2. Juni 2010
  14. 14. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net One Gadget - Different Views  Profile  Canvas  Preview 10 Mittwoch, 2. Juni 2010
  15. 15. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net One Gadget - Different Views  Profile  Canvas  Preview  Group 10 Mittwoch, 2. Juni 2010
  16. 16. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net One Gadget - Different Views  Profile  Canvas  Preview  Group  Popup 10 Mittwoch, 2. Juni 2010
  17. 17. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net One Gadget - Different Views  Profile  Canvas  Preview  Group  Popup  Integration 10 Mittwoch, 2. Juni 2010
  18. 18. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Example <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="HelloWorld Gadget" > <Require feature="views" /> </ModulePrefs> <Content type="html" view="profile"><![CDATA[ <h1>Hello World!</h1> <a href="javascript:gadgets.views.requestNavigateTo(                             gadgets.views.getSupportedViews()['canvas'],                             {'name':'Bastian'})">go to canvas</a> ]]></Content> <Content type="html" view="canvas,popup"><![CDATA[   <h1 id="View"></h1><h1 id="Greeting"></h1> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { document.getElementById('View').innerHTML = 'This is the ' + gadgets.views.getCurrentView().getName() + ' view'; document.getElementById('Greeting').innerHTML = 'Hello ' + gadgets.views.getParams()['name']; });   </script> ]]></Content> </Module> 11 Mittwoch, 2. Juni 2010
  19. 19. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Example <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="HelloWorld Gadget" > <Require feature="views" /> </ModulePrefs> <Content type="html" view="profile"><![CDATA[ <h1>Hello World!</h1> <a href="javascript:gadgets.views.requestNavigateTo(                             gadgets.views.getSupportedViews()['canvas'],                             {'name':'Bastian'})">go to canvas</a> ]]></Content> <Content type="html" view="canvas,popup"><![CDATA[   <h1 id="View"></h1><h1 id="Greeting"></h1> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { document.getElementById('View').innerHTML = 'This is the ' + gadgets.views.getCurrentView().getName() + ' view'; document.getElementById('Greeting').innerHTML = 'Hello ' + gadgets.views.getParams()['name']; });   </script> ]]></Content> </Module> 11 Mittwoch, 2. Juni 2010
  20. 20. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Example <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="HelloWorld Gadget" > <Require feature="views" /> </ModulePrefs> <Content type="html" view="profile"><![CDATA[ <h1>Hello World!</h1> <a href="javascript:gadgets.views.requestNavigateTo(                             gadgets.views.getSupportedViews()['canvas'],                             {'name':'Bastian'})">go to canvas</a> ]]></Content> <Content type="html" view="canvas,popup"><![CDATA[   <h1 id="View"></h1><h1 id="Greeting"></h1> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { document.getElementById('View').innerHTML = 'This is the ' + gadgets.views.getCurrentView().getName() + ' view'; document.getElementById('Greeting').innerHTML = 'Hello ' + gadgets.views.getParams()['name']; });   </script> ]]></Content> </Module> 11 Mittwoch, 2. Juni 2010
  21. 21. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Example <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="HelloWorld Gadget" > <Require feature="views" /> </ModulePrefs> <Content type="html" view="profile"><![CDATA[ <h1>Hello World!</h1> <a href="javascript:gadgets.views.requestNavigateTo(                             gadgets.views.getSupportedViews()['canvas'],                             {'name':'Bastian'})">go to canvas</a> ]]></Content> <Content type="html" view="canvas,popup"><![CDATA[   <h1 id="View"></h1><h1 id="Greeting"></h1> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { document.getElementById('View').innerHTML = 'This is the ' + gadgets.views.getCurrentView().getName() + ' view'; document.getElementById('Greeting').innerHTML = 'Hello ' + gadgets.views.getParams()['name']; });   </script> ]]></Content> </Module> 11 Mittwoch, 2. Juni 2010
  22. 22. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Example <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="HelloWorld Gadget" > <Require feature="views" /> </ModulePrefs> <Content type="html" view="profile"><![CDATA[ <h1>Hello World!</h1> <a href="javascript:gadgets.views.requestNavigateTo(                             gadgets.views.getSupportedViews()['canvas'],                             {'name':'Bastian'})">go to canvas</a> ]]></Content> <Content type="html" view="canvas,popup"><![CDATA[   <h1 id="View"></h1><h1 id="Greeting"></h1> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { document.getElementById('View').innerHTML = 'This is the ' + gadgets.views.getCurrentView().getName() + ' view'; document.getElementById('Greeting').innerHTML = 'Hello ' + gadgets.views.getParams()['name']; });   </script> ]]></Content> </Module> 11 Mittwoch, 2. Juni 2010
  23. 23. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Example <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="HelloWorld Gadget" > <Require feature="views" /> </ModulePrefs> <Content type="html" view="profile"><![CDATA[ <h1>Hello World!</h1> <a href="javascript:gadgets.views.requestNavigateTo(                             gadgets.views.getSupportedViews()['canvas'],                             {'name':'Bastian'})">go to canvas</a> ]]></Content> <Content type="html" view="canvas,popup"><![CDATA[   <h1 id="View"></h1><h1 id="Greeting"></h1> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { document.getElementById('View').innerHTML = 'This is the ' + gadgets.views.getCurrentView().getName() + ' view'; document.getElementById('Greeting').innerHTML = 'Hello ' + gadgets.views.getParams()['name']; });   </script> ]]></Content> </Module> 11 Mittwoch, 2. Juni 2010
  24. 24. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Example <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="HelloWorld Gadget" > <Require feature="views" /> </ModulePrefs> <Content type="html" view="profile"><![CDATA[ <h1>Hello World!</h1> <a href="javascript:gadgets.views.requestNavigateTo(                             gadgets.views.getSupportedViews()['canvas'],                             {'name':'Bastian'})">go to canvas</a> ]]></Content> <Content type="html" view="canvas,popup"><![CDATA[   <h1 id="View"></h1><h1 id="Greeting"></h1> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { document.getElementById('View').innerHTML = 'This is the ' + gadgets.views.getCurrentView().getName() + ' view'; document.getElementById('Greeting').innerHTML = 'Hello ' + gadgets.views.getParams()['name']; });   </script> ]]></Content> </Module> 11 Mittwoch, 2. Juni 2010
  25. 25. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Example <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="HelloWorld Gadget" > <Require feature="views" /> </ModulePrefs> <Content type="html" view="profile"><![CDATA[ <h1>Hello World!</h1> <a href="javascript:gadgets.views.requestNavigateTo(                             gadgets.views.getSupportedViews()['canvas'],                             {'name':'Bastian'})">go to canvas</a> ]]></Content> <Content type="html" view="canvas,popup"><![CDATA[   <h1 id="View"></h1><h1 id="Greeting"></h1> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { document.getElementById('View').innerHTML = 'This is the ' + gadgets.views.getCurrentView().getName() + ' view'; document.getElementById('Greeting').innerHTML = 'Hello ' + gadgets.views.getParams()['name']; });   </script> ]]></Content> </Module> 11 Mittwoch, 2. Juni 2010
  26. 26. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Example <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="HelloWorld Gadget" > <Require feature="views" /> </ModulePrefs> <Content type="html" view="profile"><![CDATA[ <h1>Hello World!</h1> <a href="javascript:gadgets.views.requestNavigateTo(                             gadgets.views.getSupportedViews()['canvas'],                             {'name':'Bastian'})">go to canvas</a> ]]></Content> <Content type="html" view="canvas,popup"><![CDATA[   <h1 id="View"></h1><h1 id="Greeting"></h1> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { document.getElementById('View').innerHTML = 'This is the ' + gadgets.views.getCurrentView().getName() + ' view'; document.getElementById('Greeting').innerHTML = 'Hello ' + gadgets.views.getParams()['name']; });   </script> ]]></Content> </Module> 11 Mittwoch, 2. Juni 2010
  27. 27. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Example <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="HelloWorld Gadget" > <Require feature="views" /> </ModulePrefs> <Content type="html" view="profile"><![CDATA[ <h1>Hello World!</h1> <a href="javascript:gadgets.views.requestNavigateTo(                             gadgets.views.getSupportedViews()['canvas'],                             {'name':'Bastian'})">go to canvas</a> ]]></Content> <Content type="html" view="canvas,popup"><![CDATA[   <h1 id="View"></h1><h1 id="Greeting"></h1> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { document.getElementById('View').innerHTML = 'This is the ' + gadgets.views.getCurrentView().getName() + ' view'; document.getElementById('Greeting').innerHTML = 'Hello ' + gadgets.views.getParams()['name']; });   </script> ]]></Content> </Module> 11 Mittwoch, 2. Juni 2010
  28. 28. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net And what is OpenSocial?  Extension of the Gadget JavaScript API  an open standard  enables gadgets to access the social graph of users 12 Mittwoch, 2. Juni 2010
  29. 29. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net 13 Mittwoch, 2. Juni 2010
  30. 30. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net 13 Mittwoch, 2. Juni 2010
  31. 31. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net 14 Mittwoch, 2. Juni 2010
  32. 32. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net What about privacy? Example of our solution. 15 Mittwoch, 2. Juni 2010
  33. 33. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net What about privacy? Example of our solution.  Visibility 15 Mittwoch, 2. Juni 2010
  34. 34. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net What about privacy? Example of our solution.  Visibility  Visibility on a user‘s profile page can be changed individually for friends or other people. 15 Mittwoch, 2. Juni 2010
  35. 35. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net What about privacy? Example of our solution.  Visibility  Visibility on a user‘s profile page can be changed individually for friends or other people. 15 Mittwoch, 2. Juni 2010
  36. 36. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net What about privacy? Example of our solution.  Visibility  Visibility on a user‘s profile page can be changed individually for friends or other people.  Communication 15 Mittwoch, 2. Juni 2010
  37. 37. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net What about privacy? Example of our solution.  Visibility  Visibility on a user‘s profile page can be changed individually for friends or other people.  Communication  Gadget needs user permissions for communication (Messages, Activity Stream, Notifications, ...) 15 Mittwoch, 2. Juni 2010
  38. 38. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net What about privacy? Example of our solution.  Visibility  Visibility on a user‘s profile page can be changed individually for friends or other people.  Communication  Gadget needs user permissions for communication (Messages, Activity Stream, Notifications, ...) 15 Mittwoch, 2. Juni 2010
  39. 39. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net What about privacy? Example of our solution.  Visibility  Visibility on a user‘s profile page can be changed individually for friends or other people.  Communication  Gadget needs user permissions for communication (Messages, Activity Stream, Notifications, ...)  Access 15 Mittwoch, 2. Juni 2010
  40. 40. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net What about privacy? Example of our solution.  Visibility  Visibility on a user‘s profile page can be changed individually for friends or other people.  Communication  Gadget needs user permissions for communication (Messages, Activity Stream, Notifications, ...)  Access  Access to user data is handled through a special vcard 15 Mittwoch, 2. Juni 2010
  41. 41. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net VCards 16 Mittwoch, 2. Juni 2010
  42. 42. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net VCards  Wile installing a gadget, the user has to assign an existing or new vcard to it 16 Mittwoch, 2. Juni 2010
  43. 43. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net VCards  Wile installing a gadget, the user has to assign an existing or new vcard to it 16 Mittwoch, 2. Juni 2010
  44. 44. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net VCards  Wile installing a gadget, the user has to assign an existing or new vcard to it  Data on vcard can differ to the user‘s profile 16 Mittwoch, 2. Juni 2010
  45. 45. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net VCards  Wile installing a gadget, the user has to assign an existing or new vcard to it  Data on vcard can differ to the user‘s profile 16 Mittwoch, 2. Juni 2010
  46. 46. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net VCards  Wile installing a gadget, the user has to assign an existing or new vcard to it  Data on vcard can differ to the user‘s profile  Gadget has only access to data of users which have installed the gadget 16 Mittwoch, 2. Juni 2010
  47. 47. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Implementing OpenSocial yourself  Reference OpenSource Implementation: Apache Shindig  Available as Java and PHP version  Gadget Container JavaScript  Gadget Rendering Server  OpenSocial Container JavaScript  OpenSocial Data Server (REST + RPC) 17 Mittwoch, 2. Juni 2010
  48. 48. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Get the party started  Apache  PHP  MySQL  Shindig  Partuza 18 Mittwoch, 2. Juni 2010
  49. 49. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net And that‘s all? 19 Mittwoch, 2. Juni 2010
  50. 50. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Connection to backend 20 Mittwoch, 2. Juni 2010
  51. 51. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Container logic  Resizing  View navigation  SecurityToken updates  Calling platform dialogs  Preferences 21 Mittwoch, 2. Juni 2010
  52. 52. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Views 22 Mittwoch, 2. Juni 2010
  53. 53. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Gallery, Installation Flow, ... 23 Mittwoch, 2. Juni 2010
  54. 54. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Sandbox 24 Mittwoch, 2. Juni 2010
  55. 55. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Approval process Better quality Better security Apps are less buggy Apps add value for the users Better reach for individual apps More activity in apps 25 Mittwoch, 2. Juni 2010
  56. 56. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Payment 26 Mittwoch, 2. Juni 2010
  57. 57. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Advertising 27 Mittwoch, 2. Juni 2010
  58. 58. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Viral features 28 Mittwoch, 2. Juni 2010
  59. 59. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Taking it one step further 29 Mittwoch, 2. Juni 2010
  60. 60. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Embedding 30 Mittwoch, 2. Juni 2010
  61. 61. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Doing it right 31 Mittwoch, 2. Juni 2010
  62. 62. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Doing it right Open standards Data privacy Include apps wisely Don‘t forget the developers 31 Mittwoch, 2. Juni 2010
  63. 63. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Further information ...  http://www.opensocial.org  Our blog: http://developer.studivz.net  Our wiki: http://developer.studivz.net/wiki  Become a developer and get access to our sandbox: http://www.studivz.net/Developer and http://www.meinvz.net/Developer  Or implement an OpenSocial container yourself: http://shindig.apache.org/ http://code.google.com/p/partuza/ 32 Mittwoch, 2. Juni 2010
  64. 64. Thank you! Contact: Bastian Hofmann bhofmann@vz.net http://www.studivz.net/bastian http://www.meinvz.net/bastian http://twitter.com/BastianHofmann http://www.slideshare.net/bashofmann Mittwoch, 2. Juni 2010

×