Tutorial

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.

			
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Hello OpenSocial Gadgets!">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      Hello, OpenSocial Gadgets!
    ]]>
  </Content>
</Module>
		

A Gadget has always the root tag <Module>. This root tag contains a <ModulePrefs> and a <Content> 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 .

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"

			
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Hello OpenSocial Gadgets!">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      Hello, OpenSocial Gadgets!
    ]]>
  </Content>
</Module>
		

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.

Please help me to support this article:

Before posting questions, please see the vogella FAQ. If you have questions or find an error in this article please use the www.vogella.de Google Group. I have created a short list how to create good questions which might also help you.

http://wiki.eclipse.org/E4 Eclipse E4 - Wiki

http://wiki.eclipse.org/E4/OpenSocialGadgets Eclipse OpenSocial Gadget- Wiki

http://www.opensocial.org/Technical-Resources/opensocial-spec-v09/Gadgets-API-Specification.html OpenSocial Gadget Specification

http://wiki.opensocial.org OpenSocial Gadgets

Google Tutorial for OpenSocial Gadgets

http://code.google.com/p/opensocial-development-environment/ OpenSocial Development Environment - Eclipse Plugin for developing OpenSocial Gadgets

http://incubator.apache.org/shindig/ Apache Shinding - OpenSocial Container

http://code.google.com/p/opensocial-java-client/ Java Client library to access OpenSocial data