Creating a Google Gadget for your Library

Creating a Google Gadget is fairly simple once you have a basic understanding of how XML files work. If you do not understand XML, you may want to check out a few online tutorials on the subject before continuing.

This tutorial will hopefully provide a step-by-step instruction that will help you create a simple Google Gadget that allows the searching of your library catalogue.

googleGadget
(the finished product)

First: the XML file structure
A Google Gadgets structure is fairly simple as it includes only a few tags.

<?xml version… ?>
<Module>
                <ModulePrefs … />
                <Content … >
                                <![CDATA[ …. ]]>
                </Content>
</Module>

Any data that you want to appear on the screen will be located inside the CDATA tag and metadata about the gadget will go into the ModulePrefs tag as attributes.

ModulePrefs tag
Metadata is ‘data about data’ which helps organize and categorize the content for the user. The ModulePrefs tag allows us to set preferences for our Gadget.
Listed below are some of the attributes we can set. Note: We do not have to set them, but should set a few of them for the users’ sake:

title: the title of your gadget
title_url: when a user clicks on the title, where do you want them to go
thumbnail: usually a logo for your library, or some other form of graphic. 75x75 Dimensions
screenshot: an example of what your gadget would look like upon installing it
description: A short description of your gadget
height: the amount of vertical space that Google should provide for your gadget
author: name of person who wrote the gadget
author_email: exactly that…
author_location: could be anything really, ideally a city, province/state or country
author_link: link to the author, or their website
author_aboutme: a brief bio for the author

Content Tag
The content tag helps Google decide how to display the content it will receive in the CDATA tag. This will usually be of type ‘html’.

CDATA
Data located within a CDATA section is skipped by the XML parser, which means that by specifying the content type as HTML the information within the CDATA tag will be parsed as html. Had we not have specified the content type as HTML, the data within the section would appear not be parsed, and either appear as text, or not appear at all.

In our example, we first specify some CSS styles, and then create a div which contains a form that performs the search on our catalogue. Easy as that!

Code

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Ryerson University Library Catalogue"
title_url="http://www.ryerson.ca/library/"
thumbnail="http://www.ryerson.ca/library/images/RULibLogo.jpg"
screenshot=""
description="Search the Ryerson University Library Catalogue from your Google homepage"
height="160"
author="Graham McCarthy"
author_email="gmccarthyATryersonDOTca"
author_location="Toronto, ON Canada"
author_link="http://www.grahammccarthy.com"
author_photo="http://www.grahammccarthy.com/profile_pic.jpg"
author_aboutme="Multimedia Program for Ryerson University" />
<Content type="html">
<![CDATA[

<style>

#main_win{
background-color:#d2e374;
border-top: 1px double #093a7f;
border-left: 1px double #093a7f;
border-right: 1px double #093a7f;
}

#main_win img{
display: block;
}

#inner_win{
padding-left: 20px;
font-size:0.78em;
line-height:22px;
background-color:#FFFFFF;
border-top: 1px double #093a7f;
border-left: 1px double #093a7f;
border-bottom: 1px double #093a7f;
border-right: 1px double #093a7f;
}

.form { font-size: 0.8em;}
</style>

<div id="main_win">
<img src="http://www.ryerson.ca/library/images/front/smallRyeLibLogo_green.gif" />
</div>
<div id="inner_win">
<form action="http://innopac.lib.ryerson.ca/search/" method="get" target="_blank">
<b>Find Books, ebooks, DVDs, theses,...</b> <br />
Search <select name="searchtype" class="form">
<option value="X" selected="selected">Keywords</option>
<option value="t">Title</option>
<option value="a">Author</option>
<option value="d">Subject</option>
<option value="s">Journal Title</option>
<option value="r">Course</option>
<option value="p">Prof/TA</option>
</select> for <br />
<input size="30" name="searcharg" class="form">
<input value="D" name="SORT" type="hidden">
<input value="Go" type="submit" class="form">
</form>
</div>

]]>
</Content>
</Module>

Convert for your Library usage
To use this code in your library, put in your own parameters into the bolded sections shown above and then register your xml file with the iGoogle directory.

Note: The example above was created for an Innovative Library System. If your library uses a different OPAC (SirsiDynix, Voyager, etc...), you will have to change the form to accept the different parameters required by that system. If you need any help with this, please email me.

Good luck!

Links:

Ryerson Google Gadget Code

Graham McCarthy, January 15 2007