Slides from the Open & Social Web presentation at the 2009 Kings of Code conference.

1. The Open & Social Web
Chris Chabot
Developer Advocate, Google

2. The Web is better when it’s
Social
David Glazer, Director of Engineering
at the launch of OpenSocial, Nov 2007

8. a.k.a. “The Registration Hell”

9. a.k.a. “The Registration Hell”
92%
Success
Rate!

10. OpenSocial’s Growth

11. In other words..

12. The Web is going social
... and the Social Web is
going open

13. Using OpenSocial
OpenSocial Concepts

14. What OpenSocial Provides

15. Using OpenSocial - Viewer and Owner
Dan (OWNER)
Chris (VIEWER)

16. Using OpenSocial - Viewer and Owner
http://chabotc.com (OWNER)
Chris (VIEWER)

17. Using OpenSocial - Viewer and Owner
Dan’s Friends (OWNER FRIENDS)

18. Using OpenSocial - Viewer and Owner
My Friends (VIEWER FRIENDS)

19. Using OpenSocial - Views
• OpenSocial differentiates different page types
– Home
• Personal home page
• Owner == Viewer
– Profile
• Someone else looking at your page
• Owner && Viewer
– Canvas
• Full screen gadget view
• Owner && Viewer

27. HTML
XML
JS
Writing a Gadget

28. OpenSocial Gadget - Gadget XML
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html" view=”profile”>
<![CDATA[
Hello, world!
]]>
</Content>
</Module>

29. OpenSocial Gadget - onLoad handler
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html">
<![CDATA[
<script type=”text/javascript”>
function init() {
loadFriends();
}
gadgets.util.registerOnLoadHandler(init);
</script>
]]>
</Content>
</Module>

30. OpenSocial Gadget - Fetching Friends
function loadFriends() {
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(
opensocial.IdSpec.PersonId.VIEWER),'viewer');
var viewerFriends = opensocial.newIdSpec({
"userId" : "VIEWER",
"groupId" : "FRIENDS"
});
req.add(
req.newFetchPeopleRequest(
viewerFriends),
'viewerFriends');
req.send(onLoadFriends);
}

31. OpenSocial Gadget - Using the result
function onLoadFriends(data) {
var viewer = data.get('viewer').getData();
var viewerFriends = data.get('viewerFriends').getData();
html = new Array();
html.push('<ul>');
viewerFriends.each(function(person) {
html.push(
'<li>' + person.getDisplayName() + "</li>"
);
});
html.push('</ul>');
document.getElementById('friends').innerHTML =
html.join('');
}

32. OpenSocial Gadget - OSDA
http://osda.appspot.com

33. OpenSocial Gadget - OSDA

34. OpenSocial Gadget - OSDA

35. Server to Server

36. OpenSocial - OpenSocial Client Libraries
• For Server to Server, use the REST API
• Libraries exist for popular languages:
– http://code.google.com/p/opensocial-php-client/
– http://code.google.com/p/opensocial-java-client/
– http://code.google.com/p/opensocial-ruby-client/
– http://code.google.com/p/opensocial-python-client/
– http://code.google.com/p/opensocial-as3-client/
36

37. OpenSocial - OpenSocial Client Libraries
<?php
$storage = new osapiFileStorage('/tmp/osapi');
$provider = new osapiNetlogProvider();
$auth = osapiOAuth3Legged::performOAuthLogin(....);
$osapi = new osapi($provider, $auth);
$batch = $osapi->newBatch();
$batch->add(
$osapi->people->get(
array(
'userId' => $userId,
'groupId' => '@self'
), 'self');
$result = $batch->execute();
?>

38. OpenSocial - OpenSocial Client Libraries
• iGoogle, Gmail
• $provider = new osapiGoogleProvider();
• Google Friend Connect
• $provider = new osapiFriendConnectProvider();
• Hi5
• $provider = new osapiNetlogProvider();
• MySpace
• $provider = new osapiMySpaceProvider();
• Netlog
• $provider = new osapiNetlogProvider();
• orkut
• $provider = new osapiOrkutProvider();
• Partuza
• $provider = new osapiPartuzaProvider();
• Plaxo
• $provider = new osapiPlaxoProvider();
• XRDS (discovery)
• $provider = new osapiXRDSProvider(‘http://www.example.org’);
• Custom
• $provider = new osapiProvider(‘requestTokenUrl’, ‘authUrl’,
‘accessTokenUrl’, ‘restEndpoint’, ‘rpcEndpoint’);

39. Social, anywhere?

40. Google Friend Connect
• May 2008 Google Friend Connect preview
– Preview release, for whitelisted sites only
– Make your website social
– Long tail, no technical skills required
– Copy and past javascript
– Add OpenSocial applications
• December 2008 General availability
• February 2009 Social bar
– Easier integration
• March 2009
– Allow deep customized integration through outside of IFrame JS
– Server side integration (REST API’s)
40

42. Friend Connect - outside of the IFrame

43. Friend Connect - outside of the IFrame
http://www.ossamples.com/api/

44. Friend Connect - outside of the IFrame

45. Friend Connect - REST API

46. OpenSocial - What’s ahead ?
OpenSocial 0.9 and beyond

47. Proxied Content

48. Proxied Content

49. Proxied Content
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!">
<Require feature="opensocial-0.9"/>
</ModulePrefs>
<Content view=”profile” type="html"
href=”http://example.org/profile.php”>
<os:ViewerRequest key="vwr"/>
<os:OwnerRequest key="ownr"/>
</Content>
</Module>

50. Lightweight JS - OSAPI
osapi.people.getViewer({
fields: ['name', 'birthday']
}).execute(function(result) {
alert('Your name is ' + result.name + '!');
alert('Your birthday is ' + result.birthday + '!');
});

51. OSML tags
• OpenSocial Markup Language
• os:PeopleSelector
• os:Name
• os:Badge
• os:Get
<form action="/top_friends.php" method="POST">
Select your top 8 friends:
<os:PeopleSelector
group="${ViewerFriends}"
multiple="true"
max="8"
inputName="top8"
/>
</form>

52. OpenSocial Templating & Data-Pipelining
...
<Require feature="opensocial-data" />
<Require feature="opensocial-templates">
...
<script type="text/os-data"
xmlns:os="http://ns.opensocial.org/2008/markup">
<os:HttpRequest key="song"
href="http://mysongserver.com"/
</script>
<script type="text/os-template">
<a href="${song.url}">
<img src="${song.albumThumbnail}"/>
${song.title} By ${song.artist} From ${song.album}
</a>
</script>

53. And going to new places..

54. Going to new places..

55. Going to new places..

56. Going to new places..

57. Going to new places..

58. Resources
Getting started:
http://www.opensocial.org/
Documentation:
http://wiki.opensocial.org
Friend Connect:
http://www.google.com/friendconnect

59. Google I/O Social Videos
Find them at:
http://code.google.com/events/io/sessions.htm
• Beyond Cut & Paste: Deep integrations with Google Friend Connect
• Building a Business with Social Apps
• Designing OpenSocial Apps for Speed and Scale
• Google and the Social Web
• Google Friend Connect Gadgets: Best Practices in Code and Interaction Design
• Google Friend Connect In The Real World
• Powering Mobile Apps with Social Data
• The Social Web: An Implementor's Guide

60. The Open & Social Web
Q&A