Thursday, May 29, 2008

Create a Random Widget with Text (and Links)

You can use the tool to create your own widgets with dynamic content, either random content or date-based content. To do this, you will need to have access to webspace where you can publish the widget. For the purposes of this tutorial, I will be publishing the widget to my University of Oklahoma webspace, which is available to all students, faculty and staff at the University of Oklahoma. You probably also have webspace you can use from your Internet service provider or web hosting provider.

You will also need a good HTML editor, such as Dreamweaver. If you do not already have an HTML editor, I highly recommend Mozilla Seamonkey, which is a very simple, free HTML editor created by the same folks who brought you the Firefox browser. You can download and install Mozilla Seamonkey for Windows or Mac from the Mozilla Seamonkey website.

Before you start building the widget, you should identify the content you want to use. For the purposes of this tutorial, I prepared a quick list of some Latin proverbs that I like. You could also choose some websites you want to link to, and so on. For the purposes of this tutorial, I am NOT using images, but I will post a separate tutorial for creating widgets with images in them. To see some examples of widgets created the RotateContent tool, visit the website (you can use any of the widgets there, without having to build your own, of course!).

After you have designated your content, go to and select RANDOMIZED content from the Create Content options. This will take you to a screen where you enter the number of items you plan to include. Don't worry, you can change this later if you want - for now, just put in your best guess! For the purposes of this tutorial, I am going to make a widget with 10 random Latin quotes, so I enter 10 into the box and click the Create Template button.

This generates an HTML file that I need to download and save somewhere on my computer. It's a good idea to create a folder where you can keep all your widget materials. So, RIGHT-CLICK on the link provided, and save the file to the folder you are going to use. You should give the HTML file a name that you will remember. For this tutorial, I'll call the file favoritequotes.html.

After I have saved the file on my computer, I then use the HTML editor to open the file and add the content to it. When you open the file, you will see that it is a simple table, and you will enter your content in the individual cells of the right-hand column. Make sure you DELETE any rows where you decide not to add content. If you want to add more rows, you can do that, too - just make sure you type the word "random" in the left-hand cell of each row, as you see in the template file. You can format the text with bold, italics, etc., and you can also use the HTML editor to create links to webpages online. When you are done, make sure you save your work! (Do not try to use images for this tutorial; I'll be explaining in a separate tutorial how to create a widget with images.)

After you have finished adding content to the template file, you will return to to change your table into a script (this is "Step 4" of the Randomized Content process, converting the template to a script). You need to choose whether you want a Javascript or a PHP script. If you are not sure about the difference between these two options, just choose the Javascript option - that is the best general choice. Next, browse to find your HTML file, and then click the Convert Template button.

After the template file is converted to a javascript, you will need to RIGHT-MOUSE click on the link to download the script file and save it. Make sure you save the javascript file in the same folder that you saved your template file so that you will be able to find the javascript later.

Next comes the tricky part: you need to UPLOAD THE SCRIPT (the .js file) to a server somewhere. To upload the script, you will need to use an FTP client to do that. If you do not already have an FTP client that you use, I recommend FIreFTP for Firefox. This is a browser-based FTP client that is extremely easy to use; here are some notes about installing and using FireFTP.

After you upload the script, it will have an address on the web. For example, if I use my university's webspace, my script is located here:

So, to use the script, I insert that address into this script formula. Where I have put the address of my script (, you will need to substitute the address where you have published your script.

This formula is the Javascript code that I will insert into the webpage, blog page or wiki where I want to display the results of the script. To insert this formula, I need to be looking at the HTML view of the webpage, blog page, or wiki. In another tutorial I have explained how to insert a Javascript into a PBWiki page. For this tutorial, I will explain how to insert a Javascript into a blog post like this one.

If I want to insert the Javascript into a blog post like this one, I just have to make sure that I am in HTML mode (instead of Compose mode), and then I paste in the Javascript:

Here are the results if I do that with my random Latin quotes script (you should see one of the 10 quotes at random each time the page refreshes):

Random Latin Quote:

In a separate tutorial, I'll explain some other methods for inserting Javascripts into blogs and other websites, and I'll also explain how you can use the tool to create widgets that contain images, too! :-)

Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.