OpenSocial and GFC BITS Pilani - March 23,2009

Social Web OpenSocial and Friend Connect Rajdeep Dua Vijaya Machavolu 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:

Yahoo ( YAP)

MySpace

orkut

Hi5

Freebar

Friendster

Webon from Lycos

IDtail

YiQi

Netlog - New!

Hyves - New!

Live Developer Sandboxes:

iGoogle

imeem

CityIN

Tianya

Ning

Plaxo Pulse

Mail.ru

Individual Developer Links: http://code.google.com/apis/opensocial/gettingstared.html

OpenSocial APIs Vijaya Machavolu

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 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; } Callback function for returned friend data

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

OpenSocial’s REST Protocol and Templates

Access social data without JavaScript

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>

Writing JavaScript is hard

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)

REST Templates

Writing an OpenSocial App : DEMO Vijaya Machavolu

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/bestsellers/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);

}

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 Application Development Resources

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/

Friend Connect Social Graph A B C D E Orkut A’ B’ Z’ F’ G’ Myspace A’’ B’’ K’’ F’’ G’’ Google Login (Gmail) mysite.com uses Friend Connect A’’ B Z’

mysite.com adopts FC

A’’ signups for mysite.com using Friend Connect

A’’ has an orkut account as A and myspace account as A’

A’’ invites B from Orkut and Z’ from myspace to be part of his social graph for mysite.com

Social Graph for your site

Friend Connect gives ...

Users

... more ways to do more things with their friends

Site owners

more (and more engaged) traffic for their site

Build a Social graph with profiles from across the web as opposed to a single social networking site

App developers

... more reach for my apps

and ... make it easy

Friend Connect Data w/o Gadgets

Get the social features into your home page outside of iframes

Use Friend Connect social graph and inter-mingle with your content

Use OpenSocial APIs to create social scenarios

Friend Connect on Your Site How it looks like..

Friend Connect In-Page Integration Embed User signup code in the base page Social features using Friend Connect Social Graph using OpenSocial APIs.

Sign up for friend Connect

Allow user to sign-in on Friend Connect get his Friend Connect Social Graph onto your site

Become an OpenId provider or integrate with an openid provider, all your users will be able to sign-up for Friend Connect

Users get their Social Graph from FC

We have a Web Site with an existing User base : How do we integrate Friend Connect

We have a Web Site with an existing User base : How do we integrate Friend Connect ..contd Use OpenId to allow your existing userbase to be plugged in

Friend List comes from friend connect Login for Friend connect using OpenId mysite.com’s Friend Connect Social graph A’’’ B Z’ A’’’ mysite.com’s existing use base OPENID We have a Web Site with an existing User base : How do we integrate Friend Connect..contd

Friend Connect gives ...