Widget Tutorial

A widget is a small web application that you can place on your web site or blog, or on various homepages like iGoogle, Yahoo, Facebook, and Netvibes, or even onto the desktop of some operating systems like Vista or MacOS (Leopard). For a quick intro, we have a YouTube video that walks you through some of the basics:




The easiest way to get started is to click the "Get & Share" button at the bottom of a widget you like, and look through the list of installation targets. Or go through the examples below to get an idea of how widgets can be used. We have also provided detailed instructions for several popular widget targets:

iGoogle

In this case we have selected iGoogle, your homepage for Google. You will be asked if you want to install this widget to your Google homepage, and if you agree, it will appear whenever you open your homepage, as shown below.


Yahoo! Widgets Desktop

If you select Yahoo, you can also add the widget to your Yahoo Widgets desktop, as shown below. This will make the widget available on your Windows or MacOS desktop. If you don't have the desktop appliation yet, you can download it from Yahoo.

WordPress

There are two ways to incorporate one of the widgets into WordPress, as part of a blog post, and as a permanent part of the web site.

To incorporate into a blog post, click on the "Get & Share" button, then click on "Embed", and copy the contents to the clipboard. Then all you have to do is paste the embed code into the blog post, as shown below, and it will be embedded into the post.


Note that in order to post the object code, you must not use the visual rich editor, since it will not allow you to enter HTML tags. You can switch this editor off as the default optionby logging into the WordPress administration page and going to the My Account link on the upper right, and deselecting the "Use the visual rich editor when writing" checkbox under Personal Options.

You may also want to incorporate the widget permanently into your site, for example on a sidebar. To do this you will need to edit the Theme. From the WordPress administration page, click on the Presentation tab, then click on Theme Editor. To place the widget in the sidebar, click on the Sidebar file, and paste in the embed code. Note that if you are incorporating a flash widget, you can adjust the size of the widget by editing the width and height within the embed code.

Embed Code
You can also click the Embed link under Get&Share to get the HTML embed code, and place it on any web page. For example, the widget on the right sidebar of this page was created by pasting in the embed code, as you can see by viewing the source code for this page. This will be compatible with virtually all browsers. If it is a Flash widget, you can also resize it by editing the width and height, and the widget will scale to match the new dimensions.