OpenSocial

An open standard for social applications

Jacob GyllenstiernaAvatars United

GTUG Stockholm MeetingOctober 1, 2009

What is OpenSocial?

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

Who is using OpenSocial?

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

Development types

 

Hello virtual world!

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

Gadget rendering

Listing my friends

   <ModulePrefs ...>    <Require feature="opensocial-0.8" />  </ModulePrefs>   <Content type="html" view="profile,canvas">    <![CDATA[      <h3>My friends:</h3><br />      <div id="friends"></div>

      <script type="text/javascript">        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), "ownerFriends");        req.send(showFriends);      }

      function showFriends(response) {        ...      }

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

OpenSocial concepts

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

Fetching data from Twitter  <Content type="html" view="profile,canvas">    <![CDATA[      <h3>Top ten trends:</h3><br />      <div id="trends"></div>

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

Fetching data from Twitterfunction fetchTrends() {  url = "http://search.twitter.com/trends.json";                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 Twitterfunction showTrends(response) {  if (response.errors && response.errors.size > 0) {    alert("Error fetching trends!");  }  else {    var data = response.data;    var trends = data.trends;    var trendsDiv = document.getElementById("trends");    var html = "<ul>";                            for (var i = 0; i < trends.length; i++) {      var trend = trends[i];                                  html += "<li>";      html += "<a href=\"" + trend.url + "\" target=\"_blank\">" + trend.name + "</a>";      html += "</li>";    }                            html += "</ul>";    trendsDiv.innerHTML = html;  }}

DEMO

 

RESTful & RPC protocols

/people/@me/@friends

[{"result":  {"totalResults": 35,    "list": [      {"name": {"unstructured": "Odonion", "formatted": "Odonion"},      "displayName": "Odonion",      "isOwner": false,      "thumbnailUrl": "http://albums.cf.avatarsunited.com/avatar/odonion/b87897847211421fb2ce578e82d03e22.small.jpg",      "id": "au:a:odonion",      "isViewer": false},      {..}],  "id":"ownerFriends"}}]

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/

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)

Want to learn more?

• http://www.opensocial.org• http://wiki.opensocial.org• http://code.google.com/apis/gadgets/• http://code.google.com/apis/opensocial/

Questions?

jacob@enemyunknown.nettwitter.com/jgyllen

http://developer.avatarsunited.com