opensocial done right€¦ · opensocial done right implementing opensocial for 16m users bastian...

OpenSocial done rightImplementing 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?

How do you integrate OpenSocial in your site?

How to enrich the user experience beyond that?

About VZ-Netzwerke

16.5 million users

40% daily logins

30 minutes per user per day

three networks

Visits April 2010 (IVW)

T-Online

ProSieben

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

and compared with monthly TV reach

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

Apps at VZ-Netzwerke

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

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)

Gadget Features

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

Extendabel

One Gadget - Different Views

Profile Canvas Preview Group Popup Integration

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>

Example

And what is OpenSocial?

Extension of the Gadget JavaScript API

an open standard

enables gadgets to access the social graph of users

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

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

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)

Architecture at VZ-Netzwerke

Get the party started

Apache

Shindig

Partuza

And that‘s all?

Connection to backend

Container logic

Resizing

View navigation

SecurityToken updates

Calling platform dialogs

Preferences

Gallery, Installation Flow, ...

Sandbox

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

Payment

Advertising

Viral features

Taking it one step further

Embedding

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/

Thank you!

Contact:

Bastian Hofmann

[email protected]

http://www.studivz.net/bastian

http://twitter.com/BastianHofmann

opensocial done right€¦ · opensocial done right implementing opensocial for 16m users bastian...

Documents