A bit late to the party, just noticed that the tag cloud was broken for me as well. You now have to download the JSON yourself, then build your tag list (or tag cloud) from it. Alternatively, you could of course also build something in PHP etc. server-side, but I'm assuming that you want to stick with a client-side JavaScript-based solution.
The steps are:
- Download JSON.
- Parse JSON.
- Build something from it.
To download the JSON, I'd normally use an XMLHttpRequest(), but that won't work here due to cross-site scripting protections. So I just resorted to calling the JSON API with a function callback in an HTML <script> tag (I've used the username delicious in this example):
<script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousTags"></script>
This script tag will take care of steps 1 and 2 and will then call the printDeliciousTags function with the contents of the JSON as parameter so we can build something from it.
Here's a very basic implementation that sorts the tags alphabetically and print them as an unordered list:
var username = "delicious";
var ignoreFiletypes = true;
var minCount = 1;
var tagURLPrefix = "http://delicious.com/" + username + "/";
function printDeliciousTags(tags)
{
var out = "";
var visibleTags;
// find all tags matching our min count and exclude filetypes as needed
visibleTags = [];
maxCount = 0;
for (tag in tags) {
if (tags.hasOwnProperty(tag)) {
if (tags[tag] > maxCount) {
maxCount = tags[tag];
}
if (
tags[tag] >= minCount &&
(!ignoreFiletypes || tag.indexOf(":") == -1)
) {
visibleTags[visibleTags.length] = tag;
}
}
}
// sort the tags alphabetically (case-insensitive)
visibleTags.sort(function (a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
});
// print the tags
out += '<ul>';
for (var i = 0; i < visibleTags.length; i++) {
var tag;
tag = visibleTags[i];
out += '<li><a href="' + tagURLPrefix + tag + '">';
out += tag + ' (' + tags[tag] + ' bookmarks)';
out += '</a></li>';
}
out += '</ul>';
document.getElementById("deliciousPlaceholder").innerHTML = out;
Complete HTML example for a basic unordered list:
<html>
<head>
<title>Delicious JavaScript Tag API Replacement (Basic List)</title>
</head>
<body>
<div id="deliciousPlaceholder"></div>
<script type="text/javascript">
var username = "delicious";
var ignoreFiletypes = true;
var minCount = 1;
var tagURLPrefix = "http://delicious.com/" + username + "/";
function printDeliciousTags(tags)
{
var out = "";
var visibleTags;
// find all tags matching our min count and exclude filetypes as needed
visibleTags = [];
maxCount = 0;
for (tag in tags) {
if (tags.hasOwnProperty(tag)) {
if (tags[tag] > maxCount) {
maxCount = tags[tag];
}
if (
tags[tag] >= minCount &&
(!ignoreFiletypes || tag.indexOf(":") == -1)
) {
visibleTags[visibleTags.length] = tag;
}
}
}
// sort the tags alphabetically (case-insensitive)
visibleTags.sort(function (a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
});
// print the tags
out += '<ul>';
for (var i = 0; i < visibleTags.length; i++) {
var tag;
tag = visibleTags[i];
out += '<li><a href="' + tagURLPrefix + tag + '">';
out += tag + ' (' + tags[tag] + ' bookmarks)';
out += '</a></li>';
}
out += '</ul>';
document.getElementById("deliciousPlaceholder").innerHTML = out;
}
</script>
<script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousTags"></script>
</body>
</html>
Complete HTML example for a tag cloud:
<html>
<head>
<title>Delicious JavaScript Tag API Replacement (Tag Cloud)</title>
</head>
<body>
<div id="deliciousPlaceholder"></div>
<script type="text/javascript">
var username = "delicious";
var minFont = 14;
var maxFont = 36;
var ignoreFiletypes = true;
var minCount = 1;
var tagURLPrefix = "http://delicious.com/" + username + "/";
function printDeliciousCloud(tags)
{
var out = "";
var maxCount;
var factor;
var offset;
var visibleTags;
// find all tags matching our min count and exclude filetypes as needed
visibleTags = [];
maxCount = 0;
for (tag in tags) {
if (tags.hasOwnProperty(tag)) {
if (tags[tag] > maxCount) {
maxCount = tags[tag];
}
if (
tags[tag] >= minCount &&
(!ignoreFiletypes || tag.indexOf(":") == -1)
) {
visibleTags[visibleTags.length] = tag;
}
}
}
// sort the tags alphabetically (case-insensitive)
visibleTags.sort(function (a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
});
// the tag cloud looks nicer if we use a logarithmic function, so fit
// one to our configured font sizes and min count
factor = (minFont - maxFont) / (Math.log(minCount) - Math.log(maxCount));
offset = maxFont - (factor * Math.log(maxCount));
// print the tag cloud
for (var i = 0; i < visibleTags.length; i++) {
var size;
var style;
var tag;
tag = visibleTags[i];
size = offset + (factor * Math.log(tags[tag]));
style = 'text-decoration:none; color:#73adff; font-size:' + size + 'px;';
out += '<a href="' + tagURLPrefix + tag + '" style="' + style + '" title="' + tags[tag] + ' bookmarks">';
out += tag;
out += '</a> ';
}
document.getElementById("deliciousPlaceholder").innerHTML = out;
}
</script>
<script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousCloud"></script>
</body>
</html>
