After having to roll my own tag cloud generator for my blogs (I'm old-school, so I don't have access to a blog layout engine with prebuilt widgets), I thought I'd clean up the code and share it. So, it's in this new repository I just created on GitHub.
Usage is pretty simple; copy the JS (and optional CSS) to your server, and link to them from your blog code like so:
<style type="text/css">
@import "http://www.myblog.com/css/tagCloud.css";
</style>
<script type="text/javascript" src="http://www.myblog.com/js/tagCloud.js"></script>
Once you've got it loaded, there are only two steps to create a new tag cloud: first, you need to populate a JavaScript object with the tag information structured like an associative array, with the tag names as properties and the instance counts for each tag as its hash value. Ideally this will be retrieved via an AJAX/XHR request, but in a pinch you can hard-code it (but that's not terribly useful, since you'd have to constantly update it whenever you post something new):
// hard-coded, pure JavaScript version:
tags = {
"JavaScript":17,
"Conferences":2,
".NET":1,
"GeoWeb":1,
"Site news":1,
"snippets":1,
"Dojo":16
};
function init_tagCloud(parentId) {
var parentDiv = document.getElementById(parentId);
if (parentDiv) {
var cloud = makeCloud(tags, "http://www.myblog.com/labels/", 0,1,4,' ');
parentDiv.appendChild( cloud );
}
}
window.onload = function() {
init_tagCloud('target_div');
}
// or, Dojo-powered and XHR-populated (substitute JS lib of your choice):
dojo.addOnLoad(function() {
dojo.xhrGet({
url: "getBlogCategories.php",
handleAs: "json",
load: function(data){
tags = data;
var cloud = makeCloud(tags, "http://www.myblog.com/labels/", 0,1,4,' ');
dojo.byId('target_div').appendChild( cloud );
}
});
});
The parameters on the makeCloud() method are:
- tags: the object hash mentioned above
- baseUrl: the URL that should serve as the base for all tag links
- minCount: minimum number of times tag must be used to show up in the cloud (defaults to 0)
- minSize: minimum font size for tags in the cloud (defaults to 1em)
- max: maximum font size for tags in the cloud (defaults to 4.5em)
- delim: delimiter(s) to insert between tags in the cloud (defaults to 1 space)
- shuffle: boolean value that controls if the tags get shuffled in random order, or sorted (defaults to false)
That's about all there is to say about it. The basic math for determining the tag size is taken almost verbatim from the Wikipedia page on tag clouds, just slightly tweaked to allow for a minimum font size. Surely there are other customizations that could be made, and ideally this would be implemented as a Dojo/plugd-style plugin. I'll leave that for an exercise at a later date.
--Edit: I inadvertently forgot to strip out the <script> tags from the sample code blocks up above, and they were getting run! D'oh!
Labels: Dojo, JavaScript, snippets