Creating a Netvibes Gadget for your Library

Creating a Netvibes Gadget is much easier than creating a Google Gadget because you do not have to worry about forming XML tags and putting data into the CDATA section.

Instead, you create a webpage with whatever content you want and include an xml namespace which helps interpret the page the way Netvibes wants.

Netvibes Graphic

The Code Breakdown:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://www.netvibes.com/ns/" >

These first set of lines basically depict how the page is interpreted. [As an XML file, using strict validation procedures]

<HEAD>
       <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />
       <META HTTP-EQUIV="Expires" CONTENT="" />
       <META name="author" CONTENT="Graham McCarthy" />
       <META name="website" CONTENT="http://www.grahammccarthy.com" />
       <META name="description" CONTENT="Search the Ryerson University Library Catalogue" />
       <META name="version" CONTENT="1.0" />
       <META name="keywords" CONTENT="ryerson, university, library, catalogue, search" />
      <META name="screenshot" CONTENT="http://www.ryerson.ca/library/library20/netvibes/widget_280.gif" />
       <META name="thumbnail" CONTENT="http://www.ryerson.ca/library/library20/netvibes/nv_logo.jpg" />
       <META name="apiVersion " CONTENT="1.0" />
       <META name="debugMode " CONTENT="false" />
       <META name="autoRefresh " CONTENT="20" />
       <LINK REL="stylesheet" TYPE="text/css" HREF="http://www.netvibes.com/themes/uwa/style.css" />
       <SCRIPT TYPE="text/javascript" SRC="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></SCRIPT>
       <LINK REL="icon" TYPE="image/png" HREF="http://www.ryerson.ca/library/library20/netvibes/icon.ico" />

The next few lines include the metadata that netvibes uses to describe your widget. This metadata is described in the Meta tagged attributes with specific name parameters. Below the meta tags are links to a stylesheet and javascript file which help to format the widget to have the same functionality as the other widgets on netvibes. The last link tag contains a link to the icon that will be associated with your widget, this icon is located at the top left of your widget. The parameters in bold should be modified for your library.

                <TITLE>Ryerson University Library Catalogue</TITLE>
                <STYLE TYPE="text/css">
                                #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: 1.0em;}
                </STYLE>
</HEAD>

The rest of the head tag contains the title of the widget and the style parameters to format the widget content in any way you wish.

<BODY>
<P>
<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>
</p>
</BODY>
</HTML>

The body of the file contains the content of the widget. In this example, a banner graphic for our library and then a form to let the users search the catalogue.
Once completed, upload your widget to the Netvibes Widget Directory so it can be web searchable.

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!

Creating a Netvibes Gadget for your Library

Links: