hi5 Platform
Pre-Launch Developer Hackathon
March 15, 2008

hi5 Platform
About hi5
Developer Console
Integration Points
Application Discovery
hi5 OpenSocial Extensions
Why Develop for hi5?
Roadmap
Demo

hi5
The Truly Global Social Network

The Developer Console
Managing Your Applications

Developer Console
Add and manage applications
Refresh metadata and i18n messages
Manage other developers
Manage API Keys
Submit applications to the hi5 directory
View analytics
Simple in-line application editor
Multi-language testing
hi5 Developer blog feed

Developer Console

Application Editor

Language Preview

Analytics

Anatomy of a hi5 Application
A seamless user experience within
hi5

Integration Points
Preview
Homepage
My Applications
Profile Module
Draggable, minimizable
Skins feature allows seamless UI integration
Canvas Page
Dedicated page for applications
Monetization opportunity, allows embedded ad tags

Profile Module

Profile Module Action Links

Profile Navigation Tab

Canvas Page

Preview

Homepage

Application Discovery
Achieving massive distribution
across the globe

Application Discovery
Application Directory
Categories, sorting and filtering
Application Homepage
My Friends' applications
Other recommendations
Manage your applications
Viral Channels
Friend Updates
Notifications
Invites
Email (limited to 1 per user per app per day)

Application Directory

Applications Homepage

Friend Updates
On both homepage and profile page
Created using the OpenSocial Activity API (requestCreateActivity)
Publication not guaranteed but typically high (> 80%)

Notifications
Sent using the OpenSocial request* API. (requestSendMessage,
type=NOTIFICATION)
Limited to 5 per user per app per day

Invites
All apps have built-in invite flow from profile and canvas pages

Invites

Homepage Alerts

Email Notifications
Limited to 1 per user/app/day

hi5 Features
Extending OpenSocial to meet your
needs

OpenSocial Feature: hi5
An optional feature that provides access to additional hi5-
specific functionality.
New data requests (hi5 feature)
Photos (hi5.fetchAlbumsDataRequest)
Online Presence (hi5.fetchPresenceRequest)
Status (hi5.fetchStatusRequest)
New fields
Link for friend update media (hi5.ActivityMediaItemField.LINK)
Much more to come!

OpenSocial Feature: hi5-template
Templating support, tag library, and facility for parameterizing
i18n messages
<template xmlns:hi5=\"http://www.w3.org/1999/xhtml\"></template>
<if test=\"expression\"></if>
<else-if test=\"expression\"></if>
<else></if>
<for-each var=\"variable\" source=\"data-source\"></for-each>
<apply-template name=\"template-name\"/>
<hi5:name person=\"person-object\"/>
<hi5:profile-pic [id=\"member-id\" | person=\"person-object\"] size=\"thumb | small\"/>
<hi5:message key=\"property\" [param=\"value\"]*/>

OpenSocial Feature: hi5-lifecycle
Allows developers to declare callback URLs for app installation
and removal
Usage:
<Optional feature=\"hi5-lifecycle\">
<Param name=\"installPingUrl\" value=\"http://yourserver/handleInstall\"/>
<Param name=\"removePingUrl\" value=\"http://yourserver/handleRemove\"/>
</Optional>

Demo
hi5 Gifts Tutorial

Basic Gifts Tutorial
http://lou.sandbox.hi5.com/friend/apps/entry/webvan.hi5.com/gadgets/gifts.xml
Gifts with i18n
http://lou.sandbox.hi5.com/friend/apps/entry/www.webvan.hi5.com/friend/apps/developer/app/get/xml/5197
Template Demo
http://lou.sandbox.hi5.com/friend/apps/entry/www.sandbox.hi5.com/friend/apps/developer/app/get/xml/5206

Develop With Us
More reasons to develop for hi5

More reasons to develop for hi5...
A new audience via our unique footprint in Latin America,
Europe and Asia
Of the more than 80 million individuals registered with
hi5, less than a third are also active on the other leading
social networks, incl. FB, MySpace, Bebo, Friendster
(comscore)
OpenSocial!
Apps can be deeply embedded within hi5, as well as
easily translated beyond hi5 to other OpenSocial-
enabled websites

More reasons to develop for hi5...
$$$
A dedicated canvas page that can be monetized
Promotions on the hi5 blog (one developer post/mo –
rotating among our registered developers with popular
apps)
Free Infrastructure from Joyent
hi5 Developers could win one year of Joyent’s Free
Accelerator™ scalable, on-demand infrastructure for
their hi5 app!
Limited number at launch, more to come

More reasons to develop for hi5...
Translation Services
We plan on offering translation support into Spanish to
the first 100 high-quality applications approved for
production
We look forward to offering built-in translation support for
all hi5 applications in multiple languages in future
versions of the platform

hi5 Platform Launch
Several hundred apps in our sandbox that we are reviewing
and working with developers to finalize.
White-list style approach to ensure app quality and user-
centric relevancy (guidelines to be published this week)
March 31st Public Launch
Public rollout begins! We'll launch with as many applications
that have met our guidelines and are ready to go live.

Important Links
Developer site
http://developer.hi5.com - All below links are accessible from here.
Developer Registration
http://sandbox.hi5.com/friend/apps/developer.do
API Documentation
http://api.hi5.com
Application Guidelines
http://www.hi5networks.com/platform/wiki/AppGuidelines
Bug Tracker
http://www.hi5networks.com/platform/report
Discussion Forums
http://www.hi5networks.com/platform/discussion

Questions

The Gifts Tutorial
Step-by-step guide to building an
OpenSocial app on hi5

Basic OpenSocial XML
<?xml version=\"1.0\" encoding=\"UTF-8\" ?>
<Module>
<ModulePrefs title=\"Gifts Tutorial” author_email=”
lrm718@yahoo.com”>
<Require feature=\"opensocial-0.7\" />
</ModulePrefs>
<Content type=\"html\">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>

Important Meta-data
<ModulePrefs title=\"Gifts Tutorial”
author_email=”lrm718@yahoo.com”
summary=\"short description for list views\"
description=\"long description for preview\"
thumbnail=\"http://yourhost/path_to_120x60_img\"
icon=\"http://yourhost/path_to_15x15_favicon\"
>

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

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

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

Resizing the Window
In Module element:
<Require feature=\"dynamic-height\"/>
After rendering content:
gadgets.window.adjustHeight()

Creating Activity
function createActivity(title) {
var opts = new Array();
opts[opensocial.Activity.Field.TITLE] = title;
var mediaItems = new Array();
var mediaItem = opensocial.newActivityMediaItem(opensocial.Activity.MediaItem.Type.IMAGE, viewer.
getField(opensocial.Person.Field.THUMBNAIL_URL));
// Add a media item link if supported
if(gadgets.util.hasFeature('hi5') && opensocial.getEnvironment().supportsField(opensocial.Environment.
ObjectType.ACTIVITY_MEDIA_ITEM, hi5.ActivityMediaItemField.LINK)) {
mediaItem.setField(hi5.ActivityMediaItemField.LINK, viewer.getField(opensocial.Person.Field.
PROFILE_URL));
}
var activity = opensocial.newActivity(opts);

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
var viewerLink = viewer.getField(opensocial.Person.Field.PROFILE_URL);
var notification = '<a href=\"' + viewerLink + '\">' + viewer.getDisplayName() +
'</a> gave you a ' + options[nut];
var toIds = {};
toIds.push(friend);
sendNotifications(notification, toIds);

Making Content Requests
function getJournal() {
gadgets.io.makeRequest('http://api.hi5.com/rest/feed/journal/userId',
function(response) {
var data = response.data;
// do something with data
},
{'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']);
}

Using Skins
In ModulePrefs:
<Require feature=\"skins\"/>
In Your Application:
function setSkin() {
document.write('<style type=\"text/css\">');
document.write('.main {');
bgColor = gadgets.skins.getProperty(gadgets.skins.Property.BG_COLOR);
if(bgColor) {
document.write('background-color:' + bgColor + ';');
}
document.write('}');
document.wrtie('</style>');
}

Adding the hi5 OpenSocial API
In ModulePrefs:
<Optional feature='hi5'/>

Adding hi5 data requests
var req = opensocial.newDataRequest();
req.add(req.newUpdatePersonAppDataRequest(opensocial.DataRequest.PersonId.VIEWER,'gifts', json));
req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
req.add(req.newFetchPersonRequest('OWNER'), 'owner');
req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 'viewerFriends');
req.add(req.newFetchPersonAppDataRequest('VIEWER', 'gifts'), 'data');
if(gadgets.util.hasFeature('hi5')) {
req.add(hi5.newFetchStatusRequest('OWNER'),'ownerStatus');
req.add(hi5.newFetchPresenceRequest('VIEWER_FRIENDS'),'viewerFriendsPresence');
}
req.send(onLoadFriends);
Documentation on hi5 js objects:
http://www.hi5networks.com/platform/wiki/JsAPI (Work in progress)

hi5 REST API
api.hi5.com
Roadmap
We will add support to access more of our REST API via
OpenSocial calls
We will move towards compliance with a standard
OpenSocial REST API implementation

Sample App Code
http://webvan.hi5.com/gadgets/gifts.js
http://webvan.hi5.com/gadgets/gifts.xml