tagcloud-examples

This is a page for Tagcloud examples

See also

• tagcloud-brainstorming

Site Name: flickr

url

http://flickr.com/photos/tags/

Tag cloud models

Flickr has both their main tagcloud, which models the relative popularity of tags historically, that is, how often a tag has been used in total, as well as smaller “hot tags” tag clouds, which reflect the most popular tags in a shorter period of time, a day and week respectively.

Screenshots

Code conventions

The hot tags code looks like this

<table id="Recently">
	<tr>
		<td>
			<p><b>In the last 24 hours</b><br />
			<b><a href="/photos/tags/pics2006/">pics2006</a>, </b>
			<b><a href="/photos/tags/ubicomp2006/">ubicomp2006</a>, </b>
			...
		</p>
		</td>
		<td>
			<p><b>Over the last week</b><br />
			<b><a href="/photos/tags/itunes7/">itunes7</a>, </b>
			<b><a href="/photos/tags/futureofwebappssf06/">futureofwebappssf06</a>, </b>

Flickrs main tagcloud looks like this in HTML

<p id="TagCloud">
	 <a href="/photos/tags/06/" style="font-size: 12px;">06</a> 
	 <a href="/photos/tags/amsterdam/" style="font-size: 15px;">amsterdam</a> 

Notes

1. The hot tags are simply cells in a table with the id “recently”
2. The tagcloud proper is a p with the id of “tagcloud” — which would allow only a single tagcloud per page
3. that the links are simply links — despite this being a list of words, ordered alphabetically
4. that the rank or weight or popularity of the tag is visually created using inline style and font-size
5. There are at least a dozen different levels of popularity, difficult to determine without tedious work, as these are reflected in font-sizes in pixels.

Site Name: Technorati

url

http://technorati.com/tags

Tag cloud models

This page shows two tag clouds, called “heat maps” — one for the most popular tags in the last hour, and one for the 100 historically most popular tags.

Screenshots

Code conventions

<ul class="heatmap" id="smallheatmap">
	<li><em><em><em><em><em><a href="/tag/Advertising">Advertising</a>
	</em></em></em></em></em></li> <li><em><em>
	<em><a href="/tag/Blogroll">Blogroll</a></em></em></em></li> 

<ul class="heatmap" id="bigheatmap">
	<li><em><em><em><a href="/tag/Allgemein">Allgemein</a>
	</em></em></em></li> 

Notes

1. each tagcloud is of class “heatmap”, but are differentiated by the ids “smallheatmap” (hot tags of the last hour) and largeheatmap (historically popular tags)
2. tags are an unordered list
3. Innovatively, and very cleverly, nested em elements provide the “weight” or “importance” of a tag.
4. It’s not easy to determine how many levels of tag weight there are, as I’m too lazy to count nested em elements :-)

Site Name: BBpress

url

http://support.westciv.com This is an example standard BBPress install. The PHP has been edited to make the font-sizing em based, and to constrain the font sizing to an upper and lower limit. This is done in the PHP.

Tag cloud models

As far as I can determine, the tagcloud shows the historically most popular tags, but given its labeling as “Hot tags” it may reflect the recent popularity of the the tags.

Screenshots

Code conventions

<p class="frontpageheatmap">
	<a href='http://support.westciv.com/tags.php?tag=bbedit' title='2 topics'
	style='font-size: 1.2em;'>BBEdit</a>
	<a href='http://support.westciv.com/tags.php?tag=case_sensitive' title='1 topics'
	style='font-size: 0.9em;'>case_sensitive</a>

Notes

1. the cloud is a paragraph of class “frontpageheatmap”
2. tags are just links, not in a list
3. the relative rank of a tag is shown by inline style, but also indicated by the title attribute on the link element. e.g. title=”1 topics”, title=”3 topics”
4. It’s unclear from the example how many levels of tag weight or rank there are

Site Name: del.icio.us

url

http://del.icio.us/tag/

Tag cloud models

The tag cloud shows a list of the most popular tags, presumably over time.

Screenshots

Code conventions

<div class="alphacloud">
		<a href="/tag/.net" class="lr s2;">.net</a>
		<a href="/tag/advertising" class="lb s1">advertising</a>
		<a href="/tag/ajax" class=" s5">ajax</a>

When the tags are chosen to be shown as a list in order of frequency, rather than alphabeticcally, the class name is “freqcloud”

Notes

1. There are two kinds of cloud — an alphacloud which orders tags alpahbetically, and a freqcloud, which orders them by popularity
2. The links are not in a list
3. There is a root element with a class value, variously “alphacloud” and “freqcloud”
4. The weight of a tag is given by a class value — s1 though s5, giving 5 levels of weight

Site Name: Zoomclouds

url

http://zoomclouds.com/cloud/ZC_Blom/

Tag cloud models

Like most tag clouds, zoomclouds models the historical popularity of a tag.

Screenshots

Zoomclouds, more than most, utlize CSS to style their clouds.

Code conventions

<div class="zoomclouds">
	<span class="tag2"><a href="http://www.zoomclouds.com/tag/ZC_Blom/asian+stocks"
	onmouseout="zoomclouds_cs()" style="font-size: 12px;">asian stocks</a></span>
	<span class="zoomcloudswg">(39)</span>
	<span class="tag1"><a href="http://www.zoomclouds.com/tag/ZC_Blom/analysts"
	style="font-size: 9px;">analysts</a></span>
	<span class="zoomcloudswg">(23)</span>

1. the root element is a div with a class value of “zoomclouds”
2. the count of the tag is added as content after the tag name, with a class of zoomcloudswg.
3. the weight of the tag is given by a font-size value, but also with a clas value of tagN, where N is an integer of 1–4 (at least in the example cited)

Site Name: Squidoo

url

http://www.squidoo.com/browse/tag_cloud

Tag cloud models

Squidoo has three kinds of tag cloud — all ranking popularity. Hot tags, are those which are popular in the last 24 hours, recent tags are popular in the last week, and all time tags are the most popular tags over the life of squidoo

Screenshots

Code conventions

<div id="tagcloud24Display" class="tagcloud">
			<a href="http://www.squidoo.com/tags/advertising" style="font-size:1em">advertising</a>
			<a href="http://www.squidoo.com/tags/art" style="font-size:1.8em">art</a>

<div id="tagcloudWeekDisplay" class="tagcloud">
			<a href="http://www.squidoo.com/tags/advertising" style="font-size:.8em">advertising</a>
			<a href="http://www.squidoo.com/tags/art" style="font-size:2em">art</a>

<div id="tagcloudDisplay" class="tagcloud">
			<a href="http://www.squidoo.com/tags/advertising" style="font-size:1.5em">advertising</a>
			<a href="http://www.squidoo.com/tags/art" style="font-size:2.2em">art</a>

Notes

1. tag clouds all are divs with a class value of tagcloud
2. the three are differentiated by id values, “tagcloud24Display”, “tagcloudWeekDisplay”, “tagcloudDisplay”
3. weight is indicated by inline CSS “font-size” values
4. there appear to be quite a significant number different weights, as indicated by different font-size values

Site Name: Web Connections

url

http://connections.webdirections.org

Tag cloud models

The tag cloud represents the popularity of tags historically

Screenshots

Code conventions

<div class="hTagcloud">
	<ul class="popularity">
		<li class="weight1"><a href="/tags/Access+Testing">Access Testing</a></li>
		<li class="weight1"><a href="/tags/McFarlane+Prize">McFarlane Prize</a></li>

Notes

1. The root element is a div of class “hTagcloud”. Web connections front end developer Cameron Adams and I came up with this as a very early implementation of a potential proposal for a tagcloud microformat, and chose the name by analogy with hCard, etc.
2. this contains an unordered list of class “popularity”. This allows for the extension to other class values for different kinds of cloud
3. each tag is a list item, with a class value of “weightN” where n is an integer value of 1–5