OpenSocial done rightImplementing OpenSocial for 16m users
Bastian Hofmann
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
2
Agenda
Mittwoch, 2. Juni 2010
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?
Mittwoch, 2. Juni 2010
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
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
4
Visits April 2010 (IVW)
VZ
T-Online
MSN
Yahoo
WKW
Bild
ProSieben
SPON
0 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
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
5
and compared with monthly TV reach
Every VZ-Network surpasses TV inthe digital native user group (14 - 29)
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Apps at VZ-Netzwerke
6
Launch Dec. 2009
over 14 million installations
9 million daily page impressions in canvas view
over 60 Apps in Gallery, ca. 140 Apps live
Mittwoch, 2. Juni 2010
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
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
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
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
One Gadget - Different Views
10
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
One Gadget - Different Views
Profile
10
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
One Gadget - Different Views
Profile Canvas
10
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
One Gadget - Different Views
Profile Canvas Preview
10
Mittwoch, 2. Juni 2010
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
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
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
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>
Mittwoch, 2. Juni 2010
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>
Mittwoch, 2. Juni 2010
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>
Mittwoch, 2. Juni 2010
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>
Mittwoch, 2. Juni 2010
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>
Mittwoch, 2. Juni 2010
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>
Mittwoch, 2. Juni 2010
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>
Mittwoch, 2. Juni 2010
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>
Mittwoch, 2. Juni 2010
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>
Mittwoch, 2. Juni 2010
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>
Mittwoch, 2. Juni 2010
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
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
13
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
13
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
14
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
What about privacy? Example of our solution.
15
Mittwoch, 2. Juni 2010
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
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
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
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
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
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
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
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
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
VCards
16
Mittwoch, 2. Juni 2010
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
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
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
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
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
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Implementing 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)
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Get the party started
18
Apache
PHP
MySQL
Shindig
Partuza
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
And that‘s all?
19
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Connection to backend
20
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Container logic
21
Resizing
View navigation
SecurityToken updates
Calling platform dialogs
Preferences
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Views
22
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Gallery, Installation Flow, ...
23
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Sandbox
24
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Approval process
25
Better quality
Better security
Apps are less buggy
Apps add value for the users
Better reach for individual apps
More activity in apps
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Payment
26
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Advertising
27
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Viral features
28
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Taking it one step further
29
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Embedding
30
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
31
Doing it right
Mittwoch, 2. Juni 2010
VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
31
Doing it right
Open standards
Data privacy
Include apps wisely
Don‘t forget the developers
Mittwoch, 2. Juni 2010
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
Thank you!
Contact:
Bastian Hofmann
http://www.studivz.net/bastian http://www.meinvz.net/bastian
http://twitter.com/BastianHofmann
http://www.slideshare.net/bashofmann
Mittwoch, 2. Juni 2010
Top Related