The Knewton Blog

Subscribe to Newsletter

Our monthly newsletter features edtech and product updates, with a healthy dose of fun Knerd news.

A Step by Step Guide to Creating Tag Clouds

Posted in Knerds on February 25, 2011 by

Recently, we posted about Four Ways to Use Tag Clouds in the Classroom — with the promise that we’d follow up with a step-by-step tutorial for making these awesome interactive graphics on your own. Check out our earlier post for a quick background on what tag clouds are, and how they can be used to supplement classroom lessons.

Ready to get started? Today I’ll walk you through how to create two types of tag clouds: one that uses a set list of inputted words, and one that “scrapes” its words from a website of your choice. For both, we’ll create the cloud using a a great web program called Tagul.

To begin, visit http://www.tagul.com/ and register. Once you’ve created a username and accepted their terms and conditions, you can get started by clicking “Create” under the “My Clouds” heading on the right side of the screen.

Creating a Tag Cloud with a Set List of Words

1. Decide what you want the tag cloud to display.

For the sake of this example, let’s do a Valentine’s Day vocabulary list, with the goal of linking each word to its dictionary.com definition, so that students can click on any words they don’t know. Once you’ve compiled the list of words you want to include, you can copy or type it into the “text” section of Tagul. After entering the tags, hit “Fetch tags” to populate the list.

2. Size the information.

Since part of the fun of tag clouds is sizing the information intelligently, we have to decide how to weigh each word. For example, you might include the most difficult or most common vocabulary words most often. To do this, simply repeat these words to give them more weight.

3. Decide where on the web the tags will go.

As described in Step 1, in this case, we’ll use dictionary.com to get definitions for each word in the cloud. We can pull the “tag link pattern” for definitions from dictionary.com and replace the “$tag” marker with the actual vocabulary word. (You can easily find the “tag link pattern” on dictionary.com simply by inputting a sample word into the search field. No matter what word you enter, the URL follows the same pattern: http://www.dictionary.reference.com/browse/word).  This tells Tagul where the link of each word will go.

4. Style your cloud!

Pick a shape font, all the colors and the angles you want your words to go in. For this one, we’ll use a heart (a no-brainer), but there are also stars, rectangles, triangles, clouds, etc. We will keep these particular words flat at 0 degrees, but we can make the cloud much more interesting with new angles. Then hit “build cloud!”

5. Check the tags.

Once the cloud is built, you can check the tags (and erase any you want) and see the weights of each tag.

6. Add (more) style!

Color your words, create a background, set the rollover text animation speed and color under the “style options” tab. We’ll use some Valentine’s colors here by adding them to the right box.

7. Preview the cloud.

Make sure it does what you want, check the links, and finalize. Here is the finished product below- remember to rollover and click the links!

Pretty cool, right? Now, on to the next lesson…

Creating Tag Clouds that “Scrape” from Website Content

For these types of clouds, the tag cloud pulls its terms from a website of your choice (you don’t need to input any words!)

1. Decide what you want the tag cloud to display.

Let’s use the “Egyptian revolution” cloud I created for my earlier post as an example for this tutorial. This cloud scraped its tags from the NY Times’ “Times Topics” page on Egypt; this page displays the headlines and first few lines of all the Times’ articles about the Egyptian revolution. I used Tagul to pull the 300 most common terms from this page.

2. Copy the URL from your website to the “URL” section of Tagul.

Only the top 300 most common words will be pulled for inclusion in the cloud. Any good news website or article works, but news aggregators or RSS feeders also work perfectly with Tagul.

2. Decide where you want each word in the cloud to link.

In this case, I decided to link each term pulled from the Times webpage to the Google News search results for that term. For example, “Mubarak” was one of the words that appeared in my tag cloud. Clicking on this word would direct you to the current Google News results for “Mubarak.”

3. Set up the “Tags’ link pattern” to tell Tagul where the words should link.

The term “$tag” must be substituted into the URL wherever the actual word will go. For example, if you search Google News for “egypt”, you might get this URL:

Then replace the word you searched for with the “$tag” code to tell Tagul what to replace:

The latter URL can be copied back into Tagul. Hit “fetch tags” in Tagul to pull all the appropriate tags.

3.View the tags by weight.

Once the top 300 tags are pulled, you can view them, by weight, in the “tags” tab on Tagul. This is a good time to “blacklist” the common English words (“the,” “and,” “or,” etc.) or weird non-words that are irrelevant to your tag cloud (by hitting the “x” next to them). These words will not appear in the cloud.

4. Add Style.

Choose your color, shape, and more! Check out steps 4 and 6 in the Valentine’s tutorial above for more details.

5. Enjoy your cloud!

Roll over individual words and click to read the most recent news stories for each word.