A tag cloud is a visual representation of content tags used on a website. More frequently used tags are depicted in a larger font or they get some kind of emphasizing. Selecting a single tag within a tag cloud will lead us to a collection of items related or associated with that tag. The photo sharing site Flickr was the first to use tag clouds and the popularity of this website component increased along with the implementations on Del.icio.us and respectively on Technocrati (among others).

Tags clouds are typically represented using inline HTML elements. The tags can appear in alphabetical order or in a random order; they can be sorted by weight, and so on. Some prefer to cluster the tags semantically so that similar tags will appear near each other. Heuristics can be used to reduce the size of the tag cloud whether or not we are trying to cluster the tags.

We think that tag clouds can be a very practical solution that offers a quick insight on the most popular terms on a website, so we’ve implemented a tag cloud control on our blocks4.net home page. We initially started tracking the search keys involved in searches on our site. Once storing this data, the tag cloud seemed an excellent way for selecting and arranging the most popular terms – that also reflect the profile of our website.

A really great implementation of a tag cloud (the one we used as well) can be found on CodeProject, www.codeproject.com/useritems/cloud.asp. This control works only with the ASP .NET 2.0 and first you have to add to the page the following declaration:

<%@ Register Namespace=“VRK.Controls” TagPrefix=“vrk” Assembly=“VRK.Controls” %>

After explicitly adding the control to the page, the code would look something like this:

<vrk:Cloud ID=“CloudControl1” runat=“server” />

The control needs some items for displaying and each element will be displayed as a hyperlink on the page. You can add items declaratively, programmatically or, like in our situation, using data binding. Therefore we need to use an ObjectDataSource (or any other ASP .NET data source control). Here is a sample of such an object:

<asp:ObjectDataSource ID=“ObjectDataSource_TagCloudSource” runat=“server” SelectMethod=“GetItems” TypeName=“CloudTest.ItemsSource” /> 

The ObjectDataSource’s ID must be specified as the DataSourceID in the cloud control:

<vrk:Cloud ID=“CloudControl1” runat=“server” DataSourceID=“ObjectDataSource_TagCloudSource“  .... />

The next step is to indicate how the items of the cloud control should be populated from the data source. For this phase, the cloud control has some very useful properties:

DataTextField – the name of the data field that is bound to the Text property of an item.

DataTextFormatString - the format string for the Text property. {0} in the string is replaced with the value of the field from the data source.

DataHrefField - the data field which is bound to the Href property of an item.

DataHrefFormatString - the format string to format the Href property value.

DataTitleField - the data field which is bound to the Title property of an item (this will act like a tooltip).

DataTitleFormatString - the format string for the title of an item.

DataWeightField - the field from the Data Source where the weight of an item is to be obtained. There is a range from 1 to 7 for every item’s weight. This is possible because the control performs a normalization of the weights values. The normalized items can be displayed each with different styles. You can accomplish this by specifying the ItemCssClassPrefix property and defining seven CSS classes, with their name composed form the specified prefix and the corresponding number (1 to 7).