1. OpenSocial ANATOMY AND LIFE CYCLE Paul Lindner, Architect, Hi5 Networks November 27th, 2007

2. 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

3. 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)

4. ANATOMY

5. 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

7. 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

8. 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!!

9. 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

10. DEFINE YOUR APPLICATION

11. 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); }

12. GET/SAVE APPLICATION DATA var colorvalue = “red”; var req = opensocial.newDataRequest(); req.add(req.newUpdatePersonAppDataRequest( 'VIEWER', ’favorite_color', colorvalue)); req.send();

13. POST ACTIVITY DATA var activity = opensocial.newActivity( opensocial.newStream("main", "gift stream"), “Paul chose “ + colorvalue + “as his fave” ); opensocial.requestCreateActivity(activity, "HIGH");

14. 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

15. Request* APIs Initiate Container Specific Actions RequestMessage() RequestAddFriend() Request*()

16. 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)

18. Data APIs Not Available Yet Will Provide For: –Mobile Clients –Server-to-Server communication –Desktop Clients –Etc. Likely Based on OAuth + AtomPub

20. Birth, Life, Viral Growth

21. Step 1 - Build a great App Step 2 - ???? Step 3 - Profit!

22. 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

23. 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.

24. 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

25. What Next? Deliver on the Promise Finalize Security Concerns –Caja, Blacklists Open Source Project –Apache Shindig Reference Implementation Centralized Directory –Open Open Social Directory.

26. Questions? ?