How to create social games for millions of usersBastian HofmannVZnet Netzwerke Ltd.

• Social games at VZnet

• Introduction to OpenSocial

• Key concepts of OpenSocial

• Demo: Creating a social game

You?

Questions? Ask!

http://slideshare.net/bashofmann

Apps  and  Games  @VZnet

33  Mio.  Installs

1,8  Mio.  DAU

5,5  Mio.  MAU

VZ-­‐Apps  compared  to  other  gaming  sites

  Daily  Unique  Visitors  (Mio) Time  on  Site  (min)

VZ-­‐Apps 1,80 10:50

jetztspielen.de 1,30 13:50

gameduell 1,10 20:00

SpieleFpps.de 1,00 09:00

king.com 1,00 28:00

BigPoint 1,00 05:40

1001spiele.de 0,46 20:00

spielkarussel 0,43 14:40

gamesload 0,29 04:30

feLspielen 0,24 14:20

spielen.de 0,18 12:30

Yahoo!  Spiele 0,16 04:30

spiele-­‐zone.de 0,12 12:00

sevengames 0,11 05:50Google! Adplanner, Feb 2010

Dorfleben  (HalfQuest)

DEMO

• ... a set of APIs to access the social graph of users

• ... a specification for including 3rd party applications (gadgets) into social services

Top  Developers  at  VZnet

Beijing  ELEX4.6  Mio.

Plinga2.08  Mio.

i-­‐Jet  Media1.33  Mio.

Monthly active users within all applications

• XML file with HTML and JavaScript (and CSS, Images, Flash, ...)

• Application based on the Google Gadgets specification

• Can be included on various platforms

What is a Gadget?

Rendering

GADGETapivz.net

CONTAINERmeinvz.net

Social APIs

• OpenSource implementation of an OpenSocial container

• Java and PHP versions available

• New: MySpace is currently open sourcing their .NET implementation

http://shindig.apache.org/

Views

CANVAS

PROFILE

POPUP

GROUP

EMBED

PREVIEW

Features

VIEWER

Authentification

• Two-Legged or Three-Legged OAuth

• Security Token for JavaScript requests from gadget

Application models

JavaScript basedContainervz.net

Gadget apivz.net

Gadget Backendapi.twitter.com

Ajax

HTTP

Shindigapivz.net

HTTP

Containervz.net

Gadget apivz.net

Gadget Backendapi.twitter.com

Shindigapivz.net

Ajax

Ajax

HTTP

Proxy

Containervz.net

Gadget apivz.net

Method Call

- window.postMessage

- Iframes with relay files

- Flash

JavaScript RPC

FlashContainervz.net

Gadget apivz.net Gadget Backend

api.twitter.comHTTP

Shindigapivz.net

Flash

Ajax

HTTP

HTTP

RedirectingContainervz.net

Gadget Backendapi.twitter.com

Shindigapivz.net

iframeapi.twitter.com

HTTP

Ajax

Additional IframeContainervz.net

Gadget apivz.net Gadget Backend

api.twitter.com

Shindigapivz.net

iframe

Ajax

Ajax

HTTP

Let‘s start programming

OpenSocial Templates

OpenSocial on the iPhone

OEmbed

OAuth Proxy Requests

DataPipelining

OSAPI

Proxied Content

https://github.com/bashofmann/opensocial_demo_game

DEMO

Proxied Content

DEMO

OAuth 1.0a Flow +----------+ +---------------+ | -+----(B)-- Request Token -------->| | | End-user | | Authorization | | at |<---(C)-- User authenticates --->| Server | | Browser | | | | -+----(D)-- Verifier -------------<| | +-|----|---+ +---------------+ | | ^ v (B) (D) | | | | | | ^ v | | +---------+ | | | |>---(A)-- Redirect URL ---------------| | | Web |<---(A)-- Request Token + Secret -----| | | Client |>---(E)-- Request Token, Verifier ----' | | |<---(E)-- Access Token + Secret -------------' +---------+

Every Request: Client Credentials, Nonce, Timestamp, Signaturehttp://oauth.net/

DEMO

DEMO

hSp://twiSer.com/BasWanHofmannhSp://studivz.net/basWanhSp://slideshare.net/bashofmannbhofmann@vz.net

hSp://developer.studivz.net