OpenSocial and GFC BITS Pilani - March 23,2009

50 %
50 %
Information about OpenSocial and GFC BITS Pilani - March 23,2009
Technology

Published on March 24, 2009

Author: rajdeep

Source: slideshare.net

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 ( 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

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

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

OpenSocial APIs Vijaya Machavolu

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

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

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

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)

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

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/bestsellers/books?num=10&quot;, displayBooks, params); }

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/bestsellers/books?num=10&quot;, displayBooks, params);

}

Processing data from external sources function displayBooks(feed) { entries = feed.data; var profileHtml = &quot;&quot;; if (gadgets.views.getCurrentView().getName() == &quot;profile&quot;) { 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; } } }

function displayBooks(feed) {

entries = feed.data;

var profileHtml = &quot;&quot;;

if (gadgets.views.getCurrentView().getName() == &quot;profile&quot;) {

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;userId&quot;:&quot;VIEWER&quot;, &quot;groupId&quot;:&quot;FRIENDS&quot;}); var peopleParams = {}; peopleParams[opensocial.DataRequest. PeopleRequestFields.MAX] = 10; req.add(req.newFetchPeopleRequest( peopleIdSpec, peopleParams), 'viewerFriends');

// Person Request

req.add(req.newFetchPersonRequest(

opensocial.IdSpec.PersonId.VIEWER), 'viewer');

// People Request

var peopleIdSpec = opensocial.newIdSpec({&quot;userId&quot;:&quot;VIEWER&quot;, &quot;groupId&quot;:&quot;FRIENDS&quot;});

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;;

// 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;viewerBookRatings&quot;, gadgets.json.stringify(bookRatings))); req.send(getViewerFriendsAndBookData); }

function setBookRating(bookId, rating) {

var req = opensocial.newDataRequest();

bookRatings[bookId] = rating;

req.add(req.newUpdatePersonAppDataRequest(

opensocial.IdSpec.PersonId.VIEWER, &quot;viewerBookRatings&quot;, gadgets.json.stringify(bookRatings)));

req.send(getViewerFriendsAndBookData);

}

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

// Person App Data Request

var personIdSpec = opensocial.newIdSpec({&quot;userId&quot;: &quot;VIEWER&quot;});

req.add(req.newFetchPersonAppDataRequest(

personIdSpec, &quot;viewerBookRatings&quot;), &quot;ratings&quot;);

req.send(displayFriendsAndBookData);

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

var appData = data.get('ratings').getData();

var ratingsForViewer = appData[viewer.getId()];

if (ratingsForViewer != null) {

var ratingsAsString =

ratingsForViewer[&quot;viewerBookRatings&quot;];

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); }

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

}

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

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

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

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

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

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

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

Social Web

OpenSocial Introduction

OpenSocial Foundation

OpenSocial Apps – Best Practices

Demo – Building an OpenSocial App

Friend Connect : Making the web more social

Questions?

Add a comment

Related presentations