How to write an OpenSocial Gadget, Part 1: Hello World!

[Diego]

An OpenSocial Gadget is simply a small HTML+Javascript application that runs on a site, or "container", that supports the OpenSocial JavaScript API. Any Ning network is such a container.

With Ning's support for OpenSocial, and this guide, you can try your hand at creating OpenSocial Gadgets that can then run with relatively minor changes (or unchanged) on other containers.

API Scope

As of version 0.5, there are three primary areas of functionality in the OpenSocial API:

• People and Friends
• Persistence
• Activities

As long as your Gadget uses only these functions from the API, it should run unchanged across all conformant containers. Additionally, some containers such as Ning may implement some key functions supported by other containers, such as iGoogle or Orkut, to increase compatibility and simplify deployment for application developers.

For detailed information, see the API Reference.

Hello World!

Here is one of the most basic Gadgets you can write:

<?xml version="1.0" encoding="UTF-8" ?><Module><ModulePrefs title="Hello World Example">   <Require feature="opensocial-0.5"/>
 </ModulePrefs>

 <Content type="html">

 <![CDATA[

 <script type="text/javascript">

  function sayHello() {

    document.getElementById('message').innerHTML = 'Hello World!';

  };

  opensocial.registerOnloadHandler(sayHello);

  </script>

  <div id="message"> </div>

  ]]>

  </Content>

</Module>

This example is a basic 'Hello World!' that goes beyond simply outputting text, to use an onLoadHandler call, in the form of opensocial.registerOnloadHandler(sayHello); which will be called as soon as the page loads. When this happens the sayHello function will be called, retrieving the DIV and setting the text to the appropriate value.

A key element in this example is the use of <Require feature="opensocial-0.5"/> as a parameter of the module declaration. This specifies the release of opensocial required by the module. Containers may or may not implement all possible versions of the opensocial API, and when they don't the user will see an error.

Inserting the Gadget into your profile for testing

Testing is easy -- you can simply save your gadget as a file in your network (through SFTP), in a (new) directory opensocial, with the name for example helloworld.xml. Then you can reference it by typing http://networkname.ning.com/opensocial/helloworld.xml into the URL box of your profile page, and presto! Your first opensocial gadget should be up and running.

[Thomas David Baker]

Hi Andre,

You could try sftp-ing simply to "ning.com".

If that doesn't work please visit our Help Centre: http://www.ning.com/help/feedback.html

You can contact someone there who will help you out.

Thanks!

Tom

[Colleen Dick]

I am totally lost. There is a piece missing in this puzzle. I made the xml file and I made the correction as stated by Peter. And I uploaded it to some completely unrelated website that I control as the thread says I can it don't have to be my ning site, RIGHT??? If I enter the URL in browser it shows XML file. what you would expect. We call it http://someotherwebsite.com/opensocial.xml All OK?

Now what?

I have My Page tab. When I go there I have big Gadget box I see edit tab. is that URL box?
There is code for all gadgets I already have in there.

WHAT DO I PUT there for this hello world test? copying the url cause the url to display in the box. But nothing happens. and what is suppose to happen?

[Eoin Gallagher]

Hi,

I have tried this example, my own gagdet xml file and a few others from the directory and the only ones that work are ones that don't use any opensocial functionality.

In firebug I get three errors..
opensocial is not defined
ning.loader has no properties
ning._ has no properties

Any idea whats going on.. are Ning working on something in the background that is breaking these gadgets or am I missing something obvious?.

Thanks.

[JR]

Hello Mike,
Looks like things have changed a bit on the Manage Page for the Network Creator.
It appears that the "Gadgets" feature has been removed.
How would someone be able to add a application.xml file to a text box, so that it will appear on the homepage of the network?
Thanks in advance,
JR

[Ernie H.]

Hi JR,

This thread is really old - this is in regards to OpenSocial 0.5 apps with Gadgets functionality. Since then, we've disabled Gadgets and are now using OpenSocial 0.7 functionality. I'm going to close this thread; if you have any questions, feel free to start a new discussion!

Thanks,
- Ernie