OpenSocial Done Right

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



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?



3

About VZ-Netzwerke

16.5 million users

40% daily logins

30 minutes per user per day

three networks



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



5

and compared with monthly TV reach

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



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



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



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



Gadget Features

Gadget specification includes a rich JavaScript API with a multitude of features preferences views dynamic-height flash io ...

Extendabel

9



One Gadget - Different Views

10




Profile

10




Profile Canvas

10




Profile Canvas Preview

10




Profile Canvas Preview Group

10




Profile Canvas Preview Group Popup

10




Profile Canvas Preview Group Popup Integration

10



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>



Example

11




Example

11




Example

11




Example

11




Example

11




Example

11




Example

11




Example

11




Example

11




And what is OpenSocial?

Extension of the Gadget JavaScript API

an open standard

enables gadgets to access the social graph of users

12



13



13



14



What about privacy? Example of our solution.

15




Visibility

15




Visibility Visibility on a user‘s profile page can be changed individually for

friends or other people.

15






15






Communication

15






Communication Gadget needs user permissions for communication (Messages, Activity

Stream, Notifications, ...)

15








15








Access

15








Access Access to user data is handled through a special vcard

15



VCards

16



VCards

Wile installing a gadget, the user has to assign an existing or new vcard to it

16



VCards


16



VCards


Data on vcard can differ to the user‘s profile

16



VCards



16



VCards



Gadget has only access to data of users which have installed the gadget

16



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)



Get the party started

18

Apache

PHP

MySQL

Shindig

Partuza



And that‘s all?

19



Connection to backend

20



Container logic

21

Resizing

View navigation

SecurityToken updates

Calling platform dialogs

Preferences



Views

22



Gallery, Installation Flow, ...

23



Sandbox

24



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



Payment

26



Advertising

27



Viral features

28



Taking it one step further

29



Embedding

30



31

Doing it right



31

Doing it right

Open standards

Data privacy

Include apps wisely

Don‘t forget the developers



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




http://developer.studivz.net

http://developer.studivz.net

http://developer.studivz.net/wiki

http://developer.studivz.net/wiki

http://www.studivz.net/Developer

http://www.studivz.net/Developer

http://www.meinvz.net/Developer

http://www.meinvz.net/Developer

http://incubator.apache.org/shindig/

http://incubator.apache.org/shindig/

http://code.google.com/p/partuza/

http://code.google.com/p/partuza/

Thank you!

Contact:

Bastian Hofmann

[email protected]

http://www.studivz.net/bastian http://www.meinvz.net/bastian

http://twitter.com/BastianHofmann

http://www.slideshare.net/bashofmann


mailto:[email protected]

mailto:[email protected]

http://www.studivz.net/bastian

http://www.studivz.net/bastian

http://www.meinvz.net/bastian

http://www.meinvz.net/bastian





Technology

OpenSocial Done Right