1. hi5 Platform
Pre-Launch Developer Hackathon
March 15, 2008

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

3. hi5
The Truly Global Social Network

9. The Developer Console
Managing Your Applications

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

11. Developer Console

12. Application Editor

13. Language Preview

14. Analytics

15. Anatomy of a hi5 Application
A seamless user experience within
hi5

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

17. Profile Module

18. Profile Module Action Links

19. Profile Navigation Tab

20. Canvas Page

21. Preview

22. Homepage

23. Application Discovery
Achieving massive distribution
across the globe

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

25. Application Directory

26. Applications Homepage

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

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

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

30. Invites

31. Homepage Alerts

32. Email Notifications
Limited to 1 per user/app/day

33. hi5 Features
Extending OpenSocial to meet your
needs

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

35. OpenSocial Feature: hi5-template
Templating support, tag library, and facility for parameterizing
i18n messages
<template xmlns:hi5=quot;http://www.w3.org/1999/xhtmlquot;></template>
<if test=quot;expressionquot;></if>
<else-if test=quot;expressionquot;></if>
<else></if>
<for-each var=quot;variablequot; source=quot;data-sourcequot;></for-each>
<apply-template name=quot;template-namequot;/>
<hi5:name person=quot;person-objectquot;/>
<hi5:profile-pic [id=quot;member-idquot; | person=quot;person-objectquot;] size=quot;thumb | smallquot;/>
<hi5:message key=quot;propertyquot; [param=quot;valuequot;]*/>

36. OpenSocial Feature: hi5-lifecycle
Allows developers to declare callback URLs for app installation
and removal
Usage:
<Optional feature=quot;hi5-lifecyclequot;>
<Param name=quot;installPingUrlquot; value=quot;http://yourserver/handleInstallquot;/>
<Param name=quot;removePingUrlquot; value=quot;http://yourserver/handleRemovequot;/>
</Optional>

37. Demo
hi5 Gifts Tutorial

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

39. Develop With Us
More reasons to develop for hi5

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

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

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

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

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

45. Questions

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

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

48. Important Meta-data
<ModulePrefs title=quot;Gifts Tutorial”
author_email=”lrm718@yahoo.com”
summary=quot;short description for list viewsquot;
description=quot;long description for previewquot;
thumbnail=quot;http://yourhost/path_to_120x60_imgquot;
icon=quot;http://yourhost/path_to_15x15_faviconquot;
>

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

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

51. Handle the Response

52. 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() + quot;</li>quot;);
});
html.push('</ul>');
document.getElementById('friends').innerHTML = html.join('');
}

53. Adding App Data

54. Adding App Data

55. Adding App Data

56. 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();
}

57. Displaying App Data

58. Displaying App Data

59. Displaying App Data

60. 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('');
}

61. Displaying App Data

62. Displaying App Data

63. Resizing the Window
In Module element:
<Require feature=quot;dynamic-heightquot;/>
After rendering content:
gadgets.window.adjustHeight()

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

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

66. Sending Notifications
var viewerLink = viewer.getField(opensocial.Person.Field.PROFILE_URL);
var notification = '<a href=quot;' + viewerLink + 'quot;>' + viewer.getDisplayName() +
'</a> gave you a ' + options[nut];
var toIds = {};
toIds.push(friend);
sendNotifications(notification, toIds);

67. 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'}
);
}

68. Working With Views

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

70. Navigating to a View

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

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

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

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

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

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