OpenSocial An open standard for social applications Jacob Gyllenstierna Avatars United GTUG Stockholm Meeting October 1, 2...
What is OpenSocial? <ul><li>&quot;...a set of common APIs for building social applications across many websites.&quot; </l...
What is OpenSocial? <ul><ul><li>Applications that leverage social connections and communication channels on a website </li...
Who is using OpenSocial? <ul><ul><li>Many popular social networks and consumer websites </li></ul></ul><ul><ul><li>Emergin...
OpenSocial vs. Google Gadgets <ul><ul><li>OpenSocial is an extension of the Google Gadgets specification  </li></ul></ul><...
Development types <ul><li>  </li></ul>
Hello virtual world! <ul><li><? xml   version =&quot; 1.0 &quot;  encoding =&quot; UTF-8 &quot;?> < Module >   < ModulePre...
Gadget rendering
Listing my friends <ul><li>  </li></ul><ul><li>   < ModulePrefs  ...>     < Require   feature =&quot; opensocial-0.8 &quot...
Listing my friends <ul><li>       function fetchFriends() { </li></ul><ul><li>         var req = opensocial.newDataRequest...
Listing my friends <ul><li>       function showFriends(response) { </li></ul><ul><li>         var respItem = response.get(...
OpenSocial concepts <ul><ul><li>People </li></ul></ul><ul><ul><li>Friends / Connections </li></ul></ul><ul><ul><li>Activit...
Fetching data from Twitter <ul><li>   < Content   type =&quot; html &quot;  view =&quot; profile,canvas &quot;> </li></ul>...
Fetching data from Twitter <ul><li>function fetchTrends() {   url = &quot;http://search.twitter.com/trends.json&quot;;    ...
Fetching data from Twitter <ul><li>function showTrends(response) {   if (response.errors && response.errors.size > 0) {   ...
DEMO  
RESTful & RPC protocols <ul><li>/people/@me/@friends </li></ul><ul><li>[{&quot;result&quot;: </li></ul><ul><li>   {&quot;t...
Want to run your own container? <ul><ul><li>Apache Shindig - open source OpenSocial server </li></ul></ul><ul><ul><li>Rend...
Worth looking at <ul><ul><li>OpenSocial 0.9 - proxied content, data pipelining, lightweight JS API, OSML, templating </li>...
Want to learn more? <ul><ul><li>http://www.opensocial.org </li></ul></ul><ul><ul><li>http://wiki.opensocial.org </li></ul>...
Questions? [email_address] twitter.com/jgyllen http://developer.avatarsunited.com
Upcoming SlideShare
Loading in...5
×

OpenSocial - GTUG Stockholm Meeting Oct 1 2009

1,318

Published on

I gave an introductory talk on OpenSocial at the second Google Technology User Group Stockholm meeting. I included some demos on Avatars United.

Published in: Technology, Spiritual
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,318
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

OpenSocial - GTUG Stockholm Meeting Oct 1 2009

  1. 1. OpenSocial An open standard for social applications Jacob Gyllenstierna Avatars United GTUG Stockholm Meeting October 1, 2009
  2. 2. What is OpenSocial? <ul><li>&quot;...a set of common APIs for building social applications across many websites.&quot; </li></ul>
  3. 3. What is OpenSocial? <ul><ul><li>Applications that leverage social connections and communication channels on a website </li></ul></ul><ul><ul><li>Fetch and post social data about friends and activities, send messages, etc.  </li></ul></ul><ul><ul><li>Single programming model - Write once, run anywhere (almost) </li></ul></ul><ul><ul><li>Can be used both inside and outside enabled website (&quot;OpenSocial container&quot;) </li></ul></ul><ul><ul><li>Module language using XML + JavaScript APIs + HTML for embedded applications </li></ul></ul><ul><ul><li>RESTful & RPC protocols for external applications </li></ul></ul>
  4. 4. Who is using OpenSocial? <ul><ul><li>Many popular social networks and consumer websites </li></ul></ul><ul><ul><li>Emerging in the enterprise space </li></ul></ul><ul><ul><li>+600M users worldwide </li></ul></ul>
  5. 5. OpenSocial vs. Google Gadgets <ul><ul><li>OpenSocial is an extension of the Google Gadgets specification </li></ul></ul><ul><ul><li>Google Gadgets: framework for embedding small applications on websites - rendering, UI components, cross-domain proxying, i18n, user settings, inter-frame communication, security </li></ul></ul><ul><ul><li>Rendered in an iframe on the container </li></ul></ul><ul><ul><li>OpenSocial adds social APIs to Google Gadgets (and server-side protocols...) </li></ul></ul>
  6. 6. Development types <ul><li>  </li></ul>
  7. 7. Hello virtual world! <ul><li><? 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 > </li></ul><ul><li>    < Content type =&quot; html &quot; view =&quot; profile &quot;> </li></ul><ul><li>    <![CDATA[ </li></ul><ul><li>      Hello from the profile view! </li></ul><ul><li>    ]]> </li></ul><ul><li>  </ Content >  </li></ul><ul><li>    < Content type =&quot; html &quot; view =&quot; canvas &quot;> </li></ul><ul><li>    <![CDATA[ </li></ul><ul><li>      Hello from the canvas view! </li></ul><ul><li>    ]]> </li></ul><ul><li>  </ Content > </ Module > </li></ul>
  8. 8. Gadget rendering
  9. 9. Listing my friends <ul><li>  </li></ul><ul><li>  < ModulePrefs ...>     < Require feature =&quot; opensocial-0.8 &quot; />   </ ModulePrefs >   </li></ul><ul><li>  < Content type =&quot; html &quot; view =&quot; profile,canvas &quot;>     <![CDATA[ </li></ul><ul><li>      <h3>My friends:</h3><br />       <div id=&quot;friends&quot;></div> </li></ul><ul><li>      <script type=&quot;text/javascript&quot;>         function fetchFriends() {...}                         function showFriends(response) {...}                         gadgets.util.registerOnLoadHandler(fetchFriends) ;       </script>     ]]> </li></ul><ul><li>  </ Content > </li></ul>
  10. 10. Listing my friends <ul><li>      function fetchFriends() { </li></ul><ul><li>         var req = opensocial.newDataRequest();           </li></ul><ul><li>         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;); </li></ul><ul><li>        req.send(showFriends);       } </li></ul><ul><li>      function showFriends(response) { </li></ul><ul><li>        ... </li></ul><ul><li>      } </li></ul>
  11. 11. Listing my friends <ul><li>      function showFriends(response) { </li></ul><ul><li>        var respItem = response.get(&quot;ownerFriends&quot;); </li></ul><ul><li>                             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; </li></ul>
  12. 12. OpenSocial concepts <ul><ul><li>People </li></ul></ul><ul><ul><li>Friends / Connections </li></ul></ul><ul><ul><li>Activities </li></ul></ul><ul><ul><li>Persistent data (key-value store) </li></ul></ul><ul><ul><li>Messages </li></ul></ul><ul><ul><li>Sharing application </li></ul></ul>
  13. 13. Fetching data from Twitter <ul><li>  < Content type =&quot; html &quot; view =&quot; profile,canvas &quot;> </li></ul><ul><li>    <![CDATA[ </li></ul><ul><li>      <h3>Top ten trends:</h3><br />       <div id=&quot;trends&quot;></div> </li></ul><ul><li>      <script type=&quot;text/javascript&quot;>         function fetchTrends() {...}                         function showTrends(response) {...}                         gadgets.util.registerOnLoadHandler(fetchTrends) ;       </script>     ]]> </li></ul><ul><li>  </ Content > </li></ul>
  14. 14. Fetching data from Twitter <ul><li>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);   </li></ul><ul><li>} </li></ul>
  15. 15. Fetching data from Twitter <ul><li>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;   }} </li></ul>
  16. 16. DEMO  
  17. 17. RESTful & RPC protocols <ul><li>/people/@me/@friends </li></ul><ul><li>[{&quot;result&quot;: </li></ul><ul><li>  {&quot;totalResults&quot;: 35, </li></ul><ul><li>    &quot;list&quot;: [ </li></ul><ul><li>       {&quot;name&quot;: {&quot;unstructured&quot;: &quot;Odonion&quot;, &quot;formatted&quot;: &quot;Odonion&quot;}, </li></ul><ul><li>      &quot;displayName&quot;: &quot;Odonion&quot;, </li></ul><ul><li>      &quot;isOwner&quot;: false, </li></ul><ul><li>      &quot;thumbnailUrl&quot;: &quot;http://albums.cf.avatarsunited.com/avatar/odonion/b87897847211421fb2ce578e82d03e22.small.jpg&quot;, </li></ul><ul><li>      &quot;id&quot;: &quot;au:a:odonion&quot;, </li></ul><ul><li>      &quot;isViewer&quot;: false}, </li></ul><ul><li>      {..}], </li></ul><ul><li>  &quot;id&quot;:&quot;ownerFriends&quot;}}] </li></ul>
  18. 18. Want to run your own container? <ul><ul><li>Apache Shindig - open source OpenSocial server </li></ul></ul><ul><ul><li>Renders gadgets, proxies requests and handles social data requests </li></ul></ul><ul><ul><li>Available in Java & PHP </li></ul></ul><ul><ul><li>Implement services for social data (people, activities, etc.) and OAuth credentials (inbound & outbound) </li></ul></ul><ul><ul><li>http://incubator.apache.org/shindig/ </li></ul></ul>
  19. 19. Worth looking at <ul><ul><li>OpenSocial 0.9 - proxied content, data pipelining, lightweight JS API, OSML, templating </li></ul></ul><ul><ul><li>Google Friend Connect - any site can be a container! </li></ul></ul><ul><ul><li>OpenSocial Virtual Currency API (proposal) </li></ul></ul>
  20. 20. Want to learn more? <ul><ul><li>http://www.opensocial.org </li></ul></ul><ul><ul><li>http://wiki.opensocial.org </li></ul></ul><ul><ul><li>http://code.google.com/apis/gadgets/ </li></ul></ul><ul><ul><li>http://code.google.com/apis/opensocial/ </li></ul></ul>
  21. 21. Questions? [email_address] twitter.com/jgyllen http://developer.avatarsunited.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×