Hi5 Opensocial Code Lab Presentation

hi5 OpenSocial Codelab

hi5 - Dominant Global Social Network
We are one of the largest web sites in the world (#8 on Alexa) and the most global of all the social networking sites.
Over 70+ million registered members and ~40 million WW unique users
Most popular Spanish-speaking social network in the world
Top 10 in Latin America
Mexico, Colombia, Bolivia, Guatemala, Peru, Costa Rica, Nicaragua, Honduras, Ecuador, El Salvador
Top 10 in Rest of the World
Portugal, Greece, Romania, Cyprus, Thailand, Jamaica, Sri Lanka, Kuwait, Jordan, Oman

Hi5’s Demographics
Broad reach across major demos:
18 to 34 primary
Roughly 50%split male/female
US traffic: significant percentage is Hispanic
Diverse traffic from Europe (25%), North America (15%) and Central & South America (31%), Asia (21%)
Offered in 14 languages
Grew big in most international countries with English first and then translated
Members use the site primarily to keep in touch with their friends. Users have limited self-expression tools - skins, widgets, etc.

Getting Started
A text editor, or the hi5 Gadget Editor
Web hosting, or the built-in hosting in the hi5 Gadget Editor
A hi5 account
Access to the hi5 sandbox

Getting Started on sandbox.hi5.com

Two ways to get your App going Sample App lets you Edit

Editing Console

Preview Mode

Integration Points
Preview Page
Profile Module
Canvas Page
Friend Updates
Notifications
App Invites
Emails

Hello World
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!” author_email=”lou@hi5.com”>
<Require feature="opensocial-0.7" />
</ModulePrefs>
<Content type="html">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>

Hello World
<Module> indicates that this XML file contains a gadget.
<ModulePrefs> contains information about the gadget, and its author.
author_email must match your hi5 account’s email in the hi5 container
<Require feature="opensocial-0.7" /> denotes a required feature of the gadget — in this case, the OpenSocial API (v0.7).
<Content type="html"> indicates that the gadget's content type is HTML.
<![ CDATA[…]]> contains the bulk of the gadget, including all of the HTML, CSS, and JavaScript (or references to such files).

Initialization
gadgets.util.registerOnLoadHandler(init);
function init() {
loadFriends();
}

Fetching Friends
function loadFriends() {
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 'viewerFriends');
req.send(onLoadFriends);
}

Handle the Response

Handle the Response
function onLoadFriends(data) {
var viewer = data.get('viewer').getData();
var viewerFriends = data.get('viewerFriends').getData();
html = new Array();
html.push('<ul>');
viewerFriends.each(function(person) {
html.push('<li>' + person.getDisplayName() + "</li>");
});
html.push('</ul>');
document.getElementById('friends').innerHTML = html.join('');
}

Adding App Data

Adding App Data
var givenGifts = {};
function giveGift() {
var nut = document.getElementById('nut').value;
var friend = document.getElementById('person').value;
givenGifts[friend] = nut;
var json = gadgets.json.stringify(givenGifts);
var req = opensocial.newDataRequest();
req.add(req.newUpdatePersonAppDataRequest(opensocial.DataRequest.PersonId.VIEWER, 'gifts', json));
req.send();
}

Displaying App Data

Displaying App Data
function updateGiftList(viewer, data, friends) {
var json = data[viewer.getId()]['gifts'];
if (!json) {
givenGifts = {};
}
try {
givenGifts = gadgets.json.parse(json);
} catch (e) {
givenGifts = {};
}
var options = ['a cashew nut', 'a peanut', 'a hazelnut', 'a red pistachio nut'];
var html = new Array();
html.push('You have given:');
html.push('<ul>');
for (i in givenGifts) {
if (+(i) > 0) {
html.push('<li>' + friends[i] + ' received ' + options[givenGifts[i]] + '</li>');
}
}
html.push('</ul>');
document.getElementById('given').innerHTML = html.join('');
}

Displaying App Data

Displaying App Data
function updateReceivedList(viewer, data, friends) {
var viewerId = viewer.getId();
var options = ['a cashew nut', 'a peanut', 'a hazelnut', 'a red pistachio nut'];
var html = new Array();
html.push('You have received:<ul>');
friends.each(function(person) {
var personData = data[person.getId()];
if (personData) {
var json = data[person.getId()]['gifts'];
var gifts = {}
if (!json) {
gifts = {};
}
try {
gifts = gadgets.json.parse(json);
} catch (e) {
gifts = {};
}
for (i in gifts) {
if (+(i) > 0 && i == viewerId) {
html.push('<li>' + options[gifts[i]] + ' from ' + person.getDisplayName() + '</li>');
}
}
}
});
html.push('</ul>');
document.getElementById('recieved').innerHTML = html.join('');
}

Displaying App Data

Resizing the Window

Creating Activity
function createActivity(title) {
var opts = new Array();
opts[opensocial.Activity.Field.TITLE] = title;
opts[opensocial.Activity.Field.STREAM_FAVICON_URL] = 'http://images.hi5.com/images/icons/_/update_widget.png');
var activity = opensocial.newActivity(opts);
// Request the activity creation
opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH);
}

Creating Activity

Sending Notifications
function sendNotifications(notification, toIds) {
var params = new Object();
params[opensocial.Message.Field.TYPE] = opensocial.Message.Type.NOTIFICATION;
var message = opensocial.newMessage(notification, params);
opensocial.requestSendMessage(toIds, message);
}

Sending Notifications

Making Content Requests

Making Content Requests
function getStatus() {
var authToken = this.sandbox.hi5Container.params['Hi5AuthToken'];
gadgets.io.makeRequest('http://api.hi5.com/rest/status/getStatus?userId='+viewer.getField(opensocial.Person.Field.ID) +'&Hi5AuthToken='+authToken,
function(response) {
var data = response.data;
console.debug(response.text);
var content = data.getElementsByTagName('content');
if(content.length == 1) {
document.getElementById('status').innerHTML = "Your status: " + content.item(0).firstChild.nodeValue;
}
},
{'METHOD' : 'GET', 'CONTENT_TYPE' : 'DOM'});
}

Working With Views

Working With Views
<Content type=“html” view=“profile”>
<![CDATA[
<script src="http://images.hi5.com/images/opensocial/gifts.js"></script>
<script>
gadgets.util.registerOnLoadHandler(initProfile);
</script>
<div id='main'>
<div id='received’></div>
</div>
]]>
</Content>

Navigating to a View

Navigating to a View
function navToCanvas() {
var views = gadgets.views.getSupportedViews();
gadgets.views.requestNavigateTo(views['canvas']);
}

Applying a Skin

Other Features
requestShareApp
requestSendMessage
EMAIL, PRIVATE_MESSAGE, PUBLIC_MESSAGE
Person Field extensions
SMALL_IMG_URL, MEDIUM_IMG_URL, LARGE_IMG_URL
Lifecycle Callbacks
Activity Templates

hi5 Roadmap
March 15: Hackathon geared towards launch preparation. Apps will be considered for whitelisting from this date until launch.
March 31: Production launch

http://www.slideshare.net	14
http://web2learn.blogspot.com	4
http://3td4e1kd4ec2hf298kdm7isu8cbuckpm.sandbox.orkut.gmodules.com	2
http://3td4e1kd4ec2hf298kdm7isu8cbuckpm.a.orkut.gmodules.com	2
http://socialgadget.blogspot.com	1
http://www.web2learn.blogspot.com	1
http://translate.googleusercontent.com	1
http://www.blogger.com	1
http://excafem.tr.gg	1

Hi5 Opensocial Code Lab Presentation

by plindner on Feb 23, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 27

Statistics

Hi5 Opensocial Code Lab Presentation — Presentation Transcript