How To Make Google Gadgets – Lesson One

Google Gadget Tutorial > Lesson One

This is the first in a series of articles which will be put together as a guide to creating Google gadgets. To see a full index of all gadget lessons, please see the Google Gadget Tutorial.

The goal of this guide is to teach you how to make Google gadgets regardless of your skill level, even if you do not know any coding. I will assume that you do not know anything, except how to copy and paste. We will begin with very simple examples, but this guide will bring you up to speed on even complex and professional gadgets and how to promote them if you stick around for the whole thing

Intro to Google gadgets

I have some great news, Google gadgets can be made by just about anyone. You do not have to know code, nor do you need to have your own webpage or webserver to get started with Google gadgets. Even if you do not own a computer, you can use the information you find here to create gadgets on a public computer like a library, your school or a community center.

What you will need to do is understand a few things about Google gadgets, and be willing to spend a little time learning and experimenting. It is time well spent.

The first step to learning how to make Google gadgets is to know what they are, and what features they have. Every Google gadget on an iGoogle page share several characteristics regardless of how simple or complex that gadget is.

In the upper right hand corner of every gadget displayed on iGoogle there are some buttons, as seen above.

The “Gadget Menu” is an important thing to know about. When you click this, it displays a few things that can be done with the gadget.

Sometimes the top item in the menu is called “Edit settings” which allows you to make choices about how your gadget appears or acts. Not every gadget has this ability, but those that do will display the “Edit settings” item.

In the Google documentation, this is referred to as “User Preferences” and that term is used many times, so it good to know what it is

The above buttons and menu are there when a gadget is displayed on iGoogle, but is not shown when that gadget is displayed elsewhere. Here is the gadget from above live…

Notice that this gadget works on this page. That is one of the neat things about Google gadgets, they can go anywhere and still work. For the purposes of this first tutorial, we will discuss Google gadgets that are displayed on iGoogle (we will get into more uses of gadgets later).

What you will need

To create a Google gadget with this guide you must have the following things…

1) An iGoogle page

2) A Google account (free and simple) or your own web server

3) Lesson specific gadgets on your iGoogle page

If you have those great. If you do not, here is a description of what these things are and how to get them.

The iGoogle page

• What is iGoogle?
  • iGoogle is a personalized version of the Google homepage.
• Why do I need an iGoogle page?
  • The iGoogle page is where gadgets are displayed, and in many cases, edited.
• How do I get an iGoogle page?
  • The quickest way to get started with iGoogle is to click this link. When you do that you will see one of two things: If you have a iGoogle page already, you will see it. If you do not have an iGoogle page, a box will show up with some instructions.
  • Google has provided iGoogle help documentation to help you get started if you encounter any problems.

A Google Account or your own web server

• What is a Google account?
  • A Google account is a free way to store items and settings that are specific to you when you visit Google. To learn more about what a Google account is go to Google Account help documentation.
• Why do I need a Google account?
  • The main reason you will need one is so that you can have your gadgets displayed, and that you will see the same gadgets each time you go to Google. Also, if you do not have a webserver of your own, Google provides the ability to load and store information and files on your account, via the Google gadget editor, which we will be using for this tutorial. Even if you do have your own webserver, I recommend having an account so that you you can use this feature.
• How do I get a Google account?
  • To get a free Google account go here.
  • You will need to have an email address to do this, if you do not have an email address you can get a free email account from Google here.

Gadgets on your iGoogle page

• Which gadgets?
  • There are some specific gadgets that help you make Google gadgets or make the process easier (more on this below).
• Why do I need these gadgets?
  • These gadgets allow you to “connect” with Google and are needed to illustrate the process of creating gadgets.
• How do I get them?
  • To get started, you can install a “tab” that already has the needed gadgets for each lesson on it. For example, our next lesson will be how to use these tools to create a simple gadget (the tiger gadget above), everything you need for the lesson can be added in one step by using a “tab”.

• In this tab there are three gadgets already installed. One is the gadget we will create in the lesson, and the other two are gadgets that help us create it.
• To get this lesson tab use this link or click the image below and click the “Add to Google” button.

Congratulations! You now have everything you need to start making Google gadgets.

In our next lesson we will learn how to make that tiger gadget with nothing but copying and pasting and how to make it display on iGoogle. We will also examine Google gadget code (don’t worry, you won’t have to learn code yet), and learn how to use the Google gadget editor to load, save, and create gadgets.

Until next time check out the Google gadget editor (one of the gadgets on the tab) play around with it, I will be describing in detail what you can do with it in the next lesson.

Go to Next Lesson