tumblrBadge – a Tumblr badge script

I’m sure there are a few Tumblr fans out there, and if you are, naturally you’ll want a Tumblr badge to present it in your own web page? :-)

The Tumblr badge

The Tumblr Badge offers you a way to present your text messages, photos, quotes, links and chat posts. It uses JSON to retrieve the information (with the help of the easy-to-use Tumblr API), and then transforms the JSON data into HTML and inserts into the web page.

The advantages of using my Tumblr badge script is that instead of having a document.write script which stalls the loading of the web page, this badge uses JSON and offers you a number of settings to customize your badge presentation.


There are a few basic settings for setting up the Tumblr badge:

  • User name.
  • Number of items to show.
  • Id of the HTML element to add the generated HTML to.
  • Width for images.
  • Whether to use a short or a long publishing date.
  • Time to wait before the JSON call is cancelled.

Example code

Here’s an example of the possible settings in the code:

// User settings
var settings = {
	userName : "robertnyman", // Your Tumblr user name
	itemsToShow : 10, // Number of Tumblr posts to retrieve
	itemToAddBadgeTo : "tumblr-badge", // Id of HTML element to put badge code into
	imageSize : 100, // Values can be 75, 100, 250, 400 or 500
	shortPublishDate : true, // Whether the publishing date should be cut shorter
	timeToWait : 2000 // Milliseconds, 1000 = 1 second

Download the Tumblr badge

If this sounds interesting, go ahead and download the Tumblr badge. Happy badging!


I’ve put together a simple demo page of the tumblrBadge in action.

Posted in Developing,JavaScript,Technology |

Leave a Reply

Your email address will not be published. Required fields are marked *