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(\"http://www.amazon.com/rss/bestseller
s/books?num=10\", displayBooks, params);
}

Processing data from external sources
function displayBooks(feed) {
entries = feed.data;
var profileHtml = \"\";
if (gadgets.views.getCurrentView().getName() == \"profile\")
{
for (var i =0; i<entries.Entry.length; i++) {
var item = entries.Entry[i];
profileHtml+=item.Title +\"></br>\";
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({\"userId\":\"VIEWER\",
\"groupId\":\"FRIENDS\"});
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 = \"<select id='friend'>\";
friends.each(function (friend) {
friendList += \"<option value='\" +
friend.getId() + \"'>\" +
friend.getDisplayName() +
\"</option>\";
});
friendList+=\"</select>\";

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

Fetching App data
// Person App Data Request
var personIdSpec =
opensocial.newIdSpec({\"userId\": \"VIEWER\"});
req.add(req.newFetchPersonAppDataRequest(
personIdSpec, \"viewerBookRatings\"), \"ratings\");
req.send(displayFriendsAndBookData);

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

Posting An Activity
function recommentToAFriend(bookTitle) {
var activityParams = {}
activityParams[opensocial.Activity.Field.TITLE] = \"Wanna try
reading this? Looks like a good one to me.\";
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?