Google Gadgets & SEO

This is the seventh 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.

In lesson six we learned that Google gadgets can actually be “mini websites”. I have received a few questions about this, and the best way I can put it is as follows…

Look at your computer screen, you are looking at this webpage in a browser. The browser (Internet Explorer or Firefox) you are seeing this website in is just like a gadget. Websites that you see are designed to be a certain size that fills your computer screen. A Google gadget that is a “mini-website” (type URL) is just like every other website, except it is smaller, and designed to be seen in a small space. We will explore this further as we make our next gadget.

We will now go through the steps of creating the Princess Bride quotes gadget…

This gadget displays random quotes throughout the day. It is a very good gadget in the sense that the information or content is frequently updated. This means the user is presented with several different quotes throughout each day.

This makes the gadget a litter bit harder to make, but with this guide you can “fill in” any quotes you want and submit it as your own Google gadget!

How to make a quotes Google gadget

This gadget is a type “HTML” gadget (like the tiger in the first lessons), it is not a “mini-website” type, but it actually uses a mini website to display information.

To make this gadget we need the mini website that displays quotes. It is a simple one page website, and I will step you through how to make it.

This gadget requires that you have your own webserver. The mini website we will make will not work through the Google gadget editor.

We will need two things to create this gadget.

1 - The mini website

2 - the Google gadget to display quotes

Lets begin with the website. As I said, this can be made with just one page.

Here is the website “behind” the Princess Bride quote gadget, it will open in a new window. - Click here to see website

You will see that the website ony does one thing, it shows a blank screen with one quote on it. We will use this to display the concept of a “mini website”.

Minimize the window that is showing the quote…

When this web page is displayed in a smaller container, it starts to sorta look like gadget doesn’t it?

Now refresh the quote page and you will see another quote appear. Every time you refresh that page you will see a new quote. Neato huh? But all those quotes are in reality on one page of code.

This is done through a PHP script.

Sound scary? Don’t worry. All you will do is copy and paste and then replace the Princess bride quotes with whatever quotes you want to display. Let’s get started.

The first step is to get the code and save it to your server. Click here for the code in a text file.

This code was written by David Marotz. Thanks!

Follow these steps:

Create a page on your server named “quote.php”

Copy the code from the text file and paste it into your “quote.php” file.

Save the file.

Now open that file from a browser. (example - www.yourwebsite/quote.php)

One of two things will happen.

It will work, and display a quote.

or

It won’t work.

If it works - Great! You have successfully used a PHP script! We can now go on and create our gadget.

If it doesn’t work - You will have to double check that you copied all the code, and that you named the file correctly (file name “quote.php” the “php” part is important). If you feel that you have both copied it right, and named it right, but it still doesn’t work, you will need to call your host support and tell them that you have tried to display a php script, but it is not working. They should be able to help you.

Now we must make the Google gadget to display the quotes.

The gadget we are making displays a picture and the quotes from the website. This means you need an image, lets just use this one for now…

To put this image on your server follow these steps:

Right click on the image, choose “save this image”, then save it to your computer.

Upload the image to your server (or use the Google gadget editor to upload)

Okay we are almost done, we have everything we need except the Google gadget code…

I am not going to explain in depth how this gadget works, I am just going to show you how to make it. Follow these steps:

Create a file called “quote.xml” on your server (or in the Google gadget editor)

Copy the code from this text file

Paste that code into your “quote.xml” file.

Save the file.

Your gadget will not work yet!

We have to change some things in the code to make it work with your information.

Replace the following stuff in the code with the correct information:

Click image to see the larger, readable version:

Once you have replaced the information as described in the above image, you are done!

to see your gadget simply use the steps we discussed in earlier lessons to add your gadget.

note: your gadget file is “quote.xml”

Okay now you can replace the quotes in the php file with quotes of your own, here is how…

Click image to see the larger, readable version:

After you have replaced the quotes and authors with your own, you can save the file and see your new, personalized gadget. You can use the same process to create as many quote gadgets as you like.

Related posts:
How to Make Google Gadgets - Lesson Six
How to Make Google Gadgets - Lesson Four
How To Make Google Gadgets - Lesson Two

This entry was posted on Thursday, February 28th, 2008 at 9:19 pm and is filed under How to make Google gadgets, google, google gadgets, iGoogle, webdev.

 Subscribe