iGoogle Gadgets @ Your Library Presenter: Ed Metz Systems Librarian, USACGSC [email_address] 913-758-3027

Intro – What is iGoogle What is iGoogle? Personal information portal and virtual workspace iGoogle offers more than 25000 modules or “gadgets” to choose from.

What is iGoogle?

Personal information portal and virtual workspace

iGoogle offers more than 25000 modules or “gadgets” to choose from.

Intro – What are Gadgets What are these gadget things? A gadget is a mini web application XML document residing on any public webserver At most basic level it is simply your HTML (and/or JavaScript, Flash) content nested inside an XML wrapper. A gadget…. … and it’s underlying XMLdocument

What are these gadget things?

A gadget is a mini web application

XML document residing on any public webserver

At most basic level it is simply your HTML (and/or JavaScript, Flash) content nested inside an XML wrapper.

Intro – Library Gadgets What have some libraries done with gadgets? Hennepin County Library Catalog WorldCat Open Search Washington State Library CARL HIP, CARL DigLib , CARL RSS Feeds BYU Idaho Library Search

What have some libraries done with gadgets?

Hennepin County Library Catalog

WorldCat Open Search

Washington State Library

CARL HIP, CARL DigLib , CARL RSS Feeds

BYU Idaho Library Search

Intro – Library Gadgets

So how do you make one? Step 1 . Do your homework. Some essential reads: Google Gadget API Developer’s Toolkit Getting started Writing your own gadgets Development Fundamentals Creating a user interface Publishing your gadget

Step 1 . Do your homework. Some essential reads:

Google Gadget API Developer’s Toolkit

Getting started

Writing your own gadgets

Development Fundamentals

Creating a user interface

Publishing your gadget

So how do you make one? Step 2 . Login to or create your free Google account Step 3 . Find a gadget that has a similar aim to what you want to do. Step 4 Open it in the Google Gadget Editor (GGE), study the source code and adapt it to your own needs. Step 5 Edit, preview, save, test and publish your gadget in the Google Gadget Editor (GGE)

Step 2 . Login to or create your free Google account

Step 3 . Find a gadget that has a similar aim to what you want to do.

Step 4 Open it in the Google Gadget Editor (GGE), study the source code and adapt it to your own needs.

Step 5 Edit, preview, save, test and publish your gadget in the Google Gadget Editor (GGE)

Google Gadget Editor (GGE) Google Gadget Editor . (GGE) Use it for: Creating, editing, previewing, saving, publishing your gadget. Edit/create your gadget Open any gadget Preview your gadget

Google Gadget Editor . (GGE) Use it for:

Creating, editing, previewing, saving, publishing your gadget.

Getting started Go to the GGE Select File - Open by url - my catalog template http://hosting.gmodules.com/ig/gadgets/file/116444596163220004073/catalog1.xml Next, select File – Save as and give it a new name Begin editing

Go to the GGE

Select File - Open by url - my catalog template

http://hosting.gmodules.com/ig/gadgets/file/116444596163220004073/catalog1.xml

Next, select File – Save as and give it a new name

Begin editing

Getting started – Log-in Log-in to your Google account. If you don’t already have your iGoogle page as your default display click on the iGoogle link here as shown.

Log-in to your Google account.

If you don’t already have your iGoogle page as your default display click on the iGoogle link here as shown.

Getting started Find some source code Now go to the content directory by selecting the Add stuff link

Now go to the content directory by selecting the Add stuff link

Getting started Find some source code Now you can search or browse the Homepage (iGoogle) content directory

Now you can search or browse the Homepage (iGoogle) content directory

Getting started Find some source code select View source

Opening a Gadget in the GGE At the next page copy the url from the browser address bar

At the next page copy the url from the browser address bar

Opening a Gadget in the GGE Now return to the GGE Select File – Open from url

Now return to the GGE

Select File – Open from url

Opening a Gadget in the GGE At next window paste the URL you copied for our XML document

At next window paste the URL you copied for our XML document

Opening a Gadget in the GGE This populates your GGE with the XML source code Before you begin editing, select File –Save as - give the document a new name Note: you MUST be logged into your Google account to take advantage of all the GGE features

This populates your GGE with the XML source code

Before you begin editing, select File –Save as - give the document a new name

Creating your gadget Defining the document <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module>

<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?>

<Module>

Creating your gadget Module Settings <ModulePrefs> <ModulePrefs attribute attribute attribute attribute height=“220” > </ModulePrefs>

<ModulePrefs

attribute

attribute

attribute

attribute

height=“220” >

title : required. Title of the gadget. Displays in the gadget title bar on iGoogle. title_url: make my gadget title a hyperlink to your library or institution directory_title : optional. Don’t really need this here since I don’t have any user preferences. author : required. author_email : required. Creating your gadget Module Settings <ModulePrefs>

title : required.

Title of the gadget. Displays in the gadget title bar on iGoogle.

title_url:

make my gadget title a hyperlink to your library or institution

directory_title : optional.

Don’t really need this here since I don’t have any user preferences.

author : required.

author_email : required.

author_affiliation (suggested) Who’s to blame? Your library or college author_location (suggested) author_link (suggested) description - required. Provide 1-2 sentences that tell something about your gadget. Creating your gadget Module Settings <ModulePrefs>

author_affiliation (suggested)

Who’s to blame? Your library or college

author_location (suggested)

author_link (suggested)

description - required.

Provide 1-2 sentences that tell something about your gadget.

screenshot (suggested) url address of image png, gif, jpeg width = 280 pixels Thumbnail – (required) url address of image 120 x 60 pixels Width – Required in GGE Normally the default is 320. Height – optional Default is 200. Creating your gadget Module Settings <ModulePrefs> Screenshot image Thumbnail image

screenshot (suggested)

url address of image

png, gif, jpeg

width = 280 pixels

Thumbnail – (required)

url address of image

120 x 60 pixels

Width – Required in GGE

Normally the default is 320.

Height – optional

Default is 200.

Creating your gadget Content <Content type=“html”> <Content type=&quot;html&quot;> <![CDATA[ Place your content in this section. Can include HTML, JavaScript, Flash. In the following example I’ve created a simple table <table> containing two rows <tr> with a total of four cells <td>. The html search form, related hyperlinks, some JavaScript and an image are nested inside their respective cells. </td>

<Content type=&quot;html&quot;> <![CDATA[

Place your content in this section. Can include HTML, JavaScript, Flash.

In the following example I’ve created a simple table <table> containing two rows <tr> with a total of four cells <td>. The html search form, related hyperlinks, some JavaScript and an image are nested inside their respective cells. </td>

<table style=&quot;WIDTH: 99%&quot; borderColorDark=&quot;#333333&quot; borderColorLight=&quot;#666666&quot; border=&quot;2&quot; FONT color=&quot;#2B1500&quot;><center><b> Search the CARL Catalog </b></font></center><tbody> Creating your gadget Content : HIP Search Form <table>

<table style=&quot;WIDTH: 99%&quot; borderColorDark=&quot;#333333&quot; borderColorLight=&quot;#666666&quot; border=&quot;2&quot; FONT color=&quot;#2B1500&quot;><center><b> Search the CARL Catalog </b></font></center><tbody>

The HIP Search Form Creating your gadget Content : HIP Search <form> <tr><td> <form id=&quot;catalog_form&quot; action=&quot;http://comarms.ipac.dynixasp.com/ipac20/ipac.jsp?profile=carlcgsc&quot; method=&quot;get&quot; target=&quot;_blank&quot; reloadxsl=&quot; true #focus&quot;> <font color=&quot;#2B1500&quot;><b> for </b></font> <input name=&quot;term&quot;> <font color=&quot;#2B1500&quot;><b> in </b></font> <select name=&quot;index&quot;> <option value=&quot;.GW&quot; selected> Keyword anywhere </option> <option value=&quot;.TW&quot;> Title keyword </option> <option value=&quot;.AW&quot;> Author keyword </option> <option value=&quot;.SK&quot;> Fulltext items </option> </select> <input type=&quot;image&quot; src=&quot;http://cgsc.leavenworth.army.mil/carl/images/b-go-red-full.jpg&quot; value=&quot;Submit Query&quot;> </form></td> Note: Option values come from the word_index table in Horizon HIP url

The HIP Search Form

Library Thing bookcovers widget <td> <script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;http://www.librarything.com/jswidget.php?reporton=metzejr&show=random&header=&num=1&covers=small&text=none&onlycovers=1&tag=alltags&css=1&style=1&version=1&quot;> </script> </td></tr> Creating your gadget <Content> : Adding dynamic content Library Thing Widget

Library Thing bookcovers widget

<td>

<script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;http://www.librarything.com/jswidget.php?reporton=metzejr&show=random&header=&num=1&covers=small&text=none&onlycovers=1&tag=alltags&css=1&style=1&version=1&quot;> </script>

</td></tr>

Other links of interest. <tr><td> <center><a href=&quot;http://comarms.ipac.dynixasp.com/ipac20/ipac.jsp?&amp;profile=carlcgsc&amp;menu=account&quot; target=&quot;_blank&quot;> <font size=&quot;3&quot;> <b> My Account </b></a></center> <center><a href=&quot;http://cgsc.leavenworth.army.mil/carl/new_titles.asp&quot; target=&quot;_blank&quot;> <b> New Titles </b></a></center> <center><a href=&quot;http://cgsc.leavenworth.army.mil/CARL/c_ya.asp&quot; target=&quot;_blank&quot; > <b> New Youth Titles </b></a></center> </font> </td> Creating your gadget <Content> : Adding links

Other links of interest.

<tr><td>

<center><a href=&quot;http://comarms.ipac.dynixasp.com/ipac20/ipac.jsp?&amp;profile=carlcgsc&amp;menu=account&quot; target=&quot;_blank&quot;> <font size=&quot;3&quot;>

<b> My Account </b></a></center>

<center><a href=&quot;http://cgsc.leavenworth.army.mil/carl/new_titles.asp&quot; target=&quot;_blank&quot;>

<b> New Titles </b></a></center>

<center><a href=&quot;http://cgsc.leavenworth.army.mil/CARL/c_ya.asp&quot; target=&quot;_blank&quot; >

<b> New Youth Titles </b></a></center>

</font>

</td>

Add your logo and close the table <td> <center> <img src=&quot;http://pages.google.com/edit/edmetz1/cgsc2.jpg/cgsc2-full.jpg&quot;> </center> </td> </tr> </tbody> </table> Creating your gadget <Content> : Add your branding

Add your logo and close the table

<td>

<center>

<img src=&quot;http://pages.google.com/edit/edmetz1/cgsc2.jpg/cgsc2-full.jpg&quot;>

</center>

</td>

</tr>

</tbody>

</table>

Now we close our Content section </Content> and our XML wrapper </Module> Creating your gadget Let’s wrap it up

Now we close our

Content section </Content> and our XML wrapper </Module>

Testing, testing 1,2,3 Test your gadget in different browsers Firefox, Internet Explorer, (Safari, and Opera). This can be easily done via the GGE . Open a web browser of your choice, Select File – Publish – Add to a web page. Creator page opens and gives you a preview.

Test your gadget in different browsers

Firefox, Internet Explorer, (Safari, and Opera).

This can be easily done via the GGE . Open a web browser of your choice, Select File – Publish – Add to a web page.

Creator page opens and gives you a preview.

Publishing your gadget http://www.google.com/apis/gadgets/publish.html#Submitting iGoogle Content Directory Syndication Example: CARL Blog

http://www.google.com/apis/gadgets/publish.html#Submitting

iGoogle

Content Directory

Syndication Example: CARL Blog

Publishing to the Content Directory On the GGE select File – Publish At the next screen you’ll see this prompt. Click on the Publish to iGoogle Directory link.

On the GGE select File – Publish

At the next screen you’ll see this prompt. Click on the Publish to iGoogle Directory link.

Publish to the Content Directory Make sure you’ve dotted your i’s and crossed your t’s, read the fine print, and then click the Send button.

Syndicate your gadget On the GGE select File – Publish At the next screen you’ll see this prompt. Click on the Add to a webpage link.

On the GGE select File – Publish

At the next screen you’ll see this prompt. Click on the Add to a webpage link.

Syndicate your gadget Customize your gadget Click on the Get Code button

Customize your gadget

Click on the Get Code button

Syndicate your gadget Now simply copy the code generated in the box below and paste it as appropriate into your website.

Now simply copy the code generated in the box below and paste it as appropriate into your website.

Syndicated gadget Here’s how our gadget appears on our library’s blog.

Here’s how our gadget appears on our library’s blog.

Review Do your background reading (Google Gadget Developer Toolkit) Open a gadget in the GGE Edit, Preview, and Test in the GGE Publish to the Content Directory and/or syndicate it for third party website(s). Publicize it (newsletters, brownbags, blog, RSS)

Do your background reading (Google Gadget Developer Toolkit)

Open a gadget in the GGE

Edit, Preview, and Test in the GGE

Publish to the Content Directory and/or syndicate it for third party website(s).

Publicize it (newsletters, brownbags, blog, RSS)

iGoogle Gadgets @ Your Library Questions? Contact Info: Ed Metz Systems Librarian, USACGSC [email_address] 913-758-3027

Questions?