Creating your first iGoogle Gadget Creating your first iGoogle Gadget

Recently at work, we've started diving into Google Gadgets.  They are quite fun and really extremely easy to build.  In this article, I'm going to get you started creating your very own Google Gadget.

Sit back and reserve a few minutes of your time and you will be well on your way in no time!


The first thing we need to do is open our favorite text editor.  Create a new file called google.xml.  Inside the file, place the following information to get started:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Hello, World!"
    height="240">
    <Require feature="opensocial-0.8"/>
    <Require feature="views" />
    <Require feature="setprefs" />
  </ModulePrefs>
  <Content type="html" view="home"><![CDATA[ 
  ]]>
  </Content>
  <Content type="html" view="profile"><![CDATA[ 
  ]]>
  </Content>
  <Content type="html" view="canvas"><![CDATA[ 
  ]]>
  </Content>
</Module>

The following code sets up our basic module.  We create a module, give it a title and a fixed height.  We require a couple of options to provide us with a few capabilities.  Finally we create three blank content areas: "home", "profile", and "canvas".

The home content area gets displayed if our module was embeded on another webpage other than iGoogle.

The profile content gets displayed when viewing the module in iGoogle.  This is the small box that can be dragged and dropped to organize the various modules in your account.

The canvas content area gets displayed when the module is maximized.  When maximized, it takes up the full area inside of iGoogle, minus the left navigation.

To actually have content displayed now, we simply need to populate our different content areas.  Inside of the content areas you can include Javascript, CSS, and HTML.  The sky is the limit!  If you plan to create gadgets with dynamic data, Google offers AJAX helpers to load data in through AJAX.

Enjoy!

Published on May 12, 2009

Tags: iGoogle | XML

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.

Tutorials

Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.