Design & Dev Tools

Ecommerce Know-How: Create a Google Gadget to Promote a Weekly Feature

An Example Gadget

Creating and publishing promotional web gadgets is a great way to spread the word about the products or services you sell and increase traffic to your website.

Think about a web gadget as a form of social media. Your customers and potential customers can add the gadget to their iGoogle home page, use it on many social networking sites like Orkut and MySpace, or share it with friends online.

In this “eCommerce Know-How,” I show you how to develop a simple “Weekly Feature” gadget based on the gadgets.* application program interface (API) that Google uses.

“Weekly Feature” Gadget

We’ll be using both XML and HTML to create our “Weekly Feature” gadget. But don’t worry. You won’t need to be a web developer or coding guru. In fact, if you have a basic understanding of HTML, you’ll be just fine.

<code>  &lt;?xml version="1.0" encoding="UTF-8" ?&gt;
 &lt;Module&gt;
   &lt;ModulePrefs/&gt;
   &lt;Content type="html"&gt;
      &lt;![CDATA[Hello World.]]&gt;
   &lt;/Content&gt;
 &lt;/Module&gt;
</code>

Start with some very basic XML. The first line of our code declares that our gadget will be written in XML version 1.0. The next line introduces the <Module> element that will serve as the wrapper or framework for our gadget (in fact, gadgets are sometimes called modules because of this element tag). The last line of code closes the <Module> element ( notice the “/” in front of the word “Module”). These three lines are essential.

Module Preferences

The <ModulePrefs> tag specifies gadget characteristics—height in pixels for example—or describes facts about the gadget like the title or the author’s information. To keep things simple, we’ll add four attributes to our <ModulePrefs> tag. But there are several other attributes that you should add if you want Google to incorporate your gadget in to its gadget directory. For now, take a look at the code with just four attributes.

<code>&lt;ModulePrefs title=" Weekly Feature" height="300"
scaling="false" author="Armando Emanuel Roggio, Sr." /&gt;
</code>

These attributes should be pretty intuitive. In the final code, I will include all of <ModulePrefs> attributes you’ll need before submitting the gadget to Google’s directory. These additional attributes include:

  • description. This attribute will let people know what your gadget does.
  • author_email. So that customers or Google can contact you.
  • author_location. Describes where your store is located.
  • screenshot. Is a link to a screenshot of the your gadget. The image should be in the .png format and exactly 280 pixels wide. Google will use it as a preview.
  • thumbnail. Provides a 120×60 pixel .png image representing your gadget.
  • title_url. Links your gadget title to a landing page or your home page.

Gadget Content

The <Content> element has an attribute called “type” that tells the parser (a kind of program that recognizes mark-up languages) what to expect, and includes a sub-element: <![CDATA[Hello World.]]>.

<code>&lt;Content type="html"&gt;
  &lt;![CDATA[Hello World.]]&gt;
&lt;/Content&gt;
</code>

CDATA stands for character data, and in XML, it is used to tell a parser that the enclosed information is not part of the mark-up, but rather should be interpreted as is. In a gadget, the CDATA tag holds the HTML or other content information. Let’s replace, “Hello World” with some basic HTML that will call in a product photograph and a link back to your store.

<code>
    &lt;Content type="html"&gt;
       &lt;![CDATA[
       &lt;div&gt;
           &lt;a  target="_blank"href="http://www.yourstore.com/some-product.html"&gt;
            &lt;img border="0" alt="Photo" src="http://www.yourstore.com/some-product-image.png" title="Product Information"&gt;&lt;/a&gt;
      &lt;/div&gt;
     &lt;div&gt;
            &lt;a  target="_blank" href="http://www.yourstore.com/some-product.html ">Product Name and Price&lt;/a&gt;
        &lt;/div&gt;
         ]]>
     &lt;/Content&gt;

</code>

You might recognize these HTML tags. The <a> is used to create a link. The <img> calls in an image from your website. For your gadget just replace the two instances of “http://www.yourstore.com/some-product.html” with the URL to the landing page you want to target, and substitute ” http://www.yourstore.com/some-product-image.png” with your product photo’s web address.

Add a Bit of Style

You can spice up your gadget by adding style to the HTML. As an example, let’s put a light gray background behind the link and center both the product photograph and the link.

<code>
&lt;Content type="html"&gt;
   &lt;![CDATA[
    &lt;div style="text-align:center; " &gt;
        &lt;a  target="_blank"  href="http://www.yourstore.com/some-product.html"&gt;
        &lt;img border="0" alt="Photo" src="http://www.yourstore.com/some-product-image.png" title="Product Information">&lt;/a&gt;
    &lt;/div&gt;

    &lt;div style="text-align:center;  background-color:#cccccc;"&gt;
        &lt;a  target="_blank" href=" http://www.yourstore.com/some-product.html "&gt;
        Product Name and Price&lt;/a&gt;
    &lt;/div&gt;
     ]]&gt;
 &lt;/Content&gt;
</code>

The Finished Gadget Code

Now your gadget is complete. I have added in the extra <ModulePrefs> attributes you’ll need if you plan to submit the gadget to Google’s directory. And now, your code should look something like the following:

<code>
&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
&lt;Module&gt;
&lt;ModulePrefs title=" Weekly Feature" title_url="YOUR STORE URL" height="300" scaling="false" author="YOUR NAME."  author_email="AN EMAIL ADDRESS" author_location="YOUR LOCATION" description="DESCRIBE THE GADGET NOT THE PRODUCT"  screenshot="SCREENSHOT URL"  thumbnail="THUMBNAIL URL"/&gt;
&lt;Content type="html"&gt;
   &lt;![CDATA[
    &lt;div style="text-align:center; " &gt;
        &lt;a  target="_blank"  href="YOUR URL"&gt;
        &lt;img border="0" alt="Photo" src="YOUR IMAGE URL" title="Product Information"&gt;&lt;/a&gt;
    &lt;/div&gt;

    &lt;div style="text-align:center;  background-color:#cccccc;"&gt;
        &lt;a  target="_blank" YOUR URL "&gt;
        Product Name and Price&lt;/a&gt;
    &lt;/div&gt;
     ]]&gt;
 &lt;/Content&gt;
&lt;/Module&gt;

</code>

Upload and Test

You’ll need to save your gadget—weekly-feature.xml would be fine name—and upload it to your web server. Once you’ve up loaded it, the gadget will have a URL like this: http://www.yourstore.com/weekly-feature.xml.

To test your gadget let’s use iGoogle. If you don’t have an iGoogle account but already use any of Google’s services, including Analytics, Gmail, or AdWords, you should find a link to iGoogle on your My Accounts page.

Once iGoogle has opened:

  1. Select “Add stuff.” In most themes, it will be on the right-hand side of the page.
  2. Once the “Add stuff” page opens, look for the “Add feed or gadget” link at the bottom of the left-hand column.
  3. Click it and a dialog box will open. Just type in your gadgets URL— http://www.yourstore.com/weekly-feature.xml—and click “Add.”
  4. A new dialog box will appear. Select “OK.”
  5. Now click on the “Back to iGoogle home” link at the top of left-hand column.
  6. You should see your gadget.

Promoting Your Gadget

Now that you have a working “Weekly Feature” gadget, you’ll want to promote it. Link to it on your website and add it to module directories like the Unofficial Google Modules list and Google’s gadget directory. Remember to keep updating your gadget weekly by changing the product image and the link.

Tutorial Video

Gadget Resources

Example Gadgets

Armando Roggio
Armando Roggio
Bio   •   RSS Feed


x