The Open & Social Web - Kings of Code 2009

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

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

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

http://www.chabotc.com	772
http://www.basicthinking.de	227
http://www.mehrblog.net	63
http://londongtug.blogspot.com	63
http://london-gtug.blogspot.com	29
http://rockk.egloos.com	28
http://www.vzlog.de	27
http://www.partuza.nl	16
http://googlerus.ru	6
http://web.archive.org	5
http://kyiv-gtug-center.blogspot.com	4
http://www.slideshare.net	4
http://www.googlerus.ru	4
http://paper.li	3
http://feeds.feedburner.com	2
http://cruisecontrol.chabotc.com	2
http://www.gtug.org.ua	2
http://patuza.chabotc.com	1
resource://brief-content	1
http://webcache.googleusercontent.com	1
http://www.cavo.org	1
http://buzz-demos.com	1
http://liquidtv.wordpress.com	1
http://209.85.129.132	1
http://74.125.79.132	1
http://www.blogger.com	1
http://translate.googleusercontent.com	1
http://74.125.77.132	1
http://live.slava.dev	1
http://shindif.chabotc.com	1
http://cartuza.chabotc.com	1

The Open & Social Web - Kings of Code 2009

by Chris Chabot on Jul 10, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

31 Embeds 1,271

Statistics

The Open & Social Web - Kings of Code 2009 — Presentation Transcript