Unleash Your Potential - Namagunga Girls Coding Club
OpenSocial Done Right
1. OpenSocial done right
Implementing OpenSocial for 16m users
Bastian Hofmann
Mittwoch, 2. Juni 2010
2. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Agenda
2
Mittwoch, 2. Juni 2010
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. 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. 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. 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. 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. 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. 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. 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. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
One Gadget - Different Views
10
Mittwoch, 2. Juni 2010
12. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
One Gadget - Different Views
Profile
10
Mittwoch, 2. Juni 2010
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
13
Mittwoch, 2. Juni 2010
30. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
13
Mittwoch, 2. Juni 2010
31. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
14
Mittwoch, 2. Juni 2010
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. 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. 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. 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. 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. 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. 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. 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. 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. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
VCards
16
Mittwoch, 2. Juni 2010
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. 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. 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. 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. 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. 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. 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. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
And that‘s all?
19
Mittwoch, 2. Juni 2010
50. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Connection to backend
20
Mittwoch, 2. Juni 2010
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. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Views
22
Mittwoch, 2. Juni 2010
53. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Gallery, Installation Flow, ...
23
Mittwoch, 2. Juni 2010
54. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Sandbox
24
Mittwoch, 2. Juni 2010
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. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Payment
26
Mittwoch, 2. Juni 2010
57. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Advertising
27
Mittwoch, 2. Juni 2010
58. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Viral features
28
Mittwoch, 2. Juni 2010
59. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Taking it one step further
29
Mittwoch, 2. Juni 2010
60. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Embedding
30
Mittwoch, 2. Juni 2010
61. VZnet Netzwerke Ltd. l studiVZ.net l schuelerVZ.net l meinVZ.net
Doing it right
31
Mittwoch, 2. Juni 2010
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. 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
