Implementing an OpenSocial Container

Lou Moore, hi5.com

hi5

The Truly Global Social Network

hi5 — International Leader

Africa

Cote d'Ivoire

Ghana

Tunisia

Asia

Thailand

Mongolia

#1 social network in 26 countries:

80M+ registered members

40M WW monthly uniques

80M+ registered members

40M WW monthly uniques

Europe

Portugal

Romania

Greece

Cyprus

Malta

Albania

Macedonia

Luxembourg

Latin America & Caribbean

Mexico

Venezuela

Costa Rica

Honduras

Ecuador

El Salvador

Guatemala

Peru

Nicaragua

Dominican Republic

Cuba

Jamaica

Barbados

hi5 — Truly Global Social Network

15%25%

30%

20%10%

hi5 Traffic Across the Globe

Offered in 23 Language Options

Coming soon: hi5 tool to translate your application!

Coming soon: hi5 tool to translate your application!

English Español (3 dialects: Español, España & Argentina)

Português(2 dialects: Portugal & Brasil) Français

Italiano

Ελληνικά

Русский

中文(traditional & simplified scripts)

Deutsch

Nederlands

Türkçe

Română

日本語 ภาษาไทย

Polski

Magyar ČeskyYkpaÏHCbKa

한국어

hi5 User Demographics

Opportunity to Reach New Users

~20% users overlap

~30% users overlap

~20% users overlap

~40M WW hi5 unique users~40M WW hi5 unique users

Motivation

Why Platform? Why OpenSocial?

Why Platform?

Tap talent and creativity of the developer community Provide engaging experience for our users Obtain locally relevant content, provide a locally relevant experience

Why OpenSocial?

Standards-based platform for deep integration within hi5– Decreases our time to market– Leverages open standards– Strong opensource community

Draw for developers because OpenSocial apps are easily portable

Defining Your Platform

How will applications integrate with your social website?

Views - Profile

User profiles are the center for self-expression on hi5 and are a common feature of social sites

A profile page may have many applications

Views - Profile

Views – Profile

Considerations– Performance: Many applications with dynamic content will impact page load

times.– Styling: hi5 Profiles can be heavily styled so application profile views need to be

able to seamlessly blend.– Customization: Allow users to control their profile pages via features like module

re-ordering.– Common Actions: Provide links to View, Share, and Remove applications.– What apps can’t do on hi5 Profiles

• Use viral channels

• Advertise or cross-promote

Views - Canvas

Dedicated page for applications Monetization opportunity – advertisements allowed

Views - Canvas

Views - Canvas

Considerations– Vanity URLs for application canvas pages– Canvas page should detect if user has installed the application– Provide links for users to manage application settings – Provide method for users to give feedback to developers

Views - Preview

Non-standard view Way for users to interact with an application without installing it Option for installing application

– Privacy settings to be applied

Displays information about the application– Metadata such as summary and description– Friends with the application– Other apps by the developer– Rankings & ratings

Views - Preview

Views - Preview

Considerations– Non-standard view, another size for developers to conform to– Permissions model is complex if viral channels allowed, but allows for a richer

pre-install experience (beware the blinking red arrow)

Views – Anywhere you choose!

Homepage? Photos? Albums? Define your own views in the context of your social site.

Permissions

Access profile data Add profile module Allow friend updates (activity) Allow notifications Allow email

Viral Channels - Activity

hi5 Friend Updates are displayed on the user’s profile and their friends’ homepages

Viral Channels - Notifications

Lightweight message sent to a user notifying them of some event. No action required, expire after 2 weeks, and limited to 5 per

app/user/day

Viral Channels - Email

Limited to 1 per user/app/day

Viral Channels - Invites

Invites are requests sent from a user to a friend inviting them to install an application. Requests do require action on the part of the recipient.

Directory

Applications must be approved to be added to the hi5 directory. Randomized at launch to maintain a level playing field. Engagement-based metrics will be introduced to rank applications. Sorting by most recent applications and applications that are locally

relevant or support the user’s language will also be introduced.

Directory

Applications Homepage

Implementing a REST API

Creating the web services necessary to support OpenSocial

Publishing the hi5 Web Service

Enunciate– Opensource java web service framework– Publishes endpoints in REST, JSON, and SOAP formats– Auto-documenting, annotation-based– http://enunciate.codehaus.org

Authentication– auth tokens generated based on valid API Key and hi5 user/password

combination– Auth token may be obtained via REST call, but is always made available within

OpenSocial applications

hi5 REST APIs

REST API

OpenSocial core APIs– People– Activity– Persistence

hi5 REST endpoints– profile/foaf– feed/activity– profile/appdata

Example call– http://api.hi5.com/rest/profile/foaf/23777773

REST API

OpenSocial request* APIs– requestSendMessage– requestCreateActivity

hi5 REST endpoints– notifications/send– message/sendEmails– friendUpdates/friendUpdate

Example call– http://api.hi5.com/rest/notifications/send?

toIds=23777773&body=Hey&Hi5AuthToken=xxxxx

OpenSocial REST API

Currently no standard REST API across containers OpenSocial REST API spec in progress hi5 will migrate to support this in future

Implementing the OpenSocial API

Tying it back to your social data

Shindig

Opensource Apache project – implementation of OpenSocial and Gadgets specifications.

– Gadget Container JavaScript -- core JavaScript foundation for general gadget functionality.

– Gadget Server – renders the gadget XML into JavaScript and HTML– OpenSocial Container JavaScript -- OpenSocial specific functionality (profiles,

friends, activities, datastore)

Shindig Structure

Shindig - Features

Shindig – opensocial-reference

Shindig – opensocial-0.7

Shindig – feature.xml

Data Requests

opensocial.newDataRequest– newFetchPersonRequest– newFetchPeopleRequest– newFetchActivitiesRequest– newFetchPersonAppDataRequest– newUpdatePersonAppDataRequest

Map to hi5 REST endpoints and convert results to OpenSocial objects

– opensocial.Person– opensocial.Activity– Persistence returns Map<PersonId, Map<String, String>>

jsoncontainer.js – Fetch People

jsoncontainer.js and the SocialData Servlet

Request Batching– Java servlet handles batched requests and returns one large JSON response

All data fetches routed to SocialData servlet via jsoncontainer.js

Viral Requests (request*)

opensocial.requestCreateActivity– supported fields include TITLE, BODY, MEDIA_ITEMS, URL– a and br tags allowed in TITLE and BODY

opensocial.requestSendMessage– NOTIFICATION and EMAIL implemented– PRIVATE_MESSAGE and PUBLIC_MESSAGE return NOT_IMPLEMENTED

response

opensocial.requestShareApp– implemented as rpc call to navigate to invite page

Map requests to hi5 REST api, return opensocial.ResponseItem

hi5container.js – Create Activity

hi5container.js – Share App

Gadgets – Core

Prefs– user data including country and language injected into applications

io– gadgets.io.makeRequest for remote fetching– signed requests using OAuth

Gadgets – Other Features

Views– gadgets.views.requestNavigateTo

• rpc call to navigate to a desired View

– gadgets.views.getCurrentView– gadgets.views.getParams– view-params

• params in json format to be passed into applications

Skins– gadgets.skins.getProperty

hi5 Feature – Extending OpenSocial

hi5.newFetchAlbumsRequest hi5.ActivityMediaItemField.LINK hi5.PersonField.PRESENCE

Capabilities discovery– gadgets.util.hasFeature– gadgets.views.getSupportedViews– opensocial.getEnvironment().supportsField– Container declares supported features, views, and fields

hi5.js

Running a Shindig Server

OpenSocial in a high-volume production environment

Working with Shindig

Deployment model– Own shindig svn repository– Build gadgets.jar– Build api war including gadgets.jar (shindig) and friend.jar (hi5) using enunciate– Deploy resulting war as web service on tomcat 6

hi5 Platform Architecture

Production Shindig Stats

Currently 30 API/Shindig servers 6.4 billion requests since launch Servers processing on average 200 req/s, 4-500 possible Overall Traffic peak > 7000 req/s

Significant efforts invested in making shindig work well with caching in the browser and on Akamai.

Learnings contributed back to OpenSocial

Building a Thriving Developer Community

Communication, Communication, Communication

Tools

Built-in app editor Language preview Activity preview to come

Communication

Wiki, Bug Tracker, Forums IRC!! Blog Posts

– Clear explanations of viral channels, ranking systems, guidelines– Post often

Incentives

Free translations Hosting through Joyent

Maintaining a Great User Experience

It’s still all about the users

Privacy Controls

My Apps page with controls for each installed app Ability to select privacy settings on preview/install page Choice to uninstall or remove from profile on Remove link on profile

Mitigating Spamminess

Blocking an app Reporting spam on all viral channels Collecting feedback Smart limits on viral channels, ability to monitor and control

It’s a delicate balance between developer freedom and user experience

Internationalization & Localization

Basic support available today Activity and Message templates coming soon Crowd-sourced translation services for applications coming soon Developer outreach in global markets, leverage platform to provide

a locally relevant experience.

Results

Production launch 3/31, full launch to 100% of users 4/4 65 applications at launch, 328 today in 21 categories Averaging > 1 million new installs each day 5 apps with > 1 million installs, 11 more with > 500k installs Top apps getting > 1 million daily canvas views

~50% of active users have at least one application installed Active users average ~3 apps on every profile, with as many as 16

Demo

Walkthrough of an OpenSocial application on the hi5 platform: PixWall by PixVerse

Questions?