Hide Notes 

Slide 2: OpenSocial ecosystem updates Patrick Chanezon Chris Chabot Chewy Trewhella 9/16/2008
Slide 3: Agenda OpenSocial introduction How to build OpenSocial applications Hosting social applications Social applications monetization OpenSocial container demos Becoming an OpenSocial container Kinds of Containers Google Friend Connect Summary
Slide 4: OpenSocial Introduction Patrick Chanezon
Slide 5: Making the web better by making it social What does social mean?
Slide 6: What does Social mean? Eliette what do you do with your friends?
Slide 7: This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
Slide 8: This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
Slide 9: This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
Slide 10: This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
Slide 11: This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
Slide 12: This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
Slide 13: Raoul: a social object for Charlotte (3 year old)
Slide 15: Jaiku’s Jyri Engeström's 5 rules for social networks: social objects 1. What is your object? 2. What are your verbs? 3. How can people share the objects? 4. What is the gift in the invitation? 5. Are you charging the publishers or the spectators? http://tinyurl.com/yus8gw
Slide 16: How do we socialize objects online without having to create yet another social network?
Slide 17: OpenSocial A common API for social applications across multiple web sites
Slide 18: The Trouble with Developing Social Apps Which site do I build my app for?
Slide 19: Let’s work on that… Using OpenSocial, I can build apps for all of these sites!
Slide 20: What’s offered by OpenSocial? Activities What are people up to on the web People/Profile Info Who do I know, etc. Persistent datastore Handles key/value pairs
Slide 21: Today: 375 Million User Reach
Slide 22: Where is OpenSocial live today? Live to Users: MySpace orkut Hi5 Freebar Friendster Webon from Lycos IDtail YiQi Netlog - New! Hyves - New! Live Developer Sandboxes: iGoogle imeem CityIN Tianya Ning Plaxo Pulse Mail.ru Individual Developer Links: http://code.google.com/apis/opensocial/gettingstared.html
Slide 23: OpenSocial “Containers”
Slide 24: What’s in OpenSocial? JavaScript API - Now REST Protocol - New Templates - Prototype in Shindig
Slide 25: OpenSocial’s JavaScript API OpenSocial JS API Gadget JS API Gadget XML schema OpenSocial v0.7 is live OpenSocial v0.8 is being deployed now Specs and release notes: http://opensocial.org
Slide 26: OpenSocial’s REST Protocol Access social data without JavaScript Works on 3rd party websites / phones / etc Uses OAuth to allow secure access Open source client libraries in development Java, PHP, Python, <your fav language here> Being deployed with OpenSocial v0.8 Spec’s available at http://opensocial.org
Slide 27: OpenSocial Templates Writing JavaScript is hard Writing templates is easy Templates also give Consistent UI across containers Easy way to localize More interesting content options when inlining into container (activities, profile views) Ability to serve millions of dynamic pages per day without a server
Slide 28: Try out templates today! Samples and docs: http://ostemplates-demo.appspot.com Sample app: http://ostemplates-demo.appspot.com/friends.html Discussion group: http://tech.groups.yahoo.com/group/os-templates/ Code is all in Shindig, can download, use, and even submit patches to improve So… Get involved and provide comments, and Build some apps
Slide 29: OpenSocial is what you make it. OpenSocial is an open source project. The spec is controlled by the community. Anyone can contribute and have a voice. http://groups.google.com/group/opensocial/ “OpenSocial and Gadgets spec” subgroup OpenSocial Foundation Get involved to nominate and elect board reps http://www.opensocial.org/opensocialfoundation/
Slide 30: A note on compliance OpenSocial is designed for many sites Building an app: Technology Policy OpenSocial Compliance Tests http://code.google.com/p/opensocialresources/wiki/ComplianceTests
Slide 31: OpenSocial Compliance test in orkut
Slide 32: OpenSocial Compliance Matrix http://opensocial-compliance.appspot.com
Slide 33: Other comments Portable Contacts Alignment Caja for JavaScript security
Slide 34: A standard for everyone This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
Slide 35: How To Build OpenSocial Applications
Slide 36: People & Friends Example Requesting friend Info function getFriendData() { var req = opensocial.newDataRequest(); req.add( req.newFetchPersonRequest(VIEWER), 'viewer'); req.add( req.newFetchPeopleRequest(VIEWER_FRIENDS), 'viewerFriends'); req.send(onLoadFriends); }
Slide 37: People & Friends Example Callback function for returned friend data function onLoadFriends(resp) { var viewer = resp.get('viewer').getData(); var viewerFriends = resp.get('viewerFriends').getData(); var html = 'Friends of ' + viewer.getDisplayName() + ‘:<br><ul>’; viewerFriends.each(function(person) { html += '<li>' + person.getDisplayName()+'</li>';}); html += '</ul>'; document.getElementById('friends').innerHTML += html; }
Slide 38: Activities Example Posting an activity function postActivity(text) { var params = {}; params[opensocial.Activity.Field.TITLE] = text; var activity = opensocial.newActivity(params); opensocial.requestCreateActivity( activity, opensocial.CreateActivityPriority.HIGH, callback); } postActivity( "This is a sample activity, created at " + new Date().toString());
Slide 39: Persistence Example Persisting data function populateMyAppData() { var req = opensocial.newDataRequest(); var data1 = Math.random() * 5; var data2 = Math.random() * 100; req.add( req.newUpdatePersonAppDataRequest("VIEWER", "AppField1", data1)); req.add( req.newUpdatePersonAppDataRequest("VIEWER", "AppField2", data2)); req.send(requestMyData); }
Slide 40: Persistence Example Fetching persisted data function requestMyData() { var req = opensocial.newDataRequest(); var fields = ["AppField1", "AppField2"]; req.add(req.newFetchPersonRequest( opensocial.DataRequest.PersonId.VIEWER), "viewer"); req.add(req.newFetchPersonAppDataRequest("VIEWER", fields), "viewer_data"); req.send(handleReturnedData); }
Slide 41: Persistence Example Displaying fetched (persisted) data function handleReturnedData(data) { var mydata = data.get("viewer_data"); var viewer = data.get("viewer"); me = viewer.getData(); // me is global var var data = mydata[me.getId()]; htmlout += "AppField1: " + data["AppField1"] + "<br/>"; htmlout += "AppField2: " + data["AppField2"] + "<br/>"; var div = document.getElementById('content_div'); div.innerHTML = htmlout; }
Slide 42: Resources For Application Developers Specification http://opensocial.org/ http://groups.google.com/group/opensocial-and-gadgets-spec Code Samples and Tools http://code.google.com/opensocial http://code.google.com/p/opensocial-resources/ Sandboxes http://developer.myspace.com/ http://www.hi5networks.com/developer/ http://opensocial.ning.com/ http://code.google.com/apis/orkut/ http://code.google.com/apis/igoogle/ http://en.netlog.com/go/developer/opensocial
Slide 43: Hosting social apps Patrick Chanezon
Slide 44: Hosting OpenSocial apps In addition to using the provided persistence API... Establish a "home" site where gadget can phone home to retrieve, post data Can host home site on your own, or use services: Amazon EC2 Joyent Google AppEngine Zembly: is the world's first cloud-based development environment for social apps. Full OpenSocial support
Slide 45: Google AppEngine and OpenSocial Create an App Engine app as your backend! Use makeRequest() to call back to your AppEngine server Utilize AppEngine's datastore New OpenSocial Apps are coming online BuddyPoke, Checkout Lane Liabraaten’s OpenSocial-AppEngine integration article http://code.google.com/apis/opensocial/articles/appengine.html Google IO Code Lab about OpenSocial Apps in the Cloud
Slide 46: Social Apps monetization Patrick Chanezon
Slide 47: OpenSocial Monetization Ads from Ad Networks AdSense, RightMedia BuddyPoke, Rate My Friend Brand/Private Label App Sony Ericsson MTV Roadies app on orkut Sell virtual or real goods Free -> Freemium Referrals Virtual currency
Slide 48: Success Story: Buddy Poke #1 OpenSocial app on orkut 8M installs for orkut, hi5, MySpace $1-2 CPM #1 App for App Engine w/ millions daily PV
Slide 49: Success Story: PhotoBuzz 6M+ installs on hi5 and orkut CPM $1-3, especially good on orkut 4M buzzes per day Small team of 4 people, profitable
Slide 50: Container demos
Slide 51: Hyves Reinoud Elhorst
Slide 52: What is Hyves? 4 years old 6 million+ Dutch members 5 billion pageviews/month 51.6% reach/month 13+, 75.6% 13-34
Slide 53: Social networking service
Slide 54: OpenSocial on Hyves Launching OpenSocial today OS 0.7, working on 0.8 release (traditional) API intergration Gadget gallery waiting for good apps to be featured Contact irene@hyves.nl
Slide 55: Gadget gallery
Slide 56: Profile view
Slide 57: Homepage view
Slide 58: Canvas view
Slide 59: Thanks for your attention Reinoud, Derk, Youri, Marijn, Frank & Yme are here today if you have any questions Contact irene@hyves.nl for inclusion in the Gadget Gallery http://trac.hyves-api.nl/hyvesapi/wiki/opensocial
Slide 60: Netlog Pieter De Schepper Toon Coppens Folke Lemaitre
Slide 61: What is Netlog?
Slide 62: Your Profile
Slide 63: Friend Activity
Slide 64: Communication: Shouts
Slide 65: Communication: Private messaging
Slide 66: Communication: Chat
Slide 67: Homepage
Slide 68: Explore
Slide 69: How are we doing? More than 35,000,000 unique members More than 6,000,000,000 pageviews/Month 23 languages and alot more coming! slovenščin a Русски й Polski Eesti Română Slovenčin a Portuguê s Lietuvių kalba Englis h Dansk Nederland s Italiano françai s Türkçe Españo l Norsk (bokmål) Svensk a česky suomi Hrvatski Afrikaan s 中文 Català Magya r Deutsch Latviešu valoda българск и
Slide 70: Applications
Slide 71: Canvas view
Slide 72: Profile view
Slide 73: Home View (available soon!)
Slide 74: Application directory
Slide 75: User Profiles
Slide 76: Activity logs
Slide 77: Share with your friends
Slide 78: Requirements
Slide 79: Whitelisting Requirements an application should be fully integrated no external login should be needed... no external links no ads in “profile” view no spamming through activities/requests localised & translated We can help you!
Slide 80: Localization
Slide 81: Seemless translation
Slide 82: Localisation is important! Translations are automatically injected Translation tool for Netlog translators
Slide 83: Monetization
Slide 84: What’s in it for you? Branding, co-branding, sponsorships 100% revenue from vertical rectangle or skyscraper on your application page Credit economy with Netlog OpenSocial extension charge credits for app installation charge credits for certain features charge credits for buying items charge credits for...
Slide 85: Credit Economy
Slide 86: Questions? Developer pages: http://en.netlog.com/go/developer/ OpenSocial sandbox: http://en.netlog.com/go/developer/opensocial/sandbox=1
Slide 87: Viadeo Ariel Messias
Slide 88: Becoming an OpenSocial Container Chris Chabot
Slide 89: Google Dev Day OpenSocial Social Network Business Tool Career Management London 08/09/16 © viadeo – septembre 2008
Slide 90: Agenda A few words about Viadeo What to offer to Viadeo’s members (Sandbox presentation)
Slide 91: Viadeo 3 groups of Use : Social Network, Business Tool Career Management 5 +m Members mainly : Europe China Strong activity 7, 000 new members/day 10, 000 connections/day +120, 000 consulted profiles/day 1,3 M hubs registration
Slide 92: International Footprint : 5+m Members France 1.8m members(1) Other European countries 150K members (1) Belgium 100k members(1) UK/Ireland 150 k members(1) Switzerland 50K members(1) China 2.2m members(1) Spain/Portugal 350k members(1) Italy 300k members (1) (1) end of August 2008
Slide 93: What to offer to Viadeo’s Members 7 languages (European + China) Professional oriented Mainly “A Level” profiles Split by Industry Members with High Revenues => Strong capabilities of monetization
Slide 94: Vertical Apps ? Members split by industry
Slide 95: “A Level” priority targets ? High qualification of Viadeo’s members
Slide 96: Apps for Professional Social Network… Helping to : Find Customers / Partners / Suppliers Organize Meetings/Events Share information and expertise But also ... Get headhunted… …and recruit Etc…
Slide 97: Sandbox Presentation opensocial@viadeo.com
Slide 98: Becoming an OpenSocial Container Question: How do you become an OpenSocial container? Answer: The Apache incubator project “Shindig” serves this purpose!
Slide 99: What is Shindig ? Open source reference implementation of OpenSocial & Gadgets specification An Apache Software Incubator project Available in Java & PHP http://incubator.apache.org/shindig It’s Goal: “Shindig's goal is to allow new sites to start hosting social apps in under an hour's worth of work"
Slide 100: Introduction to Shindig Architecture Gadget Server Social Data Server Gadget Container JavaScript
Slide 101: Gadget Server
Slide 102: Social Server
Slide 103: Social Server - RESTful API Preview available on iGoogle Orkut Hi5 New development models Server to server & Mobile! Try it out: curl http://localhost:8080/social/rest/people/john.doe/@all
Slide 104: Implementing Shindig - Data sources Integrate with your own data sources People Service Activities Service App Data Service class MyPeopleService implements PeopleService { ... } class MyAppDataService implements AppDataService { ... } class MyActivitiesService implements ActivitiesService { ... }
Slide 105: Implementing Shindig - Data sources Implement functions function getActivities($ids) { $activities = array(); $res = mysqli_query($this->db, ”SELECT…"); while ($row = @mysqli_fetch_array($res, MYSQLI_ASSOC)) { $activity = new Activity($row['activityId'], $row['personId']); $activity->setStreamTitle($row['activityStream']); $activity->setTitle($row['activityTitle']); $activity->setBody($row['activityBody']); $activity->setPostedTime($row['created']); $activities[] = $activity; } return $activities; }
Slide 106: Implementing - Make it a platform Add UI Elements App Gallery App Canvas App Invites Notification Browser Developer Resources Developer Console Application Gallery Scale it Out!
Slide 107: Implementing - Scale it Out! Prevent Concurrency issues Reduce Latency Add Caching Add more caching! Pre-populate Cache
Slide 108: Usage Example: Sample Container Static html sample container No effort to get up and running No database or features
Slide 109: Usage Example: Partuza Partuza is a Example social network site, written in PHP Allows for local gadget development & testing too Use as inspiration (or copy) for creating your own social site http://code.google.com/p/partuza
Slide 110: OpenSocial for intranet, portals Sun Microsystems Socialsite: Shindig + gadget based UI written in Java Open Source https://socialsite.dev.java.net/ Upcoming from Impetus Zest: Shindig + Drupal (PHP) Zeal: Shindig + Liferay (Java)
Slide 111: Summary Become an OpenSocial Container Get Shindig (PHP or Java) Look at examples & documentation Implement Services Add UI Scale it out Resources & Links: http://www.chabotc.com/gdd/
Slide 112: Kinds of Containers Kevin Marks
Slide 113: Not just Social Network Sites Social network sites - Profiles and home pages Personal dashboards Sites based around a Social Object Corporate CRM systems Any web site How do we abstract these out? Viewer + friends Owner + friends
Slide 114: The Viewer and Viewer friends
Slide 115: Owner and Owner friends
Slide 116: Owner and Viewer are defined by Container The Application gets IDs and connections to other IDs
Slide 117: the Owner need not be a Person It could be an organisation or a social object
Slide 118: Kinds of container - Social network sites Profile pages Owner is profile page owner Viewer may not be known, may be owner or other member Home pages Owner is Viewer (must be logged in to see) Examples MySpace Hi5 Orkut
Slide 119: Kinds of container - Personal dashboard like Home pages Owner is Viewer (must be logged in to see) Friends may not be defined Example: iGoogle, My Yahoo
Slide 120: Kinds of container - Social Object site Pages reflect the object - movie, picture, product Owner is the object Owner friends are people connected to the object may be authors or fans Viewer is looking at it, Viewer friends are people you may want to share with Example: Imeem is a bit like this - opportunity for sites like Flickr, YouTube
Slide 121: Kinds of container - CRM systems Pages reflect the customer Owner is the customer Owner friends are people connected to the customer may be your colleagues, or other customers Viewer is you, Viewer friends are your colleagues or customers Example: Oracle CRM, Salesforce
Slide 122: Kinds of container - Any web site Owner is the site Owner friends are site users Viewer is you, Viewer friends are your friends who have visited this site Example: Google Friend Connect will enable this for any site
Slide 123: What is Friend Connect? Allows any site to become an OpenSocial container by simply copying a few snippets of code into your site http://www.google.com/friendconnect/
Slide 134: Friend Connect gives ... Users ... more ways to do more things with my friends Site owners ... more (and more engaged) traffic for my site App developers ... more reach for my apps and ... make it easy
Slide 135: Learn more code.google.com
Slide 137: Q&A