Background Google allows users to personalise their home page by selecting modules to display alongside the Google search bar. Modules are mostly RSS readers giving access to snipets of news, sport, weather and your email inbox. Modules may also access alternative information feeds, such as web APIs to display available information such as Flickr photos and stock prices. You can pick up specially written modules through the Google directory, enter the name of an RSS feed you wish to subscribe to or write your own module to present information the way you want it.

Fully developed modules can be added by slecting them from the Google directory. Before the BBC Web API example module is available through Google, please follow these instructions:

1. Go to Google and sign-in or register to create an account
2. Click on 'Add Content' at the top left of the screen
3. Under 'Create a Section' enter developer.xml and click 'Go'. This will display the 'My Modules' module
4. In 'My Modules' enter http://www0.rdthdo.bbc.co.uk/services/api/examples/google/whats_on.xml in the 'Add a module' box and click 'Add'
5. In 'My Modules' ensure the 'Cached' option for whats_on.xml is unchecked this will ensure you are using the latest version of the module

Modules are very similar to Widgets in that they are defined in an XML file which also contains JavaScript for interaction and processing. The main difference is the JavaScript classes available to you. To load remote XML data into a module you must use the NXSL API. The method is very similar to that used in the AJAX example.

Create a location to display the data

First you must create a div element in which to display the data you are loading. This element must be of a certain type for use with the NXSL API: handle the response or do so within the function call:

<div id="content__MODULE_ID__"></div>

Retrieving the data Call the _IG_FetchContent method to retrieve the data from the remote source. You can create another function to handle the response or do so within the function call:

_IG_FetchContent( 'remote_data_source', function ( responseText ) {

  // handle response here

} );

Process the response

To handle the response from the remote source and format it for display, use the nxslProcess() method:

// parse XML
var xml = xmlParse( responseText );
          
// format output
var nxsl = xmlParse( '<h3 source="programme" content="@title"></h3>' );
          
// process
nxslProcess( xml, nxsl );

Display the response

Send the formatted response to display using dynamic HTML:

_gel('content__MODULE_ID__').innerHTML = xmlText( nxsl )

For a full guide and how to add your own module to your Google homepage, the Google Developer Guide