OpenSocial and the Yahoo! Application Platform

What does it take to develop an <a href=''>OpenSocial</a> application on <a href=''>Yahoo! Application Platform (YAP)</a>? YAP supports a lot of the OpenSocial standard JavaScript functions listed in <a href=''>YAP OpenSocial documentation</a>.

This example demonstrates the development process of a simple OpenSocial application that would allow the user to poke and send messages to their friends. The poke will be broadcasted into the <a href=''>Activity stream</a>, and the message will be sent to the specified user’s friends.

1. Create an <a href=''>Open Application</a> on the Yahoo! Developer Network (YDN):

<img src='! Developer Network/blog/picture_1.jpg' alt="" width="500" height="408"/>

2. Download the Gadget XML, and edit the metadata information about the application. In this example, we will be developing an application called <a href=''>iPoke</a>. (Download <a href='http://www.Yahoo! Developer'>iPoke Gadget XML</a>).

3. We will go through the Gadget XML, but for now, let’s see what does this OpenSocial application looks like. So Upload iPoke Gadget XML to your web server and Import the Gadget XML to the project that we just created from YDN. Specify the URL with the absolute path to the Gadget XML in your web server.

<img src='! Developer Network/blog/picture_2.jpg' alt="" width="500" height="370"/>

4. You should see that the title of the project on the project dashboard changed accordingly to the title that is defined in the Gadget XML:

<pre><code><ModulePrefs title="iPoke"

description="Poke your friends!"



It will look something like this:

<img src='! Developer Network/blog/picture_3.jpg' alt="" width="550" height="359"/>

5. Check out the application:

<img src='! Developer Network/blog/picture_6.jpg' alt="" width="500" height="309"/>

6. Now, let’s dive into the Gadget XML. The first section of the Gadget XML is the ModulePrefs:

<pre><code><Module xmlns:yap="">

<ModulePrefs title="iPoke"

description="Poke your friends!"



<Icon></Icon> <!-- Favicon URL, 16x16, Will be converted to .gif for use on homepage -->

<Locale lang="en" country="us"/> <!-- Supported languages -->

<yap:Extension name="yap.gadgets.ShortDescription">Poke your friends!</yap:Extension> <!-- Shorter description. Max: 128 chars -->

<yap:Extension name="yap.gadgets.ApplicationIconUrl">http://www.Yahoo! Developer</yap:Extension> <!-- Application Icon, 64x64 -->

<yap:Extension name="yap.gadgets.YahooComIconUrl">http://www.Yahoo! Developer</yap:Extension> <!-- Icon to be displayed at, 20x20, .gif

DEPRECATED: This extension is no longer used

by -->

<yap:Extension name="yap.gadgets.ScreenshotUrl">http://www.Yahoo! Developer</yap:Extension> <!-- -Screenshot preview image, 300x250 -->

<yap:Extension name="yap.gadgets.CreatorImageUrl">http://www.Yahoo! Developer</yap:Extension> <!-- Your company logo, 256x256 -->

<yap:Extension name="yap.gadgets.CreatorWebsiteUrl"></yap:Extension> <!-- Your website -->

<yap:Extension name="yap.gadgets.TouUrl"></yap:Extension> <!-- Your terms of use -->

<yap:Extension name="yap.gadgets.PrivacyUrl"></yap:Extension> <!-- Your privacy policy -->

<yap:Extension name="yap.gadgets.Tags">open,social,status,updates,poke</yap:Extension> <!-- Tags, comma separated -->

<!-- OpenSocial -->

<Require feature="opensocial-0.9" />


Gadget XML Configuration File is explained in the greater detail in the <a href=''>YDN Gadget XML documentation</a>. Here, we’re particularly interested with the highlighted OpenSocial feature that we add into the ModulePrefs. In this Gadget XML, we particularly add <a href=''>OpenSocial 0.9</a> as a feature for our YAP application. (YAP also supports <a href=''>OpenSocial 0.8</a>.)

7. Now, let’s look at the second part of the Gadget XML. As you notice, there are two views defined in this Gadget XML: <a href=''>Small View</a>, and <a href=''>Full View</a>:

<pre><code> <Content type="html" view="YahooSmallView">

<h3>I want the full view!</h3>


<!-- The content of this CDATA will render if no other content sections are applicable. -->

<Content type="html" view="YahooFullView">





More detailed description of the views is described in the greater detail in <a href=''>YDN Anatomy of YAP application documentation</a>. In this example, we are particularly interested with the <a href=''>Full View</a>. This is where the core functionalities of our application are located. In this Gadget XML, there are three parts that defines the application: JavaScript, Stylesheet, and HTML:

<pre><code> <script type="text/javascript">

// JavaScript


<style type="text/css">

/* Stylesheet */


<div id="container">

<!--HTML -->


The HTML section will serve as the container of the application, with static buttons and headers. The JavaScript section is the core logic behind our application. If you’re familiar with OpenSocial, the functions in the JavaScript of our example should be fairly straightforward. YAP supported <a href=''>OpenSocial standard features</a>. When writing JavaScript, it is important to understand <a href=''>Caja-ready JavaScript standard practice</a>.

If this is your first time developing an OpenSocial application, it is highly recommended to read OpenSocial <a href=''>Gadget’s Developer Guide</a> and <a href=''>Requesting OpenSocial Data tutorials</a>. Briefly, let us go through the JavaScript section.

<a href=''>registerOnLoadHandler</a> registers a function that will be executed when the gadget is loaded. In our case, we register gameController function:

<pre><code> function gameController() {




requestFriends function constructs the request and our desired parameters, then sends the request to YAP. We are using responseFriends as the callback function of the request:

<pre><code> function requestFriends() {

var idSpec = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIENDS" });

var req = opensocial.newDataRequest();

req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");

req.add(req.newFetchPeopleRequest(idSpec), "viewerFriends");



responseFriends function manipulates the DOM to display the images of the user’s friends, and adds an <a href=''>Event Listener</a> called selectFriend to each of the image. At the end of the function, we also add another Event Listener to the attack button called doAttack. The selectFriend image Event Listener will manipulate the style of the image to show whether they are selected or not, with cardinal red color on border. We also keep track the ID of friend that is currently selected:

<pre><code> function selectFriend() {

if (selectedId !== undefined) {


} = "2px solid #800020";

selectedId =;


The doAttack Event Listener on attack button construct the parameters for sending request to the <a href=''>Activity stream</a> in postActivity function:

<pre><code> function postActivity(title, msg) {

var params = {};

params[opensocial.Activity.Field.TITLE] = title;

params[opensocial.Activity.Field.BODY] = msg;

var activity = opensocial.newActivity(params);

opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.LOW, function() {

document.getElementById("comment").innerHTML = 'Activity created!';



function getSelectedAttack() {

var attacks = document.getElementById("actionTable").elements["actions"];

for (var i = 0; i < attacks.length; ++i) {

if (attacks[i].checked) {

return attacks[i].value;



return "Random Punch";


function doAttack() {

var title = "poked " + document.getElementById(selectedId).getAttribute("alt") + " with " + getSelectedAttack();

postActivity(title, friendshipQuotes[Math.floor(Math.random()*5)]);


Activity is posted to <a href=''>Yahoo! Pulse</a> and <a href=''>across the Yahoo! Network</a>:

<img src='! Developer Network/blog/yahoo_network.png' alt="Yahoo! Network Pulse" width="423" height="72"/>

getSelectedAttack finds the attack type that is currently selected by the user.

Sending messages to user’s friends is handled by YML on share button (see <a href=''>YML:Message</a>):

<pre><code> <yml:message view="YahooFullView" insert="comment">

<div id="YMLHidden">

<input name="to" type="hidden" id="sendTo">

<input type="hidden" name="subject" value="Check out the iPoke!">

<textarea name="body">This is an awesome app, you should definitely check it out!</textarea>

<input type="hidden" name="image" value="http://www.Yahoo! Developer">

<input type! Developer Network/wp-admin/edit.php="hidden" name="link_href" value="">

<input type="hidden" name="link_label" value="Check out iPoke">


<input type="submit" name="submit" value="Share">


When the Share button is triggered, floating div will be displayed with the necessary form fields for the user to send messages to their friends. It will look like this:

<img src='! Developer Network/blog/picture_4.jpg' alt="" width="500" height="294"/>

<img src='! Developer Network/blog/picture_5.jpg' alt="" width="500" height="290"/>

<em>This post was written by Grady Laksmono, Yahoo! Software Engineering intern.</em>