19 October 2006

Google gadget on your webpage

Google gadgets can now be placed on your own web pages, taking the wind out the sails of Widgetbox etc. Previously, Google gadgets could only be places on your personalised Google home page, a Google pages site or the Google Desktop Sidebar.

For a gadget that appears in the Google-Gadgets-for-your-Webpage directory, such as my Space Browse virtual tour viewer, click on the "Add to your webpage" button. You are then taken to a page where you can choose various display and gadget settings. It is often important to choose a suitable display width and height. For Space Browse, choose 300x260 pixels.

Then click "Get the Code" to show a textbox containing the HTML to copy and paste into your web page. For the Space Browse gadget, this looks like this, with all your settings encoded as parameters:
<script src="http://gmodules.com/ig/ifr?url=http://www.spacebrowse.com/gadget/SpaceBrowse.xml&up_SiteNo=&up_ShowMode=Random&up_UserName=&up_Search=&synd=open&w=300&h=260&title=Space+Browse+virtual+tour&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>

You then simply have to cut and paste this HTML code onto your web page. For some sites such as on a blogsite Blogger template, you will have to replace the & characters with &amp; as follows:
<script src='http://gmodules.com/ig/ifr?url=http://www.spacebrowse.com/gadget/SpaceBrowse.xml&amp;up_SiteNo=&amp;up_ShowMode=Random&amp;up_UserName=&amp;up_Search=&amp;synd=open&amp;w=300&amp;h=260&amp;title=Space+Browse+virtual+tour&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js'></script>
Note that Blogger amends the end of the script tag, which is OK.

You can see an example of the Space Browse Google gadget running at the bottom of this web page.