Open Social presentation given at Yahoo OpenHack Day Feb 14 Bangalore

75 %
25 %
Information about Open Social presentation given at Yahoo OpenHack Day Feb 14 Bangalore

Published on February 22, 2009

Author: rajdeep



Gave this presentation on OpenSocial at Yahoo OpenHack day on Feb 14 ,2009

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 ● ● IDtail ● YiQi ● Netlog - New! ● Hyves - New! ● Individual Developer Links:

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: ●

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[] =; params[] = 10; params[] = 'true';; s/books?num=10quot;, displayBooks, params); }

Processing data from external sources function displayBooks(feed) { entries =; 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 Code Samples and Tools Getting started guide 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

Social Graph for your site Friend Connect Social Graph adopts FC ● A’’ signups for using Friend ● 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 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


Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Home | Yahoo Answers

Yahoo already listed for you 11 Thanksgiving foods you shouldn ... Yahoo Answers. ... Okay so a few days ago I heard a lot of rumors going around that ...
Read more

openhack2009 / FrontPage - PBworks

Welcome to the Open Hack 2009 a Yahoo! Hack Day in ... ... in Oct'07 Open Hack Day Bangalore.
Read more

YDN Blog | Yahoo Blog - Yahoo

View the Yahoo blog YDN Blog on ... sites like “,” or social networking ... only to Bangalore when it comes to ...
Read more

Yahoo! Health

3 Exercises Chicago White Sox Outfielder Adam Eaton Does Every Day to Increase ... 14 Athletes Homes That Will ... Brought to you by Yahoo Lifestyle ...
Read more

Yahoo! Groups

... School of Social ... both in Lund and in Bangalore, has given not ony ... Ethics, and Institutions. Alongside traditional panel presentations, ...
Read more

Yahoo News - Latest News & Headlines

The latest news and headlines from Yahoo! ... 200 nations later in the day. ... the perils of social media when he accidentally posted ...
Read more

Open day calendar - - university and college ...

Open day calendar. Browse the Opendays ... Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec « November; December 2015; January » Monday; Tuesday ...
Read more

Can I retire at 55 and collect from my wifes social security?

Today, there is a revolution where more and more people are becoming data experts and are looking for data for many reasons
Read more

which is the best investment in india?

Try doing some more research on property investment in India before you part with your money seek expert advice also. The websites below may be of interest ...
Read more