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

jQuery Plugin To Display Your Tumblr Blog's Tags On The Website - Tumblr Cloud Tag
File Size: 6.35 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.