Updates about the OpenSocial ecosystem at Google developer days Madrid including presentations from Netlog and Viadeo. OpenSocial is an open specification defining a common API that works on many different social websites, including MySpace, Plaxo, Hi5, Ning, orkut, Friendster Salesforce.com and LinkedIn, among others. This allows developers to learn one API, then write a social application for any of those sites: Learn once, write anywhere. In addition, in order to make it easier for developers of social sites to implement the API and make their site an OpenSocial container, the Apache project Shindig provides reference implementations for OpenSocial containers in two languages (Java, PHP). Shindig will define a language specific Service Provider Interface (SPI) that a social site can implement to connect Shindig to People, Persistence and Activities backend services for the social site. Shindig will then expose these services as OpenSocial JavaScript and REST APIs. In this session we will explain what OpenSocial is, show examples of OpenSocial containers and applications, demonstrate how to create an OpenSocial application, and explain how to leverage Apache Shindig in order to implement an OpenSocial container.

2. OpenSocial ecosystem
updates
Patrick Chanezon
Chris Chabot
Chewy Trewhella
Thomas Steiner
22/09/2008

3. Agenda
• OpenSocial introduction
• How to build OpenSocial applications
• Hosting social applications
• Social applications monetization
• OpenSocial container demos
• Becoming an OpenSocial container
• Google Friend Connect
• Summary

4. OpenSocial Introduction
Patrick Chanezon

5. Making the web better
by making it social
What does social mean?

6. What does Social mean?
Eliette what do you do with your friends?

7. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License

8. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License

9. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License

10. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License

11. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License

12. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License

13. Raoul: a social object for Charlotte (3 year old)

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

16. How do we socialize objects
online
without having to create yet
another social network?

17. OpenSocial
A common API for social applications
across multiple web sites

18. The Trouble with Developing Social Apps
Which site do I build my app for?

19. Let’s work on that…
Using OpenSocial, I can build apps for
all of these sites!

20. What’s offered by OpenSocial?
• Activities
o What are people up to on the web
• People/Profile Info
o Who do I know, etc.
• Persistent datastore
o Handles key/value pairs

21. Today: 375 Million User Reach

22. Where is OpenSocial live today?
Live to Users: Live Developer Sandboxes:
• MySpace • iGoogle
• orkut • imeem
• Hi5 • CityIN
• Freebar • Tianya
• Friendster • Ning
• Webon from Lycos • Plaxo Pulse
• IDtail • Mail.ru
• YiQi
• Netlog - New!
• Hyves - New!
Individual Developer Links:
http://code.google.com/apis/opensocial/gettingstared.html

23. OpenSocial “Containers”

24. What’s in OpenSocial?
• JavaScript API - Now
• REST Protocol - New
• Templates - Prototype in Shindig

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

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
o Java, PHP, Python, <your fav language here>
• Being deployed with OpenSocial v0.8
• Spec’s available at http://opensocial.org

27. OpenSocial Templates
• Writing JavaScript is hard
• Writing templates is easy
• Templates also give
o Consistent UI across containers
o Easy way to localize
o More interesting content options when inlining
into container (activities, profile views)
o Ability to serve millions of dynamic pages per
day without a server

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…
o Get involved and provide comments, and
o Build some apps

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/
o “OpenSocial and Gadgets spec” subgroup
• OpenSocial Foundation
o Get involved to nominate and elect board reps
o http://www.opensocial.org/opensocial-foundation/

30. A note on compliance
• OpenSocial is designed for many sites
• Building an app:
o Technology
o Policy
• OpenSocial Compliance Tests
o http://code.google.com/p/opensocial-
resources/wiki/ComplianceTests

31. OpenSocial Compliance test in orkut

32. OpenSocial Compliance Matrix
http://opensocial-compliance.appspot.com

33. Other comments
• Portable Contacts Alignment
• Caja for JavaScript security

34. A standard for everyone
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License

35. How To Build OpenSocial
Applications

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

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;
}

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(
quot;This is a sample activity, created at quot; +
new Date().toString());

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(quot;VIEWERquot;,
quot;AppField1quot;,
data1));
req.add(
req.newUpdatePersonAppDataRequest(quot;VIEWERquot;,
quot;AppField2quot;,
data2));
req.send(requestMyData);
}

40. Persistence Example
Fetching persisted data
function requestMyData() {
var req = opensocial.newDataRequest();
var fields = [quot;AppField1quot;, quot;AppField2quot;];
req.add(req.newFetchPersonRequest(
opensocial.DataRequest.PersonId.VIEWER), quot;viewerquot;);
req.add(req.newFetchPersonAppDataRequest(quot;VIEWERquot;,
fields), quot;viewer_dataquot;);
req.send(handleReturnedData);
}

41. Persistence Example
Displaying fetched (persisted) data
function handleReturnedData(data) {
var mydata = data.get(quot;viewer_dataquot;);
var viewer = data.get(quot;viewerquot;);
me = viewer.getData(); // me is global var
var data = mydata[me.getId()];
htmlout += quot;AppField1: quot; + data[quot;AppField1quot;] + quot;<br/>quot;;
htmlout += quot;AppField2: quot; + data[quot;AppField2quot;] + quot;<br/>quot;;
var div = document.getElementById('content_div');
div.innerHTML = htmlout;
}

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

43. OpenSocial resources in spanish
• Google Code in Spanish: http://code.google.com/intl/es/
• OpenSocial v0.7
- http://code.google.com/intl/es/apis/opensocial/
• Gadgets - http://code.google.com/intl/es/apis/gadgets/ (full
reference for Opensocial 0.7)
• Orkut API - http://code.google.com/intl/es/apis/orkut/

44. Hosting social apps
Patrick Chanezon

45. Hosting OpenSocial apps
In addition to using the provided persistence API...
• Establish a quot;homequot; site where gadget can phone
home to retrieve, post data
• Can host home site on your own, or use services:
o Amazon EC2
o Joyent
o Google AppEngine
• Zembly: is the world's first cloud-based
development environment for social apps. Full
OpenSocial support

46. Google AppEngine and OpenSocial
• Create an App Engine app as your backend!
o Use makeRequest() to call back to your AppEngine
server
o Utilize AppEngine's datastore
• New OpenSocial Apps are coming online
o BuddyPoke,
• Checkout Lane Liabraaten’s OpenSocial-AppEngine
integration article
o http://code.google.com/apis/opensocial/articles/appengine.html
• Google IO Code Lab about OpenSocial Apps in the Cloud

47. Social Apps monetization
Patrick Chanezon

48. OpenSocial Monetization
• Ads from Ad Networks
o AdSense, RightMedia
o BuddyPoke, Rate My Friend
• Brand/Private Label App
o Sony Ericsson MTV Roadies app on orkut
• Sell virtual or real goods
• Free -> Freemium
• Referrals
• Virtual currency

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

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

51. Container demos

52. Netlog
Toon Coppens
Folke Lemaitre

53. What is Netlog?

54. Your Profile

55. Friend Activity

56. Communication: Shouts

57. Communication: Private messaging

58. Communication: Chat

59. Homepage

60. Explore

61. How are we doing?
• More than 35,000,000 unique members
• More than 6,000,000,000 pageviews/Month

62. Europe and beyond...

63. More than 23 languages
• 23 languages and alot more coming!
o 8,000,000 Spanish & Catalan speaking members
Nederlands Svenska
slovenščina
Deutsch
Magyar
Русский English Italiano česky
français
Dansk suomi
Polski Hrvatski
Türkçe
Afrikaans
Slovenčina
Eesti Català
Español
Português
Latviešu
Română valoda български
Lietuvių kalba Norsk (bokmål)

64. Applications

65. Canvas view

66. Profile view

67. Home View (available soon!)

68. Application directory

69. Activity logs

70. Share with your friends

71. Requirements

72. Whitelisting Requirements
• an application should be fully integrated
o no external login should be needed...
o no external links
• no ads in “profile” view
• no spamming through activities/requests
• localised & translated
o We can help you!

73. Localisation

74. Seemless translation

75. Localisation is important!
• Translations are automatically injected
• Translation tool for Netlog translators

76. Monetization

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

78. Credit Economy
• Virtual Currency
• Use Cases
o charge credits for app installation
o charge credits for certain features
o charge credits for buying items
o charge credits for...

79. Questions?
• Developer pages:
o http://es.netlog.com/go/developer/
• OpenSocial sandbox:
o http://es.netlog.com/go/developer/opensocial/sandbox=1

80. Viadeo
Ariel Messias

81. Google Dev Day
OpenSocial
Madrid
Social Network
Business Tool 08/09/25
Career Management
© viadeo – septembre 2008

82. Agenda
• A few words about Viadeo
• What to offer to Viadeo’s members
• Sandbox presentation

83. Viadeo
• 3 groups of Use :
o Social Network,
o Business Tool
o Career Management
• 5 +m Members mainly :
o Europe
o China
• Strong activity
o 7, 000 new members/day
o 10, 000 connections/day
o +120, 000 consulted profiles/day
o 1,3 M hubs registration

84. 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) China
Switzerland • 2.2m members(1)
• 50K members(1)
Spain/Portugal Italy
• 350k members(1) • 300k members(1)
(1) end of August 2008

85. Benefits Viadeo can offer to developers
• 8 languages (European + China)
• Professional oriented
• Distribution of Members among all the Industries
• Mainly “A Level” profiles
• Members with High Revenues => Strong capabilities of
monetization

86. Vertical Apps ?
Members split by industry

87. “A Level” priority targets ?
High qualification of Viadeo’s members

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

89. Sandbox Presentation – Create a Dev. Account

90. Sandbox Presentation – Apps Directory

91. Sandbox Presentation – My Apps

92. Sandbox Presentation – Add an app

93. Sandbox Presentation – Viadeo mailing list
opensocial@viadeo.com

94. Becoming an OpenSocial Container
Chris Chabot

95. Becoming an OpenSocial Container
• Question:
o How do you become an OpenSocial container?
• Answer:
o The Apache incubator project “Shindig” serves this
purpose!

96. 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 workquot;

97. Introduction to Shindig Architecture
• Gadget Server
• Social Data Server
• Gadget Container JavaScript

98. Gadget Server

99. Social Server

100. Social Server - RESTful API
• Preview available on
o iGoogle
o Orkut
o Hi5
• New development models
o Server to server & Mobile!
• Try it out:
curl http://localhost:8080/social/rest/people/john.doe/@all

101. Implementing Shindig - Data sources
• Integrate with your own data sources
o People Service
o Activities Service
o App Data Service
class MyPeopleService implements PeopleService {
...
}
class MyAppDataService implements AppDataService {
...
}
class MyActivitiesService implements ActivitiesService {
...
}

102. Implementing Shindig - Data sources
• Implement functions
function getActivities($ids)
{
$activities = array();
$res = mysqli_query($this->db, ”SELECT…quot;);
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;
}

103. Implementing - Make it a platform
• Add UI Elements
o App Gallery
o App Canvas
o App Invites
o Notification Browser
• Developer Resources
o Developer Console
o Application Gallery
• Scale it Out!

104. Implementing - Scale it Out!
• Prevent Concurrency issues
• Reduce Latency
• Add Caching
• Add more caching!

105. Usage Example: Sample Container
• Static html sample container
• No effort to get up and running
• No database or features

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

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

108. Summary
• Become an OpenSocial Container
o Get Shindig (PHP or Java)
o Look at examples & documentation
o Implement Services
o Add UI
o Scale it out
• Resources & Links:
o http://www.chabotc.com/gdd/

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

120. Friend Connect gives ...
• Users
o ... more ways to do more things with my friends
• Site owners
o ... more (and more engaged) traffic for my site
• App developers
o ... more reach for my apps
and ... make it easy

121. Learn more
code.google.com

123. Q&A