Search this site
Google Gadgets‎ > ‎

Build your own Gadget for Google Sites

posted Jan 11, 2009 8:58 PM by Bruno Braga   [ updated Jan 11, 2009 10:20 PM ]
If you want to directly contact me, feel free to email anytime to bruno.braga@gmail.com, or chat:  Chat with me

Here are some guidelines for writing, editing, testing and deploying Google Gadgets for Google Sites.

Getting Started


Here we will cover the starting points for using gadgets on your site.

The editing tool


Although the code is pure HTML (with JavaScript, etc) embedded in XML, which can be edited by

Contents

  1. 1 Getting Started
    1. 1.1 The editing tool
    2. 1.2 Writing the XML
      1. 1.2.1 Module >  ModulePrefs item
    3. 1.3 Writing the HTML
  2. 2 Testing and Deploying
  3. 3 Adding the gadget to your page
    1. 3.1 Add new gadget
    2. 3.2 Configure Gadget
  4. 4 Additional Info
using any text editor available (from Notepad to Word), Google offers a tool for you to check your code. This is very useful because:

  • testing:
    • the preview simulates your gadget and at the same time it serves as a check tool to make sure everything is ok.
  • deploying:
    • the tool handles gadgets under your Google Account, by saving and publishing them to you on a public environment (actually, it will go to the gmodules.com domain)

If you think this is not enough reason, think again. The first time you upload anything to be used as gadget (even if you leave the XML on your own web hosting), Google will cache your gadget for some time (around 2 hours, if I am not mistaken), so if you plan to test, and then upload the newer version again, note that it will take that long for the newer version to be replaced. So, the tool can save you this trouble.


Some notes to consider though:
  • If you plan to create Gadgets that can be used by all, it is a good practice to leave, as much as possible, the settings customizable under the Gadget Setting Form.
  • To do so, there is a catch with the tool above, it will not run properly for required fields that are empty. The workaround is to simply add the "default_value" property into the required field (called UserPrefs inside the Gadget), that will make the Preview option of the tool to work fine.

Writing the XML


Even if the Gadget will focus on the HTML rendering (read also the info below), writing the XML is as important as the code itself, since that is what defines all properties and information pertinent to your Gadget. With proper info, you help other people to use your gadget as well.

Some of the attributes to consider:

Module >  ModulePrefs item


  •     title=""
    • This is how your gadget will be presented to the public. So the title is very important. Try to be succinct but in a way that the title describes exactly what your gadget does.
  •     title_url=""
    • The URL that specifies a detailed information repository of your gadget. You should always prepare a public page to leave guidelines (or even a possible ChangeLog page), for interacting with the end-user.
  •     width=""
    • The default width of your gadget
    • Note: In Google Sites, by default this setting can be changed by the end-user, always!
  •     height=""
    • The default height of your gadget
    • Note: In Google Sites, by default this setting can be changed by the end-user, always!
  •     author=""
    • Your name, or nickname.
  •     screenshot = ""
    • The URL of the screenshot of your gadget (the big version that is displayed in the pages under edit mode, in Google Sites)
  •     thumbnail = ""
    • The URL of the small screenshot of your gadget (the small version that is displayed in the gadget search panel under edit mode, in Google Sites). Note that if the small version is not readable enough, be creative to attract attention of the end-users.
  •     description=""
    • One of the most important parts, which explains in details what is your gadget, its purposes, and what it does.
  •     author_email=""
    • To be reachable by your end-users and/or Google seems like a good idea.

For a complete guide of the valid ModulePrefs attributes, see the Google reference:
http://code.google.com/apis/gadgets/docs/reference.html#Moduleprefs_Ref


Writing the HTML


No secrets here, actually. Just the HTML code (including iframes or javascript, for instance) that you can not directly input to your page, add it in the Content property:

...
<Content type="html">
<![CDATA[
<div id="content_div"><b>Hello World!</b></div>
]]>
</Content>
...


Of course, there are more complexity involved, in order to enable the customizable data, but the best for your to do here is to go directly to Google's documentation and read it carefully until you get what you want. You can also see some real examples and base on them to make your own (here are some I designed myself):

Google's documentation: http://code.google.com/apis/gadgets/docs/legacy/gs.html
Note: The version compatible with Google Sites is the Legacy version.


Testing and Deploying


You may use the tool above for that, but for some strange reason, the embedded version of the Google Gadget Editor does not work in Google Sites, the following message is displayed:



The workaround for this is to use your iGoogle page, and simply add this gadget there. It will work fine:


Or, Google also offers a page where you can do that: http://code.google.com/apis/gadgets/docs/legacy/gs.html#GGE

Adding the gadget to your page


Follow the steps so that you can apply them into your Google Sites pages, if applicable:

Add new gadget

You may find this option at: (Page in Edit mode) Insert > More...


You will have to add it manually, clicking at  "Add by URL", as shown below:



Then place the URL of your gadget (it is the URL of the XML file uploaded in your iGoogle gadget). To get it, simply right-click the file title on the top right of the gadget panel, and copy the link URL. 



Configure Gadget


Based on the customizations you added to your gadget, they will be displayed here (Width and Height are default settings you can not disabled):




Additional Info



For general information on writing Google Gadgets, you may want to check this post as well:

    http://www.seoish.com/how-to-make-google-gadgets-intro/

Attachments (2)

  • gadgets_editor_hosting_error.JPG - on Jan 11, 2009 9:59 PM by Bruno Braga (version 1)
    20k View Download
  • gadgets_editor_igoogle.JPG - on Jan 11, 2009 10:01 PM by Bruno Braga (version 1)
    23k View Download

 BRAGA, Bruno

 


Brazilian currently based in Japan, working on Information Technology.