English | Site Directory

Publishing Your Gadget

This document describes the different options for publishing your gadget. If you use the Google Gadgets Editor (GGE) to create and host your gadgets, it makes publishing your gadgets much easier.

Contents

  1. Where Can I Put My Gadget?
  2. Preparing for Publication
    1. Testing Height and Width
    2. Improving Gadget Performance
  3. Publishing to the iGoogle Content Directory
    1. Managing Submitted Gadgets

Where Can I Put My Gadget?

You can put your gadgets in any of the following places:

  • On OpenSocial containers that support gadgets, such as orkut and the iGoogle sandbox.
  • The Google Content Directory (legacy gadgets only). Submitting your gadget to the content directory makes it available to a wider audience.

Not every gadget is suited to every environment. See the documentation for your container for details about what features are supported in that environment.

Preparing for Publication

Before publishing your gadget, you should test it, bearing in mind the requirements and limitations of the target environment in which the gadget will run.

You should do the following tests for all gadgets:

  • Try all combinations of UserPref values.
  • Run it in different sized screens, from 800x600 to as wide as you can. Link to the Firefox web developer extension, which makes it easy to resize Firefox to a specific size.
  • Test your gadget in different sizes, as described in Testing Width and Height.
  • Test your gadget in every environment in which it might run.
  • Test your gadget on the following browsers: IE 7, IE 6, Firefox 2.x, Firefox 1.5.x, IE 7, IE 6, Opera 9.x, and Safari 2.x.
  • Try different font sizes:
    • To change your font size in Firefox, choose Tools > Options > Content. Click Advanced in the "Fonts & Colors" area. Change the font settings, and uncheck "Allow pages to choose their own fonts, instead of my selections above."
    • To change your font size in Internet Explorer, choose Tools > Internet Options > General. Use the Fonts and Accessibility dialogs to change your font settings.

If you are using makeRequest(), test what happens if the data source is down or returns an error. You can simulate this by changing the URL temporarily to another URL.

Testing Width and Height

How a gadget is sized depends to a large extent on where it runs. See the documentation for your container for details.

In designing and testing your gadgets, be prepared for arbitrary widths from 200 pixels to as wide as 600 pixels. For certain gadgets, the width should be even larger. As a general rule, design the gadget to display properly if it's given extra space. For example, maps gadgets should fill their areas, picture gadgets should center themselves in the frame, and text gadgets should float their text to the top (for example, click-for-more-details links that are typically at the bottom should stay close to the content rather than floating to the bottom of the gadget window).

Improving Gadget Performance

If you write a gadget that you expect to experience heavy traffic, there are steps you can take to ensure availability and good performance. If your gadget gets more than 200,000 views per day, or approximately 1-2 requests per second, you should consider following the tips in this section. Even a 50 KB gadget that receives 200,000 requests per day consumes around 300 GB per month in bandwidth.

There are different reasons a gadget might attract a lot of users. It might simply become popular in the content directory. Or, if the gadget is used in a special promotion or advertisement, that might cause it to experience heavy traffic.

Your goal for a high traffic gadget should be to get it to render in 0.25 seconds (250 milliseconds) or less. Use Firebug (Firefox only) to measure this. Improving the responsiveness of your gadget is a sure way to make a positive impact on the user's experience. For tips on optimizing gadget performance, see Optimizing for Heavy Traffic. For management tips, see Managing Heavy Traffic. The general testing guidelines are also especially important for highly popular gadgets.

Optimizing for Heavy Traffic

If you think that your gadget might experience heavy traffic, follow these guidelines:

  • Avoid using external JavaScript or CSS files (files referenced by the "src" or "href" attributes in your HTML tags) because this incurs the cost of another network connection. Instead, put your JavaScript and CSS code inline in the gadget spec.
  • Use a type=html gadget. Gadgets that are type=url generally render more slowly than type=html gadgets because of the poor performance and poor cache support of other hosting servers.
  • The makeRequest() method caches your content for approximately 1-2 hours by default. You can use the refreshInterval parameter with these functions to refresh the cache more often. However, caching helps gadget performance by minimizing the number of requests sent to remote servers hosting content. Do not request greater freshness than needed from the cache, or you will reduce the percentage of requests that are served from the cache. See Refreshing the Cache for more discussion of this topic.
  • Use Firebug (Firefox only) to fine-tune your gadget performance. For other browsers you can use Fiddler.
  • Avoid using Google Analytics if possible, because it incurs an additional server connection. Instead of Analytics, use http://www.google.com/ig/directory?url=<gadget-url> to see the weekly pageviews for your gadget.
  • Specify height and width for all <img> tags in your gadget's HTML. This makes your gadget render faster. If you're using gadgets.io.getProxyUrl() and inserting the image element directly into the DOM, you don't need to set the width and height properties.
  • Instead of linking directly to your hosting provider, use the gadgets.io.getProxyUrl() functions to cache all embedded images, and embedCachedFlash() to cache Flash content. Below is an example of a gadget that pre-loads images using gadgets.io.getProxyUrl():

Here is a sample gadget that illustrates how to use gadgets.io.getProxyUrl(): 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Zombies!" height="350" />
  <Content type="html">
  <![CDATA[
  <div id="zombiecontainer"
    style="text-align:center;">
  </div>
  <script type="text/javascript">
  var counter = 0;

  // Preload the images using gadgets.io.getProxyUrl()
  function load(imageList) {
    var ret = [];
    for (var i = 0, j = imageList.length; i < j; ++i) {
      var img = document.createElement("img");
      img.src = gadgets.io.getProxyUrl(imageList[i]);
      ret.push(img);
    }
    return ret;
  }

  var files = [
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-0.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-1.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-2.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-3.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-4.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-5.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-6.jpg"
  ];

  var images = load(files);
  browse();

  // Browse through photos sequentially. When you get to the end of the array, start over.
  function browse(){
    if (counter == images.length)
    {
      counter = 0;
    }
    document.getElementById("zombiecontainer").innerHTML = "";
    document.getElementById("zombiecontainer").appendChild(images[counter]);
    counter++;
  }

  </script>
  <br />
  <div style="text-align: center;">
    <input type=submit value="Next ->" onClick="browse()">
  </div>
  ]]>
  </Content>
</Module>

Managing High Traffic

These guidelines can help you manage a high volume gadget:

  • If you are receiving large quantities of email from your gadget users, use Gmail and set up filters to manage the volume. We recommend using an address of the form <username>.feedback+<gadgetname>@gmail.com in your gadget spec. This helps you to filter the messages you receive from gadget users. Gmail drops everything after the plus sign (+), so this email address maps to <username>.feedback@gmail.com. Note that Gmail has a high quality spam filter.
  • If you submit your gadget to the iGoogle content directory, check your gadget description page periodically for user comments. Users frequently leave valuable feedback, feature requests, and reports of bugs they've run into when using your gadget. It's good to stay abreast of their comments and engage with them.

Publishing to the iGoogle Content Directory

Once you have designed, implemented, and tested your gadget, you may decide to submit it to Google to be published in the iGoogle content directory. Currently this applies to legacy gadgets only. This section lists the general steps you should follow in preparing any gadget to be published.

Step 1: Set your gadget preferences.

The Reference lists all of the <ModulePrefs> attributes that you can use to provide "meta" information about your gadget. Here is the information you should include in your gadget spec:

  • title
  • description. This attribute is important to let people know what your gadget does, particularly if it is not obvious.
  • author
  • author_email. This is so that Google and users of your gadget can contact you. You can use any email system, but you should not use a personal email address because of spam. One approach is to use an email address of the form helensmith.feedback+coolgadget@gmail.com in your gadget spec. Gmail drops everything after the plus sign (+), so this email address maps to helensmith.feedback@gmail.com. You can create a Gmail account here.
  • screenshot. This is a string that gives the URL for a gadget screenshot. This must be a well-formed URL, not a relative URL. This image must be on a public web site that is not blocked by robots.txt. PNG is the preferred format, though GIF and JPG are also acceptable. Gadget screenshots should be 280 pixels wide. The height of the screenshot should be the "natural" height of the gadget when it's in use. This helps users understand how much space a gadget will consume on their screen before they add it to their page. The screenshot should not have any whitespace above the gadget's blue header bar. Screenshots should show your full gadget, including its title bar, but nothing else. Alternatively, you can screenshot the gadget with the edit window open. Screenshots should not be resized or cropped. For quality and consistency, Google may take its own screenshots of a given gadget.
  • thumbnail. Thumbnails are used in the content directory to give users a preview of a gadget. They should capture the main functionality of your gadget without showing it in its entirety. The value for this attribute is a string that gives the URL for a gadget thumbnail. This must be a well-formed URL, not a relative URL. This image must be on a public web site that is not blocked by robots.txt. PNG is the preferred format, though GIF and JPG are also acceptable. Thumbnails should be 120x60 pixels. They should not include title bars.
  • author_location
  • author_affiliation
  • title_url. You use this attribute to link your gadget title to an external HTML page. For example, if your gadget is a front end for a service, you can link the gadget title to that service's website.
  • directory_title (required if title contains user preference substitution variables).

If you want to be listed on the authors page, you can include these additional fields:

  • author_photo. URL to a photo (70x100 PNG format preferred, but JPG/GIF are also supported).
  • author_aboutme. A statement about yourself (try to keep to ~500 characters).
  • author_link. A link to your website, blog, etc.
  • author_quote. A quote you'd like to include (try to keep to ~300 characters).

You can find more information here, and an example here.

Step 2: Make sure that you have written a robust, secure gadget.

Make sure you have coded your gadget in a way that minimizes any security risks.

Step 3: Add any relevant locale information.

You can use <Locale> tags under <ModulePrefs> to specify the locales supported by your gadget. For more information, see ModulePrefs/Locale in the XML reference.

Step 4: Make it easy for people to add your gadget.

To promote your gadget, consider putting an "Add to Google" button on it.

Step 5: Submit your gadget to Google.

You can submit your gadget to Google here. You can also submit your gadget to the content directory using the GGE File > Publish command. See the FAQ for an explanation of how to find your gadget in the directory, and what determines its placement.

Managing Submitted Gadgets

If you have submitted multiple versions of a gadget at different URLs and you want to designate one version as the official one, you can use the igoogle-legacy issue tracker to request the change.

Back to top