Tuesday, October 14, 2008

Make your own gadgets

Gadgets can be a great way to present information you care about to web surfers everywhere. People can add your gadget to iGoogle or to their other pages across the web (which countless other web surfers can then see). Gadgets can be quick and simple, like the countdown gadget, or complex and professional, like the Entertainment Weekly gadget. And creating a gadget is easy — anyone with even a little experience with web design or programming can do it.
What are Gadgets?

Gadgets are simple HTML and JavaScript applications that can be embedded in webpages and other apps.

Simple to build

Built-in JavaScript libraries make it easy to create gadgets that include tabs, Flash content, persistent storage, dynamic resizing, and more. Use the Google Gadgets Editor to build gadgets quickly and easily.

Multiple sites

Your gadget can run on multiple sites and products including iGoogle, Google Maps, Orkut, or any webpage. Write your gadget once, and with minor changes it can run in multiple places.

Reach millions of users

Many gadgets are viewed millions of times per week and generate significant traffic for their authors. When users add your gadget to their iGoogle homepage for instance, they'll see your content each time they visit Google.How do I start?

1. Check out our Getting Started doc.
2. Learn more:
* The gadgets.* Developers Guide describes the new gadgets API that runs in containers that also support the OpenSocial API.
* The "legacy" Developers Guide describes the original gadgets API. The legacy gadgets API runs everywhere, but it doesn't include new features introduced in the gadgets.* API.
3. Submit your gadget to the directory (legacy gadgets API only).
Getting Started: gadgets.* API

Welcome to the gadgets API!

This developers guide is based on the gadgets.* version of the gadgets JavaScript API. The gadgets API has been "renamespaced" into the gadgets.* JavaScript namespace, to provide a cleaner API to program against and support. To learn more about the gadgets.* API, see the reference documentation here. While the gadgets.* API overlaps significantly with the legacy gadgets API, there are also important differences.

Currently, only some containers (a container is a site or application that runs gadgets) support the gadgets.* API. For a list of containers that support the gadgets.* API, see the OpenSocial container list. Some older containers only support the legacy gadgets API, so be sure to check the documentation for your specific container to see which API is supported. To learn more about different types of gadgets and where they run, see the gadgets API Overview.

All containers support the legacy API, regardless of whether they support the gadgets.* API. However, the gadgets.* API offers many new features that don't exist in the legacy API, so you should use it if you can.

This developers guide is intended for people who want to use the gadgets API to write gadgets. Gadgets are so easy to create that they are a good starting point if you are just learning about web programming.

1. "Hello, World"
2. What's In a Gadget?
3. Where to Go From Here

"Hello, World"

The simplest gadget is just a few lines of code. This gadget displays the message "Hello, world!":

Hello, world!

Note the following about the "Hello World" example:

* Gadgets are specified in XML. The first line is the standard way to start an XML file. This must be the first line in the file.
* The tag indicates that this XML file contains a gadget.
* The tag contains information about the gadget such as its title, description, author, and other optional features.
* The line indicates that the gadget's content type is HTML.
* is used to enclose HTML when a gadget's content type is html. It tells the gadget parser that the text within the CDATA section should not be treated as XML. The CDATA section typically contains HTML and JavaScript.
signifies the end of the Content section.
signifies the end of the gadget definition.

What's In a Gadget?

The gadgets API consists of a few simple building blocks: XML, HTML, and JavaScript. To get started, all you need is a basic understanding of HTML. We will teach you all you need to know about XML to write gadgets. Later, as you write more sophisticated gadgets, you will probably want to learn some JavaScript if you're not familiar with it already.

XML is a general purpose markup language. It describes structured data in a way that both humans and computers can read and write.

XML is the language you use to write gadget specifications. A gadget is simply an XML file, placed somewhere on the internet where Google can find it. The XML file that specifies a gadget contains instructions on how to process and render the gadget. The XML file can contain all of the data and code for the gadget, or it can have references (URLs) for where to find the rest of the elements.

HTML is the markup language used to format pages on the internet. The static content of a gadget is typically written in HTML. HTML looks similar to XML, but it's used to format web documents rather than to describe structured data.

JavaScript is a scripting language you can use to add dynamic behavior to your gadgets.
Where to Go From Here

Every container that runs social gadgets has slightly different characteristics. Here are a few places to start getting some hands-on experience developing social gadgets:

* OpenSocial Tutorial for iGoogle
* iGoogle Sandbox Developers Guide, for information on developing gadgets for the iGoogle sandbox.
* Orkut Sandbox Developers Guide, for information on developing gadgets for the Orkut sandbox.

For more general gadget programming information, go to Writing Your Own Gadgets. From there you can go to Development Fundamentals, or back to the documentation home page for an overview of sections and topics.

1 comment:

YouPage Ltd said...

Great post! Thanks for sharing.

Worlds Updates

Add to Google