jQuery Plugin To Display Your Tumblr Blog's Tags On The Website - Tumblr Cloud Tag

Tumblr Cloud Tag is a jQuery plugin used to retrieve all the available tags from your Tumblr blog and display them in an unordered list for further usage.

How to use it:

1. Include jQuery javascript library and jQuery tumblr cloud tag plugin in your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./jquery.tumblr.cloud-tag.min.js"></script>

2. Create an UL element for the Tumblr's tags.

<ul id="cloud-tag">
</ul>

3. Register an App here and insert the OAuth Consumer Key into your javascript. The entire javascript codes should be like this.

$(document).ready(function(){
$('#cloud-tag').cloudTag({
apiKey: 'EoIphLAekSSSFH1PMexsVUuad8ow13YywzkHRhpCBoTNbc2t3k',
tumblrSite: 'amazing-jquery-plugins.tumblr.com',
autoSize: true
});
});

4. The default options.

$(document).ready(function(){
$('#cloud-tag').cloudTag({
// tumblr API key
apiKey: '',

// Your Tumblr Blog's URL
tumblrSite: location.hostname, 

// show a number of each tags used in posts
showCount: false, 

// left delimeter for a number of tags
countDelimeterLeft: '(', 

// right delimeter for a number of tags
countDelimeterRight: ')', 

// name or count. 
// sort the list of tags by number of occurance or alphabeticaly
sortBy: 'name', 

// change font size according to tag frequency
autoSize: false, 

// how many tags to show
maxTags: null
});
});

5. Style the tags list in the CSS.

#cloud-tag {
...
}
#cloud-tag li {
...
}
#cloud-tag a {
...
}
#cloud-tag a:hover {
...
}
#cloud-tag a.freq-1 {
...
}
#cloud-tag a.freq-2 {
...
}
#cloud-tag a.freq-3 {
...
}
#cloud-tag a.freq-4 {
...
}
#cloud-tag a.freq-5 {
...
}

Change log:

2015-10-15

• Add maxTags parameter to change number of tags to show

---

This awesome jQuery plugin is developed by mariodian. For more Advanced Usages, please check the demo page or visit the official website.