How to make a tag cloud

Posted on 22 Jan 2008 9:39pm by Aleks Bochniak

Tag clouds or 'tagging' has been around used the web for a couple of years now, it's not relatively new or unique. However, using tags and/or tag clouds on your web-site can add value to your content and be beneficial to your users.

What is a tag cloud exactly? Wikipedia has a good definition. A simple example is just to your right in the side column under the heading 'Tags used'.

Creating one of these can be a little tricky in MySource Matrix, especially the GPL version (no lovely search module here). Since we can't use php code in our pages, we have to use javascript to do the hard work for us.

Some clarification

There are 3 different ways to tag a page or asset with terms. One way is to create a lexicon of terms in a thesaurus and use the tagging screen to select these terms, however it's not possible to print out which terms are used on the front-end and their associated weighting. Kind of disappointing really.

Screenshot of creating new metadata field type

The other two ways involve metadata. One using a thesaurus as a metadata field type, or using a multiple text field type. I prefer the multiple text option, as it allows me to enter free text as terms and removes the hassle of maintaining a definitive list separate to my content.

Building the cloud

First thing we need to do is to create a metadata schema with a default section and one metadata field called 'tags' of type "multiple text field".

Secondly create a few pages in a folder, apply our metadata schema and tag some terms. I have a few dummy pages which I have tagged with some latin text.

Below is part of a screenshot of one page's metadata screen.

Screenshot of a sample metadata screen

Next we need to create an asset listing page called 'tag cloud' to find all the pages in the folder. Nothing tricky needs to be defined for the asset listing, just the types of assets to list "Standard Page" and root node; being your folder.

I would suggest for all the divs created and used in this example be of type "Raw HTML" and style "Raw HTML". On the Type Formats -> Default Format page contents enter the following without trailing spaces:

%asset_metadata_tags%;

This tag should spit out something like (with the semicolon at the end):

lorem; lipsum; consectetuer; platea; nunc; morbi; mauris; venenatis; donec; primis; nulla; leo id; morbi; arcu; nunc; aliquam; mollis; elementum; commodo; nulla; tristique; pretium; ultrices; lorem; nunc; ultrices; leo; accumsan; nulla; condimentum; cursus; quam; posuere; curae; ipsum; primis; lorem; leo id; nulla; ultricies; libero; loboritis; non; ante; morbi; tristique; senectus; pellentesque; aliquet; curae; nonummy; nulla; suscipit; magna; lorem; purus; sapien; cras; ligula; iaculis; suscipit; commodo;

Now we need some javascript to split that long string into an array of unique terms, ordered alphabetically and their frequency counted.

Javascript comes to the rescue

In my Design I am importing a javascript file which contains 3 functions that help sort the array of terms and assign a css class to the tag link.


function unique(x) {   
  tmp = new Array(0);   
  for(i=0;i<x.length;i++) {      
    if(!contains(tmp, x[i])) {         
      tmp.length+=1;         
      tmp[tmp.length-1]=x[i];      
    }   
  }   
  return tmp;
}

function contains(x, e) {   
  for(j=0;j<x.length;j++) {
    if(x[j]==e) {
      return true; 
    }
  }  
  return false;
}

function getTagClass(z) {   
  var tagClass = "smallestTag";   
  if(z==smallest) {   
    tagClass="smallestTag";   
  } else if(z==largest) {   
    tagClass="largestTag";    
  } else if(z >= large) {    
    tagClass="largeTag";    
  } else if(z <= large && z >= medium) {    
    tagClass="mediumTag";    
  } else if(z <= medium && z >= smallest) {    
    tagClass="smallTag";   
  }   
  return tagClass;
}

In the Page Contents of the 'tag cloud' asset listing page, we need to pull in the list of tags with the %asset_listing% keyword and assign it a javascript string for processing. This string then needs to be split into an array, duplicates removed and sorted alphabetically.


<script type="text/javascript">
<!--
var a = '%asset_listing%';
var split = new Array();
split = a.split('; '); //string to array
var unique = unique(split);
unique.sort(); //sort alphabetically

We also need to find the number of times (frequency) a tag term is being used so we can assign a font size (with a css class) to it.


var frequency = new Array();
var counts = new Array();
var largest = 0;
var smallest = 1;
/* create array of tag counts and find sizes */
for(var i=0; i<unique.length-1; i++) {
   var mullet=0;
   unique[i] = unique[i].replace(/^\s+|\s+$/g, '') ;
   for(var j=0; j<split.length; j++) {
      if (unique[i]==split[j]) {
          mullet=mullet+1;
      }
      frequency[i] = mullet;
   }
}

Now, we need to do some simple maths to find the largest times a term has been used, the medium value, distribution and difference. The size of the tags will be from the smallest (1) to the largest (we still need to find it!).


for(var d=0;d<frequency.length;d++){
   largest=Math.max(largest,frequency[d]); //find largest
}
var diff = largest-smallest; //difference, smallest is always 1
var dist = diff/3; //distribution
var large = 1 + (dist*2);
var medium = 1 + dist;

The following code is used to write out a paragraph with the tags linked to Google blogsearch, and style the link with their relevant size.


/* continue */
if(unique.length != 0) {
  document.write('<p id=\"tags\">');
  for(var i=0; i<unique.length-1; i++) {
     var z=0;
     for(var j=0; j<split.length; j++) {
        if (unique[i]==split[j]) {
            z=z+1;
        }
        counts[i] = z;
     }
     var size = getTagClass(z);
     document.write('<a class=\"'+size+'" href=\"http://blogsearch.google
.com/blogsearch?q='+unique[i]+'\">'+unique[i]+'</a> ');
  }
  document.write('</p>');
}
//-->
</script>

So, that's basically it. There are probably a few ways to optimise the code and behaviour, but that's an exercise to come later when I have time. As a quick start it works very well.

Screenshot of a sample tag cloud

Above is a image of a tag cloud I created using this code.

Comments

There are 6 comment(s) so far... say something?


24 Jan 2008 6:49am

Good write up.


04 Feb 2008 11:05pm

Great post, very helpful and will be implemented on a few sites here I've got on the run.

Thanks!


19 Sep 2008 2:28am

It seems your code always removes the last item passed to it. This also means the first item alphabetically is displayed last. Have you a fix for this?


20 Sep 2008 12:08pm

Do you have a page that puts all the code together? So the novice can learn? there seems to be some key gluecode missing


25 Sep 2012 10:07pm

hay txa գրել է.ara de mi greq voch mi ban et temayov ete cheq uzum vor qdnanaten u sax xosan , sax duq eq anum amen mekd ira blogum saytum mi qani hat kak minimum et masin hodvaca drel u sax sksum en grel , ham du hamy hanum eq hamel boxoqum gone mi boxoqeq ..vor duq chgreq vabshe vochmekel chi xosa haenayn deps internetum , duq eq npastum, u karelia asel taracum , mardiq el comment en anum lav en anum mi greq tox chanen


25 Oct 2015 7:26am

27ec29a e8afb4e98193efbc9a936cb4eVery good morning! Today, my speceh is I am the element of the Green Olympics'. The Olympic Games will be held in our country in two years' time. Green Olympics' is among the Three Themes of Beijing 2008 Olympic Games. The Beijing government had created a good effort so that you can protect the environment, build far more Green project', maintain the ecological balance, push the recycling economy, and protects the water resource. For instance ,the government will be building new hotels ,an immense stadium ,in addition to a new Olympic-standard swimming pool ,and much more building will be built outdoors the capital and can be termed Olympic City' .My residence is there ,so I'm searching forward towards the Olympic. As a Chinese, as a Beijing high school student, we should certainly play an active role within the actions aimed at the realization of Green Olympics. So we should certainly start it from ourselves, our loved ones, our associates and other people today about us. Even though our country is incredibly beautiful and modern now, it has any predicament .I normally see cars producing smog on the street. And within the bathrooms, I see students leaving the water tap on after using them. Not just the young people today, but also the elderly ones throw items everywhere without having considering, ite2809ds wrong, even inside a beautiful park. These items are taking location every day, even in modern cities like Beijing. So, lete2809ds begin to act! Very first of all, start with the items about you. Done2809dt throw rubbish onto the road. Done2809dt speak loudly when you will be outdoors. Turn off the water tap after using it. Go to school by bike or by bus as an alternative to by personal car. Save your pocket money and contribute to environmental protection organizations. Following washing the clothes, we can use it to flash the toilet, and we can stop somebody from demolishing environment. For me, I normally pick up rubbish and throw it into a trashcan. I collect waste paper or bottles for recycling. I plant far more trees and flowers, and so on. We should certainly start from every little thing about us to definitely understand the Green Olympic'. Wee2809dre grateful, because the emblem of the Beijing 2008 Olympic Games is really a precious treasure dedicated towards the Olympic Movement from the people today of China. Express the spirit of Olympic, publicize the theme of e2809cGreen Olympice2809d, and let Beijing definitely reaches the e2809cGreen Olympice2809d in 2008. This can be the responsibility of anyone who loves peace. And it can be also the responsibility of our Beijing high school students!19afbb

Leave a comment

Name (required)

Email (required)

Website

Your comment

Security key
Enter the above security word

I am human