OpenSocial Gadgets

OpenSocial Gadgets are part of the Open Social initiative. OpenSocial Gadgets are web based UI components. A Gadget is defined via a XML file which contains a header with definitions of the Gadget and an embedded content payload. This payload is a combination of HTML and JavaScript which defines the gadgets look and behavior.

A very simple Gadget looks like this.

A Gadget has always the root tag . This root tag contains a and a section. The ModulePrefs contains information which OpenSocial features are required by the module and information about the author. The content section contains the actual HTML and JavaScript.

A Gadget is hosted in a server infrastructure to provide its data. A web page that hosts gadgets is called an OpenSocial.

Most websites which work as a OpenSocial Container uses the Apache Shinding reference implementation.

For example the iGoogle , LinkedIn, MySpace, orkut, XING can host OpenSocial Gadgets. The only exception is Facebook; they have their own standard.

For detailed information you can read the latest released Open Social Specification .

Open Gadgets Gadgets are specified in OpenSocial Gadgets API Specification .

Hello OpenSocial Gadget

The following Open Social Gadgets example is based on this tutorial Google Tutorial for OpenSocial Gadgets

The following requires that you have some webspace to put your OpenSocial Gadget. It is sufficient to be able to host static webpage as we will create a static XML file. Google offers free web hosting via http://sites.google.com/ .

Create in a text editor the following file "welcome_gadget.xml"

Save this file on your webserver. If you want you can use my example (http://www.vogella.de/opensocial/welcome_gadget.xml).

On your iGoogle page press "Add Stuff" and "Add Feed or Gadget". You should now find it in your iGoogle page.

OpenSocial Development Environment for Eclipse

For developing OpenSocial Gadgets in Eclipse you can use the OpenSocial Development Environment which is described here OpenSocial Development Environment Homepage

OpenSocial Gadgets in Eclipse E4

Eclipse E4 allow to integrate OpenSocial Gadgets into views. To use this feature download the latest milestone from Eclipse E4 as described in Eclipse E4 tutorial .

Start Eclipse E4. To open a social gadget in E4 use Ctrl+3 type "Open Gadget" and input for example "http://www.google.com/ig/modules/eyes.xml".

Tip

Eclipse E4 allows to host the XML file also locally. Just use the file:// URL, e.g. /c:/temp/gadgets/gift_part3.xml to open the Gadget in Eclipse.

Tip

You can find the url to a OpenSocial Gadgets via your iGoogle page. Select your Gadget, select "Share this gadget" from the gadget menu, then click "copy and paste a link to this gadget" and copy the URL after "moduleurl".

The result looks like the following.

Thank you

Thank you for practicing with this tutorial.

I maintain this tutorial in my private time.