This document provides information about building social gadgets using OpenSocial including an introduction, getting started steps, examples of basic gadget code and functionality like requesting friends, saving app data, creating activities, sending notifications, using views, and other useful links. It includes code snippets and explanations for common OpenSocial tasks.

1. OPENSOCIAL
CODELAB
PIETER DE SCHEPPER
Web Developer - Netlog
JOCHEN DELABIE
Web Developer - Netlog
CHEWY TREWHELLA
Developer Advocate - Google

2. Getting Started
• Text Editor or Google Gadget Editor
• Web Hosting or built-in hosting from Google
Gadget Editor
• You need a Netlog Account
• You can start developing in the Netlog
Sandbox

3. Netlog Sandbox
http://en.netlog.com/go/developer/opensocial/
sandbox

4. Gadget Basics
Hello World example
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?>
<Module>
<ModulePrefs title=quot;Hello Worldquot; author=quot;Pieter De
Schepperquot; author_email=quot;pieter@netlog.comquot;>
<Require feature=quot;opensocial-0.8quot;/>
</ModulePrefs>
<Content type=quot;htmlquot;>
<![CDATA[
Hello World!
]]>
</Content>
</Module>

5. Gadget Basics
• <Module> implies that the XML describes a gadget
• <ModulePrefs>contains information about the
gadget, its author and its basic characteristics
• specifies to the
<Require feature=quot;opensocial-0.8quot;/>
container to load a certain feature, in this case
opensocial 0.8
• indicates that the gadget’s
<Content type=quot;htmlquot;>
content type is html
• contains all HTML, CSS, JavaScript
<![CDATA[...]]
that makes the gadget to what it is

6. Writing your first Social Gadget
Request Friends of viewer
function loadFriends()
{
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), 'viewer');
var viewerFriends = opensocial.newIdSpec({ quot;userIdquot; : quot;VIEWERquot;, quot;groupIdquot; : quot;FRIENDSquot; });
var opt_params = {};
opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100;
req.add(req.newFetchPeopleRequest(viewerFriends, opt_params), 'viewerFriends');
req.send(onLoadFriends);
}
function init()
{
loadFriends();
}
gadgets.util.registerOnLoadHandler(init);

7. Writing your first Social Gadget
Handling the data
function onLoadFriends(data)
{
var viewer = data.get('viewer').getData();
var viewerFriends = data.get('viewerFriends').getData();
var html = new Array();
html.push('Friends of ' + viewer.getDisplayName());
html.push('<ul>');
viewerFriends.each(function(person)
{
if (person.getId())
{
html.push('<li>' + person.getDisplayName() + quot;</li>quot;);
}
});
html.push('</ul>');
document.getElementById('friends').innerHTML = html.join('');
}

8. Using App Data
Saving App Data
function saveScore(score)
{
var req = opensocial.newDataRequest();
req.add(req.newUpdatePersonAppDataRequest(quot;VIEWERquot;, 'score', score));
req.send(onSaveScore);
}
function onSaveScore(data)
{
if(!data.hadError())
{
alert(quot;Score saved!quot;);
}
}

9. Using App Data
Retrieving App Data
function getScore()
{
var req = opensocial.newDataRequest();
var viewer = opensocial.newIdSpec({ quot;userIdquot; : quot;VIEWERquot; });
req.add(req.newFetchPersonRequest(quot;VIEWERquot;), 'viewer');
req.add(req.newFetchPersonAppDataRequest(viewer, 'score'), 'data');
req.send(onGetScore);
}
function onGetScore(data)
{
var viewer = data.get('viewer').getData();
var data = data.get('data').getData();
document.getElementById('score').innerHTML = quot;Your current score is quot; +
data[viewer.getId()]['score'];
}

10. Creating activity
Creating activity
function createActivity(score)
{
var activityParams = {};
activityParams[opensocial.Activity.Field.TITLE] = quot;got a new highscore!quot;;
activityParams[opensocial.Activity.Field.BODY] = quot;The score was quot; + score;
var activity = opensocial.newActivity(activityParams);
opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH,
onCreateActivity);
}
function onCreateActivity(data)
{
if(!data.hadError())
{
alert(quot;Activity created!quot;);
}
}

11. Sending notifications
Sending notifications
function sendNotification(toUserID, fromName)
{
var recipients = [toUserID];
var msg = fromName + quot; has challenged you to a game of pokerquot;;
var params = {};
params[opensocial.Message.Field.TYPE] = opensocial.Message.Type.NOTIFICATION;
var message = opensocial.newMessage(msg, params);
opensocial.requestSendMessage(recipients, message);
}

12. Making use of views
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?>
<Module>
<ModulePrefs title=quot;Viewsquot; author=quot;Pieter De Schepperquot; author_email=quot;pieter@netlog.comquot;>
<Require feature=quot;opensocial-0.8quot;/>
<Require feature=quot;viewsquot;/>
</ModulePrefs>
<Content type=quot;htmlquot; view=quot;canvasquot;>
<![CDATA[
Hello Canvas!<br/>
<a href=quot;#quot; onclick=quot;gadgets.views.requestNavigateTo('profile')quot;>To profile view</a>
]]>
</Content>
<Content type=quot;htmlquot; view=quot;profilequot;>
<![CDATA[
Hello Profile!<br/>
<a href=quot;#quot; onclick=quot;gadgets.views.requestNavigateTo('canvas')quot;>To canvas view</a>
]]>
</Content>
</Module>

13. Other features
• Content requests
• requestShareApp
• Dynamic height
• Netlog extensions

14. Usefull links
• Netlog OpenSocial
http://en.netlog.com/go/developer/opensocial
• Netlog Sandbox
http://en.netlog.com/go/developer/opensocial/sandbox
• OpenSocial reference
http://code.google.com/apis/opensocial/docs/index.html
• Gadget reference
http://code.google.com/apis/gadgets/devguide_landing.html
• OpenSocial Tutorial
http://wiki.opensocial.org/index.php?title=OpenSocial_Tutorial