OpenSocial
CS 195.35: Survey of
Contemporary Technologies
Outline

OpenSocial concepts overview
 Containers,
people, relationships, activities, viewers,
owners, friends

Hello world application
 Demo:

installing an application in a container
Requesting social data
 Using
the OpenSocial namespace
 Demo: owner and viewer
 Demo: listing friends
OpenSocial concepts

What is OpenSocial?
 OpenSocial
is an API that enables the development of
applications within a social networking environment
 First version released in 2007
(version 0.9 released early this year)


Based on HTML and JavaScript
Code can be used across multiple social
websites
 Supported
in several containers: Orkut, MySpace,
hi5, friendster, and many others
OpenSocial concepts




People: users in a social networking
environment
Relationships: friends and connections between
people
Activities: actions that users carry out (that they
want friends to know about)
OpenSocial apps: applications/gadgets written
using the OpenSocial API through which users
can interact
Key namespaces


opensocial: defines classes that represent key
objects and data in a social networking
environment (persons, activities, messages) and
functions that facilitate object creation and social
data requests
gadget: defines classes and functions that
facilitate remote data requests and containerspecific user interface features
Roles
Viewer: user who logged in, who may be
viewing another person’s profile
 Owner: user who owns the profile
 Friends: users who have been added as
friends (of the viewer or owner) within the
container

Creating your first social app

What you need
 A container
(social networking website) that
supports OpenSocial

Create an account
(or a sandbox/developer account, as necessary)
 A webhost
where you can store your
application code in

Should be publicly accessible, or accessible from
the container
Creating your first social app
You will need to create an XML file that
specifies your gadget (social app)
 Hello-world <?xml version="1.0" encoding="UTF-8" ?>
<Module>
gadget:
<ModulePrefs title="my first app">

HTML/
JavaScript code
goes here
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html">
<![CDATA[
Hello world, this is my first app.
]]>
</Content>
</Module>
Demo: friendster


Relatively straightforward container to use: apps
can be installed and immediately executed
without special developer or sandbox accounts
Steps:
 Upload
gadget (XML file) to a website
 Log in to friendster, then go to
friendster.com/developer to install application
 Execute the application (your friends may execute or
install the applications as well)
Simple lab exercise

Install the helloworld app

Gadget already uploaded in
http://sites.google.com/site/jpvopenapps/helloworld.xml

Installation steps





Go to friendster.com/developer
(after logging in)
Select the “Get API Key” tab
Fill in gadget details and other requirements,
then click on “Save”
Click on “Test App”, then click on “Add App”
Ask a friend to visit your profile
Requesting social data

Steps:
 Create
an opensocial.DataRequest object
 Add request items to the object
 Send the object to the container, specifying a callback
function

Example: requesting owner data
function request() {
var req = opensocial.newDataRequest();
req.add( req.newFetchPersonRequest(
opensocial.IdSpec.PersonId.OWNER), 'get_owner' );
req.send(response);
};
opensocial.DataRequest.add()
add(request, opt_key)
 Adds a request item to fetch or update
data from the server
 Parameters

 request:
specifies which data to fetch/update
 opt_key: string that the generated response
maps to (for future retrieval from the callback
function)
Request items


There are functions under
opensocial.DataRequest that create request
items
newFetchPersonRequest:
 Creates
an item to request person data for the given
person
 Returns a Person object

newFetchPeopleRequest:
 Creates
 Returns
an item to request friends from the server
a Collection<Person> object
opensocial.DataRequest.send()
send(callback_function)
 Sends the data request to the server in
order to get a data response
 Parameter

 callback_function:
The function to call with the
data response generated by the server
Call back function example

You need a Javascript function through which the response will be
processed
Key specified when
the request was made
function response(dataResponse) {
var owner = dataResponse.get('get_owner').getData();
var html = ' <h3> Owner name:' + owner.getDisplayName()
+ ' </h3> ';
document.getElementById('msg').innerHTML = html;
};

The last line identifies the html code generated

To be inserted inside a div tag: <div id='msg'> </div>
Putting it all together
<script type="text/javascript">
function request() {
var req = opensocial.newDataRequest();
req.add( req.newFetchPersonRequest(
opensocial.IdSpec.PersonId.OWNER), 'get_owner' );
req.send(response);
};
function response(dataResponse) {
var owner = dataResponse.get('get_owner').getData();
var html = ' <h3> Owner name:' + owner.getDisplayName() + ' </h3>';
document.getElementById('msg').innerHTML = html;
};
gadgets.util.registerOnLoadHandler(request);
</script>
<div id='msg'> </div>
Demo

Install the ownerviewer social app in friendster
 Gadget
already uploaded in
http://sites.google.com/site/jpvopenapps/ownerviewer.xml



Execute it
Ask one of your friends in that container to visit
your profile (to execute that application) and
observe the output
Under what circumstances will owner be
different from viewer when your application
executes?
Request items v0.8

People:
 newFetchPersonRequest
 newFetchPeopleRequest

Activities:
 newFetchActivitiesRequest

Application Data: (persistence)
 newFetchPersonAppDataRequest
 newUpdatePersonAppDataRequest
 newRemovePersonAppDataRequest
Request items v0.9

People:



Activities:



newFetchPersonAppDataRequest
newUpdatePersonAppDataRequest
newRemovePersonAppDataRequest
Media Items




newFetchActivitiesRequest
Application Data



newFetchPersonRequest
newFetchPeopleRequest
newCreateMediaItemRequest
newFetchMediaItemsRequest
newUpdateMediaItemRequest
Albums




newCreateAlbumRequest
newFetchAlbumsRequest
newUpdateAlbumRequest
newDeleteAlbumRequest
Listing friends
Take home exercise
 Sign up to a free webhost service, and
upload listfriends.xml (available via
moodle)
 Install the gadget via friendster
 Try other containers (MySpace, Orkut, etc)

What’s next?
Exploring and understanding other
containers and development environments
 Other features of the API

 Persistence:
storing app data
 Activities: generating app-related updates to
be viewed by friends
 Third party requests: communicating with
other servers