Wednesday, October 5, 2011

How To Make Google Gadgets


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.



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 don't, get info or search in Google.com.


What is iGoogle?
  • iGoogle is a personalized version of the Google homepage.
  • The iGoogle page is where gadgets are displayed, and in many cases, edited.
  • The quickest way to get started with iGoogle is to click this link
The Google gadget editor
There are many ways to edit gadgets, but for this and most lessons we will use the Google gadget editor. It is a tool that you can use to create gadgets and store files on your Google account in a very simple way. It is also a gadget itself!
This is the official gadget editor provided by Google. Let’s take a closer look at the functions of this gadget…

The above image shows you the important stuff you will need to know about this gadget.
In lesson two we created a tiger gadget using the Google gadget editor. If everything went right, you should now have a file named “tiger.xml” on your Google account.
If you are just joining us, copy this code from this text file and save it as as “tiger.xml” via the Google gadget editor so that we all have the same code to discuss. (To get the gadget editor and learn how to use it, go here and click “add to Google”.)
Let’s take a look at the code itself. Here is how to get it.
1.    Make sure you are logged into Google.
2.    Go to your iGoogle page and click the tab called “How to make Google gadgets” (we added this in lesson one).
3.    Use the Google gadget editor to open the file “tiger.xml”
This is what you should see…

Okay, let’s look at that code and explain what each part does…

How to make a Google gadget display on iGoogle?

Okay, we now have a file (tiger.xml) but how do we get it to “work” on iGoogle?

1) We must know where our file is residing on the internet.

Let’s pull up tiger.xml on the Google gadget editor…                          
When you click on the file name, a new window will open with the contents of that file. Near the top of your browser you will find the address of this file. This is the place your gadget code resides…

Make sure to highlight and copy that address!

Now that we know where our file resides, we can add it to iGoogle, here is how.

2) Add a gadget to iGoogle from a file

Go to iGoogle and look on the right hand side of the screen. You will see a link that says “add stuff”.




Click that link and you will be taken to the Google gadget directory. On the left hand side of the page near the bottom is a link that says “Add feed or gadget”…


Whe you click the link “Add feed or gadget” a window will display where you can put the address (url) of your file…


Put the address you copied from the first step in the box and click add.
Once you do, you will see an alert from Google asking you if you really want to add this. Click “ok” to that message and then you gadget will be installed. When you do this, you won’t see you page change very much and you will have to return to iGoogle to see your gadget…


When you do that you will see your gadget live on iGoogle! (usually on the top left hand side) Let’s see what our tiger looks like…


This tiger is the result of the code you manipulated in lesson when you changed.
Here are the things you changed…


These are the visual changes you made to the example gadget:
You changed the title from “hello world example” to “tiger”. You also changed the height of the gadget by making it taller.
Overview:
You have now, from start to finish. created a Google gadget and made it display on iGoogle. Congrats!
You now know of most of the basic steps and concepts that are important to be able to create gadgets, and to begin understanding the documentation provided by Google.

No comments:

Post a Comment