OpenSocialANATOMY AND LIFE CYCLE

Paul Lindner,

Architect, Hi5 Networks

November 27th, 2007

WHAT IS HI5?

• Small Company, Huge Site.• Offering Messaging, Friends,

Video, Music, Groups and more.

• Large international focus• 7+ Billion Pageviews / month• 40+ Million Active users

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

HI5 AND OPENSOCIAL

• Early OpenSocial partner/participant.

• Developer Sandbox - Available now– sandbox.hi5.com

• Focus on international aspects of deploying widgets across our diverse user base.

• Why OpenSocial?– Perfect timing, working on deep media integration with a

number of partners, here and internationally.

• Don’t want to write a custom platform– Embrace Open Standards instead (Atom/FOAF, etc)

ANATOMY

PARTS IS PARTS

• Google Gadgets (iGoogle)

• Atom, AuthSub, and more

• Javascript fu from Blogger, Google Maps

• Add Largest Containers

• Add Largest App Developers

• Mix Well

QuickTime™ and a decompressor

are needed to see this picture.

YOUR APP / GADGET

• Runs on the User Profile Page

• Can run on it’s own Canvas Page

• Interacts with an OpenSocial Container– hi5, Orkut, Plaxo, MySpace, etc

APP / GADGET CONSTRUCTION

• Use what you already know– HTML

– CSS

– JavaScript

– Flash

• Sprinkle with JavaScript– Toolkits help here

• jQuery• Dojo• script.aculo.us

– Firefox + Firebug / Venkman is essential!!

Open Social Basics - People, Activities, Data

• People Data– Get Name/UserPic/URL for the owner / viewer

• Owner = where app is installed• Viewer = who’s using app now

– Get Friends for Owner/Viewer• Filter based on criteria

• Application Data– Get/Set/Update attribute/value data

• Activity Data– Get Activity Feed Entries

• Filter for your App

– Post Activity Feed Entries

DEFINE YOUR APPLICATION

• <Module> <ModulePrefs title="Social Hello World” author=“Elite Hackers” author_email=“feedback@example.com”> <Require feature="opensocial-0.5"/> </ModulePrefs> <Content type="html"> <![CDATA[ App goes here ]]> </Content></Module>

GET PEOPLE DATA

function init() {

jQuery('#listfriends_message').html('Requesting friends...');

var req = opensocial.newDataRequest();

req.add (req.newFetchPersonRequest('VIEWER'), 'viewer');

req.add(req.newFetchPeopleRequest ('VIEWER_FRIENDS'), 'viewerFriends');

req.send(onLoadFriends);

}

GET/SAVE APPLICATION DATA

var colorvalue = “red”;

var req = opensocial.newDataRequest();

req.add(req.newUpdatePersonAppDataRequest( 'VIEWER', ’favorite_color', colorvalue));

req.send();

POST ACTIVITY DATA

var activity = opensocial.newActivity(

opensocial.newStream("main", "gift stream"),

“Paul chose “ + colorvalue + “as his fave”

);

opensocial.requestCreateActivity(activity, "HIGH");

Coming Soon

• OpenSocial Fetch– Securely communicate with your application

• Container Information– What container am I running in..

• Navigation– Profile to Canvas– Canvas to Canvas– Custom URL paths

Request* APIs

• Initiate Container Specific Actions

• RequestMessage()

• RequestAddFriend()

• Request*()

Google Gadgets Extensions

• Many Containers will support these

• IG_Fetch() – retrieve remote content

• IG_Prefs– Store preferences data locally

• Internationalization

• UI Elements (Tabs, Drag, Flash etc)

QuickTime™ and a decompressor

are needed to see this picture.

Data APIs

• Not Available Yet

• Will Provide For:– Mobile Clients– Server-to-Server communication– Desktop Clients– Etc.

• Likely Based on OAuth + AtomPub

QuickTime™ and a decompressor

are needed to see this picture.

Birth, Life, Viral Growth

Birth, Life, Viral Growth

• Step 1 - Build a great App

• Step 2 - ????

• Step 3 - Profit!

Build a Great App

• Show benefit in 30 seconds or less

• Make it dynamic– Appropriate use of AJAX

• Make it pretty

• Make it social– Use Friend Activities to enhance user experience.– Create conversations

Step 2

• Get Listed– Each container will have Application Galleries

• Provide Interactivity on the Profile Page– Guide the user to interact with your application– Ask the user to post Activity data, as appropriate

• Try before you buy (or install)– Engage an anonymous user, allow them to create

something, then request App installation on the profile page.

Profit!

• Monetization efforts are just beginning.

• Google Gadgets supports Advertisements and Analytics modules.

• Hi5 is looking at how to leverage our international deals to give higher CPM/CPC

What Next?

• Deliver on the Promise

• Finalize Security Concerns– Caja, Blacklists

• Open Source Project– Apache Shindig Reference Implementation

• Centralized Directory– Open Open Social Directory.

Questions?

?