Hi5 Opensocial Code Lab Presentation

hi5 OpenSocial Codelab

hi5 - Dominant Global Social NetworkWe are o ne o f the large st w e b site s in the w o rld

(#8 o n Ale xa) and the mo st glo bal o f all the so cial ne tw o rking site s.

Over 70+ million registered members and ~40 million WW unique users

Most popular Spanish-speaking social network in the world

Top 10 in Latin AmericaMexico, Colombia, Bolivia, Guatemala, Peru, Costa

Rica, Nicaragua, Honduras, Ecuador, El Salvador

Top 10 in Rest of the WorldPortugal, 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 Friendsfunction 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 Responsefunction 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

Displaying App Data

Displaying App Data

Displaying App Datafunction 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

Resizing the Window

Creating Activityfunction 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

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