Open Social presentation given at Yahoo OpenHack Day Feb 14 Bangalore

Social Web OpenSocial and Friend Connect Rajdeep Dua Anash Oommen Google Developer Relations

Agenda OpenSocial Introduction ( Rajdeep ) ● Demo – Building an OpenSocial app – (Anash) ● How to build OpenSocial applications – (Anash) ● Best Practices ● OpenSocial on the cloud ● Google Friend Connect (Rajdeep) ●

OpenSocial Introduction

Making the web better by making it social What does social mean?

OpenSocial A common API for social applications across multiple web sites

The Trouble with Developing Social Apps Which site do I build my app for?

Let’s work on that… Using OpenSocial, I can build apps for all of these sites!

What’s offered by OpenSocial? Activities ● What are people up to on the web ● People/Profile Info ● Who do I know, etc. ● Persistent datastore ● Handles key/value pairs ●

Today: 375 Million User Reach

Where is OpenSocial live today? Live to Users: Live Developer Sandboxes: Yahoo ( YAP) iGoogle ● ● MySpace imeem ● ● orkut CityIN ● ● Hi5 ● Tianya ● Freebar ● Ning ● Friendster ● Plaxo Pulse ● Webon from Lycos ● Mail.ru ● IDtail ● YiQi ● Netlog - New! ● Hyves - New! ● Individual Developer Links: http://code.google.com/apis/opensocial/gettingstared.html

OpenSocial APIs Anash Oommen

What’s in OpenSocial? JavaScript API - Now ● REST Protocol - New ● Templates - Prototype in Shindig ●

OpenSocial’s JavaScript API OpenSocial JS API ● Gadget JS API ● Gadget XML schema ● OpenSocial v0.7 is live ● OpenSocial v0.8 is being deployed now ● Specs and release notes: http://opensocial.org ●

People & Friends Example Callback function for returned friend data function onLoadFriends(resp) { var viewer = resp.get('viewer').getData(); var viewerFriends = resp.get('viewerFriends').getData(); var html = 'Friends of ' + viewer.getDisplayName() + ‘:<br><ul>’; viewerFriends.each(functi on(person) { html += '<li>' + person.getDisplayName()+'</li>';}); html += '</ul>'; document.getElementById('friends').innerHTML += html; }

People & Friends Example Requesting friend Info function getFriendData() { var req = opensocial.newDataRequest(); req.add( req.newFetchPersonRequest(VIEWER), 'viewer'); req.add( req.newFetchPeopleRequest(VIEWER_FRIENDS), 'viewerFriends'); req.send(onLoadFriends); }

OpenSocial’s REST Protocol and Templates RES Access social data without JavaScript T ● Works on 3rd party websites / phones / etc ● Uses OAuth to allow secure access ● Open source client libraries in development ● ● Java, PHP, Python, <your fav language here> Tem Writing JavaScript is hard ● plate s Writing templates is easy ● Templates also give ● Consistent UI across containers ● Easy way to localize ● More interesting content options when inlining ● into container (activities, profile views)

Writing an OpenSocial App : DEMO Anash Oommen

Main tasks in a gadget Fetch and use Friends list ● Store and retrieve app data (Persistence) ● Post activities ● Retrieve data from external sources ●

Requesting data from external sources function init() { var params = {}; // Retrieves the top 10 best seller books from amazon params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED; params[gadgets.io.RequestParameters.NUM_ENTRIES] = 10; params[gadgets.io.RequestParameters.GET_SUMMARIES] = 'true'; gadgets.io.makeRequest(quot;http://www.amazon.com/rss/bestseller s/books?num=10quot;, displayBooks, params); }

Processing data from external sources function displayBooks(feed) { entries = feed.data; var profileHtml = quot;quot;; if (gadgets.views.getCurrentView().getName() == quot;profilequot;) { for (var i =0; i<entries.Entry.length; i++) { var item = entries.Entry[i]; profileHtml+=item.Title +quot;></br>quot;; document.getElementById('main').innerHTML = profileHtml; } } }

Fetching Viewer and Friends list // Person Request req.add(req.newFetchPersonRequest( opensocial.IdSpec.PersonId.VIEWER), 'viewer'); // People Request var peopleIdSpec = opensocial.newIdSpec({quot;userIdquot;:quot;VIEWERquot;, quot;groupIdquot;:quot;FRIENDSquot;}); var peopleParams = {}; peopleParams[opensocial.DataRequest. PeopleRequestFields.MAX] = 10; req.add(req.newFetchPeopleRequest( peopleIdSpec, peopleParams), 'viewerFriends');

Processing Friends data // Get the Viewer's friends and from the response var friends = data.get('viewerFriends').getData(); // Iterate through each friend and build a list var friendList = quot;<select id='friend'>quot;; friends.each(function (friend) { friendList += quot;<option value='quot; + friend.getId() + quot;'>quot; + friend.getDisplayName() + quot;</option>quot;; }); friendList+=quot;</select>quot;;

Persisting App data function setBookRating(bookId, rating) { var req = opensocial.newDataRequest(); bookRatings[bookId] = rating; req.add(req.newUpdatePersonAppDataRequest( opensocial.IdSpec.PersonId.VIEWER, quot;viewerBookRatingsquot;, gadgets.json.stringify(bookRatings))); req.send(getViewerFriendsAndBookData); }

Fetching App data // Person App Data Request var personIdSpec = opensocial.newIdSpec({quot;userIdquot;: quot;VIEWERquot;}); req.add(req.newFetchPersonAppDataRequest( personIdSpec, quot;viewerBookRatingsquot;), quot;ratingsquot;); req.send(displayFriendsAndBookData);

Processing App data var appData = data.get('ratings').getData(); var ratingsForViewer = appData[viewer.getId()]; if (ratingsForViewer != null) { var ratingsAsString = ratingsForViewer[quot;viewerBookRatingsquot;]; var ratingsAsJson = gadgets.json.parse( gadgets.util.unescapeString(ratingsAsString)); bookRatings = ratingsAsJson; }

Posting An Activity function recommentToAFriend(bookTitle) { var activityParams = {} activityParams[opensocial.Activity.Field.TITLE] = quot;Wanna try reading this? Looks like a good one to me.quot;; activityParams[opensocial.Activity.Field.BODY ] = bookTitle; activityParams[opensocial.Activity.Field.USER_ID] = document.getElementById('friend').value; var activity = opensocial.newActivity(activityParams); opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.LOW, activityPosted); }

Application Development Resources Specification http://opensocial.org/ http://groups.google.com/group/opensocial-and-gadgets-spec Code Samples and Tools http://code.google.com/opensocial http://code.google.com/p/opensocial-resources/ Getting started guide http://code.google.com/apis/opensocial/articles/tutorial/tutorial-0. 8.html

Google Friend Connect Rajdeep Dua

What is Friend Connect? Allows any site to become an OpenSocial container by simply copying a few snippets of code into your site http://www.google.com/friendconnect/

Social Graph for your site Friend Connect Social Graph mysite.com adopts FC ● A’’ signups for mysite.com using Friend ● mysite.com uses Friend Connect A’’ has an orkut account as A and Connect ● A’’ myspace account as A’ A’’ invites B from Orkut and Z’ from ● Z’ B myspace to be part of his social graph for mysite.com Orkut Myspace Google Login (Gmail) A A’ A’’ B C B’ Z’ B’’ K’’ D E F’ G’ F’’ G’’

How it looksYour Site like.. Friend Connect on

Friend Connect gives ... Users ● ... more ways to do more things with my friends ● Site owners ● ● ... more (and more engaged) traffic for my site App developers ● ● ... more reach for my apps and ... make it easy

Summary • Social Web • OpenSocial Introduction OpenSocial Foundation • • OpenSocial Apps – Best Practices Demo – Building an OpenSocial App • • Friend Connect : Making the web more social

Questions?

Open Social presentation given at Yahoo OpenHack Day Feb 14 Bangalore

by rajdeep on Feb 22, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 2

Statistics

Open Social presentation given at Yahoo OpenHack Day Feb 14 Bangalore — Presentation Transcript