OpenSocial An open standard for social applications Jacob Gyllenstierna Avatars United GTUG Stockholm Meeting October 1, 2009

What is OpenSocial? "...a set of common APIs for building social applications across many websites."

"...a set of common APIs for building social applications across many websites."

What is OpenSocial? Applications that leverage social connections and communication channels on a website Fetch and post social data about friends and activities, send messages, etc. Single programming model - Write once, run anywhere (almost) Can be used both inside and outside enabled website ("OpenSocial container") Module language using XML + JavaScript APIs + HTML for embedded applications RESTful & RPC protocols for external applications

Applications that leverage social connections and communication channels on a website

Fetch and post social data about friends and activities, send messages, etc.

Single programming model - Write once, run anywhere (almost)

Can be used both inside and outside enabled website ("OpenSocial container")

Module language using XML + JavaScript APIs + HTML for embedded applications

RESTful & RPC protocols for external applications

Who is using OpenSocial? Many popular social networks and consumer websites Emerging in the enterprise space +600M users worldwide

Many popular social networks and consumer websites

Emerging in the enterprise space

+600M users worldwide

OpenSocial vs. Google Gadgets OpenSocial is an extension of the Google Gadgets specification Google Gadgets: framework for embedding small applications on websites - rendering, UI components, cross-domain proxying, i18n, user settings, inter-frame communication, security Rendered in an iframe on the container OpenSocial adds social APIs to Google Gadgets (and server-side protocols...)

OpenSocial is an extension of the Google Gadgets specification

Google Gadgets: framework for embedding small applications on websites - rendering, UI components, cross-domain proxying, i18n, user settings, inter-frame communication, security

Rendered in an iframe on the container

OpenSocial adds social APIs to Google Gadgets (and server-side protocols...)

Development types

Hello virtual world! <? xml version =&quot; 1.0 &quot; encoding =&quot; UTF-8 &quot;?> < Module > < ModulePrefs title =&quot; Hello virtual world! &quot; description =&quot; My first application. &quot; thumbnail =&quot; http://stuff.cookiejunkie.com/gtug-sthlm/gadgets/gtug2_thumb.png &quot;> </ ModulePrefs > < Content type =&quot; html &quot; view =&quot; profile &quot;> <![CDATA[ Hello from the profile view! ]]> </ Content > < Content type =&quot; html &quot; view =&quot; canvas &quot;> <![CDATA[ Hello from the canvas view! ]]> </ Content > </ Module >

<? xml version =&quot; 1.0 &quot; encoding =&quot; UTF-8 &quot;?> < Module > < ModulePrefs title =&quot; Hello virtual world! &quot; description =&quot; My first application. &quot; thumbnail =&quot; http://stuff.cookiejunkie.com/gtug-sthlm/gadgets/gtug2_thumb.png &quot;> </ ModulePrefs >

< Content type =&quot; html &quot; view =&quot; profile &quot;>

<![CDATA[

Hello from the profile view!

]]>

</ Content >

< Content type =&quot; html &quot; view =&quot; canvas &quot;>

<![CDATA[

Hello from the canvas view!

]]>

</ Content > </ Module >

Gadget rendering

Listing my friends < ModulePrefs ...> < Require feature =&quot; opensocial-0.8 &quot; /> </ ModulePrefs > < Content type =&quot; html &quot; view =&quot; profile,canvas &quot;> <![CDATA[ <h3>My friends:</h3><br /> <div id=&quot;friends&quot;></div> <script type=&quot;text/javascript&quot;> function fetchFriends() {...} function showFriends(response) {...} gadgets.util.registerOnLoadHandler(fetchFriends) ; </script> ]]> </ Content >

< ModulePrefs ...> < Require feature =&quot; opensocial-0.8 &quot; /> </ ModulePrefs >

< Content type =&quot; html &quot; view =&quot; profile,canvas &quot;> <![CDATA[

<h3>My friends:</h3><br /> <div id=&quot;friends&quot;></div>

<script type=&quot;text/javascript&quot;> function fetchFriends() {...} function showFriends(response) {...} gadgets.util.registerOnLoadHandler(fetchFriends) ; </script> ]]>

</ Content >

Listing my friends function fetchFriends() { var req = opensocial.newDataRequest(); var idSpecParams = {}; idSpecParams[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.OWNER; idSpecParams[opensocial.IdSpec.Field.GROUP_ID] = opensocial.IdSpec.GroupId.FRIENDS; var idSpec = opensocial.newIdSpec(idSpecParams); req.add(req.newFetchPeopleRequest(idSpec), &quot;ownerFriends&quot;); req.send(showFriends); } function showFriends(response) { ... }

function fetchFriends() {

var req = opensocial.newDataRequest();

var idSpecParams = {}; idSpecParams[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.OWNER; idSpecParams[opensocial.IdSpec.Field.GROUP_ID] = opensocial.IdSpec.GroupId.FRIENDS; var idSpec = opensocial.newIdSpec(idSpecParams); req.add(req.newFetchPeopleRequest(idSpec), &quot;ownerFriends&quot;);

req.send(showFriends); }

function showFriends(response) {

...

}

Listing my friends function showFriends(response) { var respItem = response.get(&quot;ownerFriends&quot;); if (respItem.hadError()) { alert(&quot;Error fetching friends!&quot;); } else { var data = respItem.getData(); var friendsDiv = document.getElementById(&quot;friends&quot;); var html = &quot;<ul>&quot;; data.each(function(person) { var name = person.getDisplayName(); var thumbnailUrl = person.getField(opensocial.Person.Field.THUMBNAIL_URL); html += &quot;<li>&quot;; html += &quot;<img src=&quot;&quot; + thumbnailUrl + &quot;&quot; /> &quot; + name; html += &quot;</li>&quot;; }); html += &quot;</ul>&quot;; friendsDiv.innerHTML = html;

function showFriends(response) {

var respItem = response.get(&quot;ownerFriends&quot;);

if (respItem.hadError()) { alert(&quot;Error fetching friends!&quot;); } else { var data = respItem.getData(); var friendsDiv = document.getElementById(&quot;friends&quot;); var html = &quot;<ul>&quot;; data.each(function(person) { var name = person.getDisplayName(); var thumbnailUrl = person.getField(opensocial.Person.Field.THUMBNAIL_URL); html += &quot;<li>&quot;; html += &quot;<img src=&quot;&quot; + thumbnailUrl + &quot;&quot; /> &quot; + name; html += &quot;</li>&quot;; }); html += &quot;</ul>&quot;; friendsDiv.innerHTML = html;

OpenSocial concepts People Friends / Connections Activities Persistent data (key-value store) Messages Sharing application

People

Friends / Connections

Activities

Persistent data (key-value store)

Messages

Sharing application

Fetching data from Twitter < Content type =&quot; html &quot; view =&quot; profile,canvas &quot;> <![CDATA[ <h3>Top ten trends:</h3><br /> <div id=&quot;trends&quot;></div> <script type=&quot;text/javascript&quot;> function fetchTrends() {...} function showTrends(response) {...} gadgets.util.registerOnLoadHandler(fetchTrends) ; </script> ]]> </ Content >

< Content type =&quot; html &quot; view =&quot; profile,canvas &quot;>

<![CDATA[

<h3>Top ten trends:</h3><br /> <div id=&quot;trends&quot;></div>

<script type=&quot;text/javascript&quot;> function fetchTrends() {...} function showTrends(response) {...} gadgets.util.registerOnLoadHandler(fetchTrends) ; </script> ]]>

</ Content >

Fetching data from Twitter function fetchTrends() { url = &quot;http://search.twitter.com/trends.json&quot;; var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON; params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.NONE; params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET; gadgets.io.makeRequest(url, showTrends, params); }

function fetchTrends() { url = &quot;http://search.twitter.com/trends.json&quot;; var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON; params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.NONE; params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET; gadgets.io.makeRequest(url, showTrends, params);

}

Fetching data from Twitter function showTrends(response) { if (response.errors && response.errors.size > 0) { alert(&quot;Error fetching trends!&quot;); } else { var data = response.data; var trends = data.trends; var trendsDiv = document.getElementById(&quot;trends&quot;); var html = &quot;<ul>&quot;; for (var i = 0; i < trends.length; i++) { var trend = trends[i]; html += &quot;<li>&quot;; html += &quot;<a href=&quot;&quot; + trend.url + &quot;&quot; target=&quot;_blank&quot;>&quot; + trend.name + &quot;</a>&quot;; html += &quot;</li>&quot;; } html += &quot;</ul>&quot;; trendsDiv.innerHTML = html; }}

function showTrends(response) { if (response.errors && response.errors.size > 0) { alert(&quot;Error fetching trends!&quot;); } else { var data = response.data; var trends = data.trends; var trendsDiv = document.getElementById(&quot;trends&quot;); var html = &quot;<ul>&quot;; for (var i = 0; i < trends.length; i++) { var trend = trends[i]; html += &quot;<li>&quot;; html += &quot;<a href=&quot;&quot; + trend.url + &quot;&quot; target=&quot;_blank&quot;>&quot; + trend.name + &quot;</a>&quot;; html += &quot;</li>&quot;; } html += &quot;</ul>&quot;; trendsDiv.innerHTML = html; }}

DEMO

RESTful & RPC protocols /people/@me/@friends [{&quot;result&quot;: {&quot;totalResults&quot;: 35, &quot;list&quot;: [ {&quot;name&quot;: {&quot;unstructured&quot;: &quot;Odonion&quot;, &quot;formatted&quot;: &quot;Odonion&quot;}, &quot;displayName&quot;: &quot;Odonion&quot;, &quot;isOwner&quot;: false, &quot;thumbnailUrl&quot;: &quot;http://albums.cf.avatarsunited.com/avatar/odonion/b87897847211421fb2ce578e82d03e22.small.jpg&quot;, &quot;id&quot;: &quot;au:a:odonion&quot;, &quot;isViewer&quot;: false}, {..}], &quot;id&quot;:&quot;ownerFriends&quot;}}]

/people/@me/@friends

[{&quot;result&quot;:

{&quot;totalResults&quot;: 35,

&quot;list&quot;: [

{&quot;name&quot;: {&quot;unstructured&quot;: &quot;Odonion&quot;, &quot;formatted&quot;: &quot;Odonion&quot;},

&quot;displayName&quot;: &quot;Odonion&quot;,

&quot;isOwner&quot;: false,

&quot;thumbnailUrl&quot;: &quot;http://albums.cf.avatarsunited.com/avatar/odonion/b87897847211421fb2ce578e82d03e22.small.jpg&quot;,

&quot;id&quot;: &quot;au:a:odonion&quot;,

&quot;isViewer&quot;: false},

{..}],

&quot;id&quot;:&quot;ownerFriends&quot;}}]

Want to run your own container? Apache Shindig - open source OpenSocial server Renders gadgets, proxies requests and handles social data requests Available in Java & PHP Implement services for social data (people, activities, etc.) and OAuth credentials (inbound & outbound) http://incubator.apache.org/shindig/

Apache Shindig - open source OpenSocial server

Renders gadgets, proxies requests and handles social data requests

Available in Java & PHP

Implement services for social data (people, activities, etc.) and OAuth credentials (inbound & outbound)

http://incubator.apache.org/shindig/

Worth looking at OpenSocial 0.9 - proxied content, data pipelining, lightweight JS API, OSML, templating Google Friend Connect - any site can be a container! OpenSocial Virtual Currency API (proposal)

OpenSocial 0.9 - proxied content, data pipelining, lightweight JS API, OSML, templating

Google Friend Connect - any site can be a container!

OpenSocial Virtual Currency API (proposal)

Want to learn more? http://www.opensocial.org http://wiki.opensocial.org http://code.google.com/apis/gadgets/ http://code.google.com/apis/opensocial/

http://www.opensocial.org

http://wiki.opensocial.org

http://code.google.com/apis/gadgets/

http://code.google.com/apis/opensocial/

Questions? [email_address] twitter.com/jgyllen http://developer.avatarsunited.com