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

How to serve your content via a Google gadget

In our first lessons we learned about the most common type of Google gadgets, most gadgets have all the content within the gadget code itself.

There is another option.

Google gadgets can display information fed from your own website. This can happen in many ways. In fact I want to teach you how to make just such a gadget, one that displays quotes from a website or server. Before we can do that however (it is a little tricky) I will first describe what Content types are.

Content Types in Google Gadgets

There are two main types of “Content” as far as Google gadgets go. The first type is “HTML” which is the type of gadget we made earlier (the tiger). The second type is “URL” where all the instructions for the gadget are not located in the gadget code, it is located somewhere else on a webpage. They can look very nice, but be surprisingly simple to create.

The most striking difference of these two types is the length of the code. Let’s look at an example of the “URL” type of gadget. The Big Brother Live Cam gadget…

This gadget has tabs, and photos of the Big Brother cast, and even lets you watch the live video feeds from the house right within the gadget, it must be complicated right?

Nope. This is one of the most simple examples I can provide for a type “URL” gadget. Let’s look at the code for that gadget…

<?xml version=”1.0″ encoding=”UTF-8″?>
<Module>
<ModulePrefs
title=”Big Brother 9 – Live Cams”
width=”375″ height=”425″>
</ModulePrefs>
<Content type=”url” href=”http://www.gadzi.com/bb9/default.html” />
</Module>

That is pretty short huh? Let’s look at why the code is so short and how we can use this example to create our own gadgets from our own content.

There is one line that is important to notice…

<Content type=”url” href=”http://www.gadzi.com/bb9/default.html” />

In the above line the code says that the content type is “url” (comes from a webpage). It also tells us what that url is ( http://www.gadzi.com/bb9/default.html).

A url type gadget is simply a mini website.

Let’s take a look at the “url” the Big Brother gadget comes from.

See how different it looks in a web browser? Interesting huh?

If you view this page on the web instead of inside a Google gadget, you will see that it has all the functionality of a website. The difference is that this website was designed to be viewed in a smaller area, a gadget. This is actually great news for most new gadget developers because many of you are familiar with making websites which means you can really show off your skills and create incredible and original gadgets using the skills you already have.

There are many ways to make these “mini websites” that will look great, but I want to remind you that my goal is to show you how to create a quote Google gadget, using this technique (and a couple other techniques too).

We will make a Quote gadget in our next lesson. For now, we just need to understand that gadgets can display “mini websites” which is a very important thing to know. We will make use of this knowlege in our next lesson.

Try to find gadgets in the directory that use type “url” and take a look at the url they are actually coming from to help you get ideas for your own.

Next Lesson 

Related posts:
How To Make Google Gadgets – Lesson Seven
How to Make Google Gadgets – Lesson Five
How To Make Google Gadgets – Lesson Two