Crossing the Boundaries of Web Applications with OpenSocial

Crossing theboundaries of webapplications withOpenSocialBastian HofmannVZnet Netzwerke Ltd.

Questions? Ask!

http://slideshare.net/bashofmann

http://www.opensocial.org/

A set of APIs to access the social graph of users

A speciﬁcation for including 3rd partyapplications (gadgets) into social services

What is a Gadget?• XML ﬁle with HTML and JavaScript (and CSS, Images, Flash, ...)• Application based on the Google Gadgets speciﬁcation• Can be included on various platforms

Rendering

Social APIs

CANVAS

PROFILE

PREVIEW

Features

Application models

JavaScript basedContainer Shindigvz.net apivz.net Ajax HTTP HTTP Gadget Gadget Backend apivz.net api.twitter.com

ProxyContainer Shindigvz.net apivz.net Ajax HTTP Gadget Gadget Backend Ajax apivz.net api.twitter.com

JavaScript RPCContainer - window.postMessagevz.net - Iframes with relay ﬁles Method Call - Flash Gadget apivz.net

FlashContainer Shindigvz.net apivz.net Ajax HTTP Gadget apivz.net HTTP Gadget Backend api.twitter.com Flash HTTP

RedirectingContainer Shindigvz.net apivz.net HTTP iframe api.twitter. Gadget Backend com api.twitter.com Ajax

Additional IframeContainer Shindigvz.net apivz.net Ajax HTTP Gadget apivz.net Gadget Backend api.twitter.com iframe Ajax

Proxied ContentOpenSocial Templates OAuth Proxy Requests OSAPI AppData DataPipelining OEmbed Let‘s start programming

https://github.com/bashofmann/statusnet_gadget

OAuth 1.0a Flow+----------+ +---------------+| -+----(B)-- Request Token -------->| || End-user | | Authorization || at |<---(C)-- User authenticates --->| Server || Browser | | || -+----(D)-- Verifier -------------<| |+-|----|---+ +---------------+ | | ^ v (B) (D) | | | | | | ^ v | |+---------+ | || |>---(A)-- Redirect URL ---------------| || Web |<---(A)-- Request Token + Secret -----| || Client |>---(E)-- Request Token, Verifier ---- || |<---(E)-- Access Token + Secret -------------+---------+Every Request: Client Credentials, Nonce, Timestamp, Signaturehttp://oauth.net/

Displaying data<script type="text/javascript">var viewers= opensocial.data.DataContext.getDataSet BAD("ViewerFriends");var html="<ul>";for (var i=0; i < viewers.length; i++) { html += "<li>" + viewers[i].displayName + "</li>";}document.getElementById("div").innerHTML = html;</script>

Embedded Experience

From: notifications@socialnetwork.comTo: johndoe@example.comSubject: Social Network: Mary Has Commented On Your StatusMIME-Version: 1.0Content-Type: multipart/alternative; boundary="XXXXboundary text"--XXXXboundary textContent-Type: text/html<html></html>--XXXXboundary textContent-Type: application/embed+json{ "gadget" : "http://www.socialnetwork.com/embedded/commentgadget.xml", "context" : 123}

OpenSearch

<Optional feature="opensearch"> <Param name="description"> <![CDATA[ <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> <ShortName>Example Search</ShortName> <Description>Realtime Example Search</Description> <Url type="application/atom+xml" method="get"template="http://search.example.com/search.atom?q={searchTerms}"/> <Image width="16" height="16">http://search.example.com/favicon.png</Image> <InputEncoding>UTF-8</InputEncoding> <SearchForm>http://search.example.com/</SearchForm> </OpenSearchDescription> ]]> </Param></Optional>

Common Container

http://activitystrea.ms/

View Level Features

Declarative actions

<Content type="html"> <![CDATA[ <script> // Bind javascript function to action ID function mycallback{ ... } var myaction = { id: "org.samplevoip.callbyperson", callback: mycallback } container.actions.updateAction(myaction); </script> ]]> </Content></Module>

Documentation http://docs.opensocial.org http://developer.studivz.net/wiki/index.php/ Gadgets_Technical_Documentation

h"p://twi"er.com/Bas2anHofmannh"ps://proﬁles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmannmail@bas2anhofmann.de

Crossing the Boundaries of Web Applications with OpenSocial

by Bastian Hofmann

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 6

Statistics

Crossing the Boundaries of Web Applications with OpenSocial Presentation Transcript