Tumblr Tag Cloud Tutorial
I wanted a tag cloud for my personal Tumblr but couldn’t find a good one. There seem to be three main options: Heather Rivers’ which didn’t load for me, drunkonschadenfreude’s which doesn’t link to your tag pages, and Pearl Trees’, but you have to join them to use it. The tutorials I found mostly revolve around using jQuery or require you to host your own Tumblr blog and use PHP or whatever, so I ended up writing my own little script.
I was so happy with it I made a tag cloud generator you can use. The generator is pretty self explanatory. I figured the easiest way to use it would be to stick your blog name and API Key in a form, and there’s some basic customisation for sorting, the minimum tag frequency you want to include in your tag cloud, etc. You essentially copy and paste the code for the generated tag cloud into your page. I’ve put mine in the sidebar.
However it might not be quite perfect for everyone, so I decided to write a little tutorial so you could stick the code in your own blog and customise it for your own use.
The code is simple and pretty self explanatory, and you can really just copy it and replace the capitalised text with the correct values for you.
What annoyed me about many of the guides/tutorials on the internet that tell you how to make a Tumblr tag cloud is that they tend to use jQuery.. Here I use fetch to fetch your blog posts, which is really easy and straightforward.
fetch('https://api.tumblr.com/v2/blog/YOURTUMBLRNAME.tumblr.com/posts?api_key=YOURTUMBLRAPIKEY').then(response =>{
…and now you can probably also see why I’ve made it so you copy and paste the generated HTML on the Tag Cloud Generator instead of the javascript itself - your Tumblr API Key is exposed. I assume that you don’t host your own Tumblr blog and just want to casually stick some code in it. What you can do if you don’t want to keep going to the Tag Cloud Generator is set up a basic HTML file like this on your laptop or phone or whatever and just run it whenever you need to update your tag cloud. Also remember that Tumblr’s imposed a rate limit, so you probably don’t want to just stick the javascript on your page anyway.
Anyway.
After it fetches your blog posts and all is good…
not good
if (response.status != 200) {
console.log('error', response.status)
return
}
good
response.json().then(function(data) {
const {posts} = data.response
…it goes through all your posts and pushes all of your tags into a giant array allTags…
const allTags = []
posts.forEach(function (post, index) {
allTags.push(...post.tags)
})
…and then counts all the unique tags.
const tagCount = allTags.reduce((acc, tag) => {
acc[tag] = (acc[tag] || 0)+1
return acc
}, {})
Then it sorts your tags, in this case in descending order, but at this point you can sort it in other ways too: in ascending order, randomly, alphabetically, etc.
const sortedTags = Object.keys(tagCount)
.map((key) => [key, tagCount[key]])
.sort((a,b) => b[1]-a[1])
This point is probably where you’ll want to customise the most. The tag list is filtered to show only the tags above a minimum number of posts (replace MINIMUMENTRIES with the number you want), but you can also filter it to exclude tags with certain values (eg. if all your text-based posts are tagged as ‘text’ and that isn’t a useful tag for your readers, you can filter out value[0] == ‘text’).
let fontsize
const tagList = sortedTags
.filter(value => value[1] > MINIMUMENTRIES)
A common feature of tag clouds is that tags that recur more are often in a bigger, bolder font. I’ve split my own tags into three groups and applied different classes on each: a default ‘middle’ group with an average font size, infrequent tags in a small font and the most used tags in the largest font. Replace UPPERLIMIT and LOWERLIMIT with the values you want, or split the tags into more groups. Then style the classes with css.
.map(value => {
if (value[1] > UPPERLIMIT) { fontsize = 'font3' }
else if (value[1] < LOWERLIMIT) { fontsize = 'font1' }
else { fontsize = 'font2' }
The tag list is then returned as a list, which you can style. I’ve gone for a cluster of tags without line breaks in between each list item.
return '<li><a href=http://YOURTUMBLRNAME.tumblr.com/tagged/'+value[0]+' class='+fontsize+'>'+value[0]+' ['+value[1]+']</a></li>'
})
Last of all, the tag cloud is wrapped up in an unordered list in a div with the ID tagcloud, and gets written into a div (’#generatedTags’ in this example), but obviously you can write it into whatever div you want, and you could have an ordered list too.
document.getElementById('generatedTags').innerHTML = <div id=tagcloud><ul>"+tagList.join(' ')+"</ul></div>"
})
})
}
Don’t forget to call the script!
As you can see in this tutorial the Tumblr API is pretty easy to use. If you have a look at the Tumblr API docs, you’ll see it’s pretty easy to branch off this tag cloud generator example and pimp your blog in other ways with data from the Tumblr API.
Have fun! Feel free to ask me any questions you might have.