TagCloud information

First of all, thank you for using our tagCloud generator. Below we have some basic information about the functions in this new system.

As you might have already found, we're now even generating flash tagClouds - we will cover this topic here too.

 

Before we get to the basics, here is a brief overview what we have changed since the last overhaul in january 2009.

 

New functions

  • Completely rewritten HTML tag removal engine, yielding a much better result in stripping out html code
  • Word distance calculation and approximation, adding up similar words to one ( i.e. cloud, clouds, cloudy )
  • Logarithmic scaled word clouds
  • Output as HTML and HTML source code
  • Output as animated flashTagCloud
  • Download of animated flashTagCloud
  • Automatically update your on-page flash tag cloud with a small PHP widget
  • System following redirects now
  • Fixed issues with special character encodings
  • Changed design to match the new functionality
  • Added max words in cloud option
  • Added word minimum length option
  • Added auto-coloring of links and their hover state

Basic information

URL input

Here you simply enter the URL that should be converted.

URL link to

If you are using this, you can enter an URL where the single words will link to, when clicked. I.e. if you have a search panel on your page, you could simply link to it ( sample: http://www.yourdomain.com/search?key= ). When the cloud is generated, and you click one of those links, it will take you to the search with the keyword you just clicked attached.

minimum word length

With this option you define how many chars a word must have to be considered being taken into the cloud. One note here, if you set this value too high, you might have no words in your cloud.

minimum word count

This option simply defines how many occurences a word must have to be considered included into the cloud. Same as above, if you set this value too high, you might have nothing to view in your cloud. Adjust it step by step to find the best setting for your cloud.

maximum words in cloud

Imagine a very very long website with loads of content. It's very likely that many words are repeated several times, thus also making their inclusion into the cloud very likely. So you will end up with a mega-cloud consisting of maybe hundreds of words. Just tick this option and set a value for it, so only a bunch of words will be included. The next update of this tool will give you the possibility to choose the words from those being found.

base font size

Here you can adjust the base font size, allowing to in- or decrease the size of the maximum found words. As a tag grows in font size everytime the tag is found in the text of the website, multiple occurences can lead to very big font sizes. If your tags are too big, decrease the base font size. Vice versa, if your fonts are too small due to too less occurences, increase it.

Flash information

First of all, a big thanks for the invention of this nice flash tag cloud to Roy Tanck, www.roytanck.com. We use his flash tag cloud for our output. You can download the sources at his website. The cloud itself is listed under the GPL license.

Automatic update of your on-page flash cloud with tagCloud's XML API

Assumed you have added the downloaded flash tag cloud, and want to update it automatically without manually having to re-download all the stuff, then the next function is for you ( you'll need a PHP enabled webserver ). In your test.html file you can add these lines ( rename the file to a php extension first ):

  <?php
  $cloud_data = "cloud_data.xml";
  
    $b = @filemtime($cloud_data);
    $c = time();
    $x = $c - $b;
    
  if($x >= 86400){
    $f = file_get_contents("http://www.tag-cloud.de/cloudxml.php?url=http://www.artviper.net&linkto=http://www.artviper.com&minWordLength=3&minCount=2&maxCloudWords=0&minSize=10"); 
    
    $fp = fopen($cloud_data,"w"); 
    if($fp){
	    fputs($fp,$f); 
    	fclose($fp); 
     }
  } 
 ?>

What does this code do? Well pretty simple. It checks for the cloud_data.xml file and if it finds it, it checks for its creation time. This timestamp is then compared to the actual timestamp, and if they differ by more or equal than 86400 seconds ( 24 hours ), the script calls our XML API and retrieves a new cloud and stores it on your webserver ( if something has changed on your page by then ).

Of course you will need to replace the url in this sample with your own one. ( http://www.artviper.net -> to the one you own )

Do not call the cloud too often as it will slow down the cloud as well as your webserver. We think a good choice is between 8 and 24 hours.

So, simply add a value between 28800 and 86400 seconds where it says "if($x >= 86400)". Download a demo file here »

JSON API

We've also added a JSON API call, so you can retrieve all tags in JSON Format. For this, use the following code:

  <?php
  
    $f = file_get_contents("http://www.tag-cloud.de/cloudjson.php?url=http://www.artviper.net&linkto=http://www.artviper.com&minWordLength=3&minCount=2&maxCloudWords=0&minSize=10"); 
    

 ?>

 

Download information

When you download the flash cloud you will find 5 files. The flash cloud itself ( imagecloud.swf ), the needed xml file with your tags ( cloud_data.xml ), a javascript file ( swfobject.js ) as well as the test html file ( test.html ) and the readme file ( readme.txt ). Copy this to a directory on your local or online webserver - the cloud will not work when called i.e. from the desktop so use a webserver and call it accordingly.

XML File

The included cloud_data.xml contains your generated links and is responsible for the look and feel of the cloud. The notation you will see will look somewhat like this sample::

 

    
    <tags>
     <a href="http://artviper.net//search.php?q=design" hicolor="0xc42000" color="0xa21200" style="font-size:17.2px">tagCloud</a>
    </tags>
    
   

 

The important part here is the blue one. You see it is build like a normal link, just with the exception it uses the two tags hicolor and color.

These define the basic color as well as the hover state color of the tagCloud tags. Furthermore you see you will need to add color information in HEX notation, with the 0x in the beginning. Well, CSS colors are nothing else, they just utilize the # sign. So pick your most beloved color and simply add it behind the "0x" part.

 

The style tag is used to set the font size of the tag. Use any size you think if you are not satisfied with the cloud output.

swfobject.js

This javascript file is needed to properly inject the flash into the document. If you are using the flash cloud on your page, you will need to copy it to the appropriate location.

The test document

Inside the test.html you can see the following code:

 

     
    <script language="javascript" type="text/javascript">
    swfobject.embedSWF("imagecloud.swf", "flashcontent",
      "280", "280>",
      "9", "",
      {cloud_data: "cloud_data.xml"},
      {wmode: "transparent", menu: "false", quality: "high", scale:"noscale"}
      );
    </script> 
     
  

 

The important parts are as following. The first important tag in the script is "flashcontent". This defines the ID of an element in your html document where the cloud should be displayed later on. Adjust that in your real-life document accordingly.

 

Next comes 280 twice - this is the height and width of the cloud. Please note, due the way the cloud works these both values cannot be different. If you set the height to 300, setting the width to something else than these 300 will have no effect.

 

The last one is "cloud_data.xml" - the file that holds the links and their style as mentioned before. Point your site to the location of this file, otherwise it won't work and the cloud will display nothing.

More questions?

If you have more questions, ideas or anything you want to be included here, then feel free to drop us a line at: admin@artviper.net. Thanks!