How To Make Google Gadgets – Lesson Two
Google Gadget Tutorial > Lesson Two
This is second 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.
Lesson Two – Getting started with gadgets
In the in first lesson we discussed what we would need to create Google gadgets with this tutorial…
1) An iGoogle page
2) A Google account (free and simple) or your own web server
3) Lesson specific gadgets on your iGoogle page
Now that you have those things we can get started. In order to create gadgets we must know some basic concepts about how Google gadgets are displayed and where they come from. Some of what I am about to may seem a little foreign if you have not worked with web pages before, but fear not, it will all come together soon.
Where do Google gadgets come from?
Google gadgets are basically just files that are located on the web. The gadgets we will create, like all gadgets, will have to be somewhere on the internet. If you have your own webserver you can place the gadget file there, if you do not have your own webpage then you can use your Google account to place your gadget files on the web via the Google gadget editor (one of the gadgets on the tab you added to iGoogle in the first lesson).
To see this visually…
Notice that the file is first either on your webpage or on your Google account, then it gets cached by Google. “Cached” just means that Google “remembers” it’s own copy of the file (more abut this later). The Google gadget then gets displayed on an iGoogle page.
If you do not understand that, don’t worry. It is a concept that will be important later in our lessons, but will become more clear as we go on.
Now we will learn how to make these files using the gadget editor…
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.
I will explain each feature and how to use it in a video where you can see both the video and the gadget editor at the same time on your iGoogle page so I can walk you through the features of this gadget and how to make that tiger gadget…
To watch the video and do the walk-through on your own iGoogle page go here and click “add to Google”. When you do, you will see me and the gadget on your own page where we can go through the lesson (make sure you are logged into your Google account).
It will only take about five minutes or so to create your first gadget using the steps I put out in the video.
How to Make Google Gadgets – Lesson Four
How To Make Google Gadgets – Lesson One
How to Make Google Gadgets – Lesson Five
March 27th, 2008 at 11:44 am
Excellent teacher!
Thanks!
January 10th, 2009 at 4:29 am
Wow, you really are an amazing teacher. The video was so helpful. I just followed along and I felt like you were right here helping me. I felt like I was sitting in a college classroom again. Thanks so much! Have a good weekend.
March 25th, 2009 at 8:04 am
While trying to follow your instructions all the google gadgets on my igoogle page disappeared–to be replaced by the three gadgets mentioned in lesson one. Is there any way I can get back to my original page. If you can help me restore my igoogle page I’ll promise never to use your tutorial again.
Thanks.
November 11th, 2009 at 4:32 pm
I like your training format… I have one repeating error as I am doing the lessons. There is a space error at the xml line 1 that makes the program malfunction. I added the space by hand, and it still displays an error in the preview, but clicking the file name displays the “hello World”. Is there a setup problem, or setting causing this error? In each lesson this error returns on line 1, and the next error is the space in the “encoding” wants a space prior to the word encoding. In lesson 3 the space issue returns at the word “prefs”. What do you thinks is happening?
December 28th, 2009 at 5:10 am
Vaughn, The problem may lie with the google web toolkit. There is a listed bug that the GGE doesn’t work with the Chrome browser. The xml parser in the web toolkit seems to conflict with the GGE.
But if you use a non-chrome browser, it may work for you.
January 9th, 2010 at 9:10 pm
I need help!!! Whenever I click the preview tab, an error occurs, and the words Hello World can’t be seen anywhere… When I save the file as tiger.xml, it doesn’t even let me click the preview tab! If you know what my problem is, please send me an email here> javb1545@hotmail.com
January 9th, 2010 at 9:13 pm
Ok, I just read Kurtu5′s response to Vaughn, who seems to have the same problem as me.. I’ll try using Internet Explorer
April 4th, 2010 at 11:51 pm
Hi,
I cant launh the video..and i cant view it. i cant seem to find a link to the video
July 10th, 2010 at 2:19 pm
In July 2010 I’m getting an error message:
“Unable to retrieve: http://www.google.com/ig/modules/UNKNOWN”
before entering any code.
That error displays on the right-most gadget when I bring in the 3 of them as mentioned at the end of Lesson 1. This happens in Chrome, and also in Firefox (I’m using the latest Ubuntu).
Maybe some version has changed in the last few months, and that gadget needs to be updated.
John S. James
July 28th, 2010 at 3:08 am
Hi, thank you for a nice turtorial.
When I have pasted in the code for the tiger gadget, a “#” shows instead of the tiger and I get a message about my smart screenfilter. Even if I delete that filter it doesn´t work. I have Internet explorer 8. Did I miss something? What can I do? Thanks!
July 30th, 2010 at 10:40 am
I am having the same issue as Lena above. When I paste the tiger code into the gadget it only displays a “#”. I have also disabled my XSS filter, but this does not work.
July 30th, 2010 at 1:42 pm
You can’t, they discontinued Yahoo 360 Blogs in July 2009.