The Open & Social Web
Chris Chabot
Developer Advocate, Google

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

a.k.a. “The Registration Hell”

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

OpenSocial’s Growth

In other words..

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

Using OpenSocial
OpenSocial Concepts

What OpenSocial Provides

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

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

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

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

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

HTML
XML
JS
Writing a Gadget

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>

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>

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

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

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

OpenSocial Gadget - OSDA

OpenSocial Gadget - OSDA

Server to Server

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

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();
?>

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

Social, anywhere?

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

Friend Connect - outside of the IFrame

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

Friend Connect - outside of the IFrame

Friend Connect - REST API

OpenSocial - What’s ahead ?
OpenSocial 0.9 and beyond

Proxied Content

Proxied Content

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>

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

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>

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>

And going to new places..

Going to new places..

Going to new places..

Going to new places..

Going to new places..

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

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

The Open & Social Web
Q&A