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.
Presentation on how to chat with PDF using ChatGPT code interpreter
OpenSocial CodeLab - Building Social Gadgets for Netlog
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
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);
}