OpenSocial done right I mplementing OpenSocial for 16m users - - PowerPoint PPT Presentation

▶
opensocial done right
SMART_READER_LITE
LIVE PREVIEW

OpenSocial done right I mplementing OpenSocial for 16m users - - PowerPoint PPT Presentation

Nov 12, 2022 530 likes •964 views

OpenSocial done right I mplementing OpenSocial for 16m users Bastian Hofmann Montag, 31. Mai 2010 VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net Agenda What is a Gadget? What is OpenSocial? What about privacy?

slide-1
SLIDE 1

OpenSocial done right

I mplementing OpenSocial for 16m users

Bastian Hofmann

Montag, 31. Mai 2010

slide-2
SLIDE 2

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net 2

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?

Montag, 31. Mai 2010

slide-3
SLIDE 3

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net 3

About VZ-Netzwerke

16.5 million users 40% daily logins 30 minutes per user per day three networks

Montag, 31. Mai 2010

slide-4
SLIDE 4

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net 4

Visits April 2010 (I VW)

VZ T

  • Online

MSN Yahoo WKW Bild ProSieben SPON 250.000.000 500.000.000

124.266.343 133.225.524 137.471.037 168.762.246 196.320.307 254.417.174 403.820.631 440.719.168

Montag, 31. Mai 2010

slide-5
SLIDE 5

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net 5

and compared with monthly TV reach

Every VZ-Network surpasses TV in the digital native user group (14 - 29)

Montag, 31. Mai 2010

slide-6
SLIDE 6

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Apps at VZ-Netzwerke

6

Launch Dec. 2009

  • ver 14 million installations

9 million daily page impressions in canvas view

  • ver 60 Apps in Gallery, ca. 140 Apps live

Montag, 31. Mai 2010

slide-7
SLIDE 7

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

Montag, 31. Mai 2010

slide-8
SLIDE 8

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

Montag, 31. Mai 2010

slide-9
SLIDE 9

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

Montag, 31. Mai 2010

slide-10
SLIDE 10

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

One Gadget - Different Views

 Profile  Canvas  Preview  Group  Popup  Integration

10

Montag, 31. Mai 2010

slide-11
SLIDE 11

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Example

11

<?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> Montag, 31. Mai 2010

slide-12
SLIDE 12

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Example

11

<?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> Montag, 31. Mai 2010

slide-13
SLIDE 13

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Example

11

<?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> Montag, 31. Mai 2010

slide-14
SLIDE 14

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Example

11

<?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> Montag, 31. Mai 2010

slide-15
SLIDE 15

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Example

11

<?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> Montag, 31. Mai 2010

slide-16
SLIDE 16

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Example

11

<?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> Montag, 31. Mai 2010

slide-17
SLIDE 17

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Example

11

<?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> Montag, 31. Mai 2010

slide-18
SLIDE 18

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Example

11

<?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> Montag, 31. Mai 2010

slide-19
SLIDE 19

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Example

11

<?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> Montag, 31. Mai 2010

slide-20
SLIDE 20

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

Montag, 31. Mai 2010

slide-21
SLIDE 21

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net 13

Montag, 31. Mai 2010

slide-22
SLIDE 22

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net 14

Montag, 31. Mai 2010

slide-23
SLIDE 23

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

Montag, 31. Mai 2010

slide-24
SLIDE 24

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

Montag, 31. Mai 2010

slide-25
SLIDE 25

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

I mplementing OpenSocial yourself

17

 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)

Montag, 31. Mai 2010

slide-26
SLIDE 26

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Architecture at VZ-Netzwerke

18

Montag, 31. Mai 2010

slide-27
SLIDE 27

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Get the party started

19

 Apache  PHP  MySQL  Shindig  Partuza

Montag, 31. Mai 2010

slide-28
SLIDE 28

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

And that‘s all?

20

Montag, 31. Mai 2010

slide-29
SLIDE 29

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Connection to backend

21

Montag, 31. Mai 2010

slide-30
SLIDE 30

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Container logic

22

 Resizing  View navigation  SecurityToken

updates

 Calling platform

dialogs

 Preferences

Montag, 31. Mai 2010

slide-31
SLIDE 31

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Views

23

Montag, 31. Mai 2010

slide-32
SLIDE 32

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Gallery, I nstallation Flow, ...

24

Montag, 31. Mai 2010

slide-33
SLIDE 33

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Sandbox

25

Montag, 31. Mai 2010

slide-34
SLIDE 34

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Approval process

26

Better quality Better security Apps are less buggy Apps add value for the users Better reach for individual apps More activity in apps

Montag, 31. Mai 2010

slide-35
SLIDE 35

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Payment

27

Montag, 31. Mai 2010

slide-36
SLIDE 36

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Advertising

28

Montag, 31. Mai 2010

slide-37
SLIDE 37

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Viral features

29

Montag, 31. Mai 2010

slide-38
SLIDE 38

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Taking it one step further

30

Montag, 31. Mai 2010

slide-39
SLIDE 39

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net

Embedding

31

Montag, 31. Mai 2010

slide-40
SLIDE 40

VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net 32

Doing it right

Open standards Data privacy Include apps wisely Don‘t forget the developers

Montag, 31. Mai 2010

slide-41
SLIDE 41

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/

33

Montag, 31. Mai 2010

slide-42
SLIDE 42

Thank you!

Contact: Bastian Hofmann bhofmann@vz.net http://www.studivz.net/bastian http://twitter.com/BastianHofmann

Montag, 31. Mai 2010