tumblrBadge - a Tumblr badge script

Published on Friday, September 19th, 2008

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.

Settings

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!

Update

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

65 comments

  • Sid
    September 19th, 2008 at 22:52

    Simply awesome, was exactly what I was looking for weeks.
    I’m almost tempted to ask if it was possible to filter by tag … but for now is enough ;-)
    thanks a lot!

  • Robert Nyman - author
    September 22nd, 2008 at 20:16

    Sid,

    Great, I’m glad that you like it! :-)
    Filtering by tags isn’t planned for now, but might show up in a possible future version.

  • mdmadph
    September 22nd, 2008 at 20:16

    Hey, cook work! I had played with making a tumblr badge script a while back, but yours is better so I’ll use it. There’s just not enough support out there for Tumblr stuff.

  • Robert Nyman - author
    September 22nd, 2008 at 20:17

    mdmadph,

    Thanks! And yeah, I agree, more Tumblr things for the people! :-)

  • Anders Ytterström
    September 24th, 2008 at 9:47

    Funny I’ve totally missed tumblr. I shall start tumble for my music and paintings. Thanks Robert! :)

    The badge will most likely be used too!

  • Robert Nyman - author
    September 24th, 2008 at 10:50

    Anders,

    Great! :-)

  • My Tumblr — The Captain’s (B)log
    September 26th, 2008 at 6:02

    [...] tumblr plugin code is a wonderful little bit of code from Robert Nyman — I had been working on my own Tumblr include script a while back, but was going at a from a [...]

  • Claire
    October 1st, 2008 at 13:10

    Ugh.. how do I use the badge? script code doesn’t seem to work…

  • Robert Nyman - author
    October 1st, 2008 at 15:12

    Claire,

    There’s a simple demo page where you can see it in action. Download the script file, and change the user name and other settings to what you want.

  • niko
    October 14th, 2008 at 15:37

    I like it. Still two things:

    * I think it would be even better, if you could call the function explicitly and pass the username (and perhaps some other options) to it. So you could include the javascript into the header of your page and then include one or more tumble blogs by just calling the function.
    * And it would be nice to stick to the structure that the official tumblr badge uses, especially css classes to that the css works in the same way for the official badge and your badge (besides the addition of the date class).

    Regards, Niko.

  • Robert Nyman - author
    October 14th, 2008 at 19:26

    niko,

    Thanks for the feedback. In terms of multiple badges, it could be an option, but I didn’t see it necessary at the time since there wasn’t such a big demand for it.

    When it comes to CSS classes, I chose the ones I seemed most fit for what they were to be used for.

    However, the JavaScript badge is open source, so feel free to tweak it to your needs!

  • bcardoso
    October 23rd, 2008 at 6:45

    thanks! found it very useful.

  • Robert Nyman - author
    October 23rd, 2008 at 9:02

    bcardoso,

    Great, good to hear!

  • Benp
    November 23rd, 2008 at 1:08

    Really nice - thanks!
    Is there any way to display the post titles too?

  • Benp
    November 23rd, 2008 at 5:30

    Hmmm… And for some reason, nothing shows up in IE - no problem at all in other browsers, Mac and PC :-/

  • Robert Nyman - author
    November 24th, 2008 at 21:10

    Benp,

    No setting, I’m afraid. You need to hack the script to get that.
    Make sure you don’t get a JavaScript error (Firebug is recommended for checking that).

  • Benp
    November 30th, 2008 at 4:27

    Thanks for your reply, Robert. Not having the titles isn’t so bad - there are workarounds - but I still can’t get the feed to show at all in any version of Explorer. And unfortunately I know next to nil about javascript, so I’ll probably have to settle for a different solution :-/
    Thanks anyway,
    B.

  • Giulietta
    December 9th, 2008 at 20:17

    Is there a way, to display just posts with a certain tag? Or of a certain type (photo, link..) at least?
    That function would be great!

    What I’d love to be able to do is, diplaying a badge, but just the photos (at best set as background, so that one would be able to adjust them via CSS..) of recent image posts! And nothing else…

    :)

  • Robert Nyman - author
    December 9th, 2008 at 20:27

    Giulietta,

    There’s no setting, but if you go to line 43 in the script, it reads like this:

    if (/regular|photo|quote|link|conversation/.test(post.type)) {

    Just remove the types you’re not interested in.

  • Simon Iddol
    December 19th, 2008 at 16:46

    This is very nice Robert!
    But I have a lame question, I’m new to tumblr :D
    I wanna use this badget for our community tumblr blog, not for my default blog, the username is the same but the urls and the blogs are different. :-/ How can I set it up in this case?

    THX in advance

    Simon Iddol
    http://instantjoy.tumblr.com/

  • Robert Nyman - author
    December 19th, 2008 at 17:20

    Simon,

    Off the top of my head, I don’t know. You need to look in the JavaScript file and replace any URLs to the ones which work for you.

    Good luck!

  • Simon Iddol
    December 19th, 2008 at 21:31

    THX Robert, no worries I’ll try to find out ;)

  • Gregory La Vardera
    February 2nd, 2009 at 0:37

    hmm, don’t really know what I’m doing here. I want to get a string of thumbnails from my tumblr blog to show up in sidebar of my main blog - its at blogger.

    So I created a javascript/html gadget in the sidebar, put the sample code from your demo page in there, with the src url revised, edited the script and put that on my server space at the correct url. But nothing is showing up in he sidebar. I see the title for the object but the script is not loading the images.

    Not sure what I should be using for the Tumblr ID. I tried the id that appears in my tumblr url, and I also tried my account ID which is my email address with no luck.

    Also, I have several tumblr blogs under my ID - how will I choose which one shows in the sidebar?

  • Gregory La Vardera
    February 2nd, 2009 at 0:43

    Awesome - I figured it out. I forgot the div line from the sample.

    I’m in good shape now and its working perfectly!

  • Robert Nyman - author
    February 2nd, 2009 at 10:34

    Gregory,

    Great to hear!

  • Gregory La Vardera
    February 2nd, 2009 at 15:47

    Yes Robert, thanks, its working. I still have a few questions though:

    - I used my account ID which is my email address. Does this feed from just my primary tumblr, or will it take in the feed from all my tumblr blogs on my account? How can I specify which tumblr to feed from? Can I use the name that is in the tumblr url?

    - I know tumblr makes pre-sized thumbnails for us, but the 100px is really too small, and 250 is too big. I’d love to be able to diaplay a square crop sort of like what tumblr shows in your archive. Anyway to call that? I’ve put the url to the blog in on this comment if you want to look.

    - With the 100px image and the wider sidebar the associated text is beginning on the same line as the image instead of on the following line. Is there anyway to force a return after the image?

  • Robert Nyman - author
    February 2nd, 2009 at 16:34

    Gregory,

    The name in the URL should work, as far as I know.

    In regards to image size, those are the sizes provided by Tumblr. If you want something in between two of those values, I’d recommend choosing the larger one and then use CSS to scale it down.

    To make line breaks etc, use the recommended CSS code at http://code.google.com/p/tumblrbadge/

  • Gregory La Vardera
    February 3rd, 2009 at 16:25

    OK, so if I’m understanding you right I have to create a CSS definition like the samples on the page you linked ie:

    .tumblr {
    list-style: none;
    width: 150px;
    margin-bottom: 1em;
    padding: 0;

    and put this in the CSS definition header of the blog template. I think I understand that - but I’ve no idea what to put in here to scale the 250px images to 150px, nor how to make the line breaks. I’m just out of my competency here…

  • Gregory La Vardera
    February 3rd, 2009 at 17:00

    ok - got a little coaching from my office mate. I used your entire CSS def from your sample - that took care of the line returns.

    Added width: 150px; to the image def - for now I’m upscaling the 100px images to speed the download.

    And styled the date text to match my blog posts. I think I’m good now.

  • Jermy
    February 4th, 2009 at 1:40

    I am also having problems with displaying the badge in IE. Could you please help/advice?

  • Robert Nyman - author
    February 4th, 2009 at 8:11

    Gregory,

    Good to hear.

    Jermy,

    Please take the exact code in the demo page and work it from there.

  • Jermy
    February 4th, 2009 at 16:47

    I did that but what can I do when the demo page isnot even working in IE7?

    Thank you for your quick reply :-).

  • Robert Nyman - author
    February 5th, 2009 at 9:15

    Jermy,

    Hmm, not sure if this has something to with tumblr’s API, but it seems like IE, for some reason, believes it to be a privacy risk and blocks it. No matter the settings in IE, I can’t get around it.

    I do the same thing with Friendfeed hare in my web site above, and that works just fine in IE as well.

    Therefore, try adjusting your settings in IE and/or contacting tumblr and see if they have any idea.

  • Jermy
    February 5th, 2009 at 12:03

    Thank you but I am not quite sure whether tumblr will do anything about this since this is a 3rd party app.

    It seems to me that your code isnot working properly with IE whether this is due to an error by IE, tumblr and/or your app. This doesnot change the fact that your app isnot working with IE and that you should at least write this down in your “RTFM”-file.

    Anyway, I hope you will take a closer look at this because I do enjoy your app and would like continue using it.

  • Robert Nyman - author
    February 5th, 2009 at 12:22

    Jermy,

    It’s not about my app, as far as I can see, it’s the data they have changed for their public API for any service using it. And, given some security settings in IE, it does work in IE.

    Therefore, it totally depends on each user’s settings in their machines, meaning it’s not clear at the moment what to add to the manual.

  • Robert Nyman - author
    February 5th, 2009 at 13:02

    Jermy,

    I looked over the code, and there’s one additional way to get the content and to get around the security warning in IE. For me it works fine in IE.

    Please test the demo (make sure to clean your cache/do a hard reload with Ctrl + F5 in IE) now and download the new version.

  • Jermy
    February 5th, 2009 at 13:31

    Thank you for your time and effort, Robert. It works :-).

    version 1.1 has been ‘installed’ and damn it looks good. Keep up the good work!

  • Robert Nyman - author
    February 5th, 2009 at 14:15

    Jermy,

    Great to hear!

  • Mr Colour Drunk
    February 9th, 2009 at 23:47

    How would i change the java script so that it only shows so many lines of the post, kinda like a description. prob a real noob question!

  • Robert Nyman - author
    February 9th, 2009 at 23:55

    Mr Colour Drunk,

    There’s no setting for it. Look in the code for a line that looks like this:

    listItem.innerHTML += text;

    Change it to:

    listItem.innerHTML += text.substring(0, 50) + "...";

    That should give about the desired effect you’re after.

  • Joe J
    February 18th, 2009 at 9:21

    Has anyone, or does anyone use this on their MySpace pages? And do you know if it works??

  • Claire
    February 25th, 2009 at 19:35

    What if I only want to show photo updates?

  • Robert Nyman - author
    February 25th, 2009 at 23:52

    Joe,

    Sorry, no idea.

    Claire,

    At the moment, that is not supported. To get that you need to alter the JavaScript.

  • tbone
    March 2nd, 2009 at 12:45

    Your project makes Tumblr far more useful. Thank you!

  • Robert Nyman - author
    March 2nd, 2009 at 13:26

    tbone,

    Thank you!

  • Lukas
    April 6th, 2009 at 3:19

    Thank you for your great work!

  • Antonio
    April 13th, 2009 at 10:57

    Congrats on great work
    beautiful i can see it working on Firefox
    dont use IE by common sense
    but only get blank page on Chrome
    which is sad
    and suprising being a google code and everything
    cest la vie
    Cheers

  • Robert Nyman - author
    April 14th, 2009 at 21:30

    Lukas,

    Thanks!

    Antonio,

    Thank you! I’ve just tested it on the latest version of Chrome (1.0.154.53 at the time of writing), and it works fine. Please download the latest version and test.

  • 3×6 » Blog Archive » tumblrBadge - a Tumblr badge script - Robert’s talk - Web development and Internet trends
    April 16th, 2009 at 2:53

    [...] Read more… [...]

  • Darren
    May 3rd, 2009 at 2:33

    Badge is great, exactly what I was looking for… but is there a reason things seem to timeout? Sometimes only a few images load, other times, none at all… really sporadic, never the same images… Is it possible to load the script before the rest of the page?

  • Robert Nyman - author
    May 3rd, 2009 at 19:25

    Darren,

    Not sure why that would happen. Preferably, you don’t want to load the script until the element you want to put your content in is available, so there’s aren’t many good options.

    Basically, play around with it, try different places in the document, and hopefully it works out for you.

  • sean
    May 5th, 2009 at 17:14

    Robert,

    Wonderful plugin! I have a question - does the js not support displaying videos posted to a Tumblr or have I botched something up along the way?

  • Robert Nyman - author
    May 5th, 2009 at 17:20

    sean,

    Thanks!
    And no, sorry - by default, it doesn’t support video postings, but feel free to hack it if you want to.

  • Bax
    May 5th, 2009 at 18:24

    Robert,

    The example page for your TumblrBadge doesn’t seem to be working… nor the code obtained from it… any ideas as to what may be going on here?

    Thanks!

  • Robert Nyman - author
    May 5th, 2009 at 18:51

    Bax,

    Yes, noticed that. It’s because I have moved to a new host, and it was an incorrect domain pointer. It’s fixed and the demo is working again.
    Also, if you download the script and replace it with your username, it will work fine as well.

  • Bax
    May 5th, 2009 at 19:07

    Robert,

    Dumb error on my part, had extraneous characters garbled in the javascript file. Thank you for your work on this, its great!

    -Baxter

  • Robert Nyman - author
    May 6th, 2009 at 9:05

    Bax,

    Thanks, I’m glad you like it!

  • James
    May 6th, 2009 at 22:46

    Great badge Robert. Thank you

    Is there a way I can tweak “shortPublishDate”

  • Robert Nyman - author
    May 6th, 2009 at 23:37

    James,

    Thank you!
    At the top of the file there’s a setting: shortPublishDate. Set that to true or false, to get a desired date length. If neither of those fit, you need to hack the script to adapt the date presentation to what you prefer.

  • Brian
    May 10th, 2009 at 15:27

    Many many thanks for this! It’s been awhile since I’ve had my feet in the coding sandbox so it’s supremely helpful to have some starters like this to help me.

  • Robert Nyman - author
    May 11th, 2009 at 10:03

    Brian,

    Thank you, glad to hear it!

  • katie
    June 10th, 2009 at 20:43

    Thanks for the great script, i used it on my blog!

  • Robert Nyman - author
    June 11th, 2009 at 0:24

    katie,

    Nice! Glad you like it!

  • Antonio
    June 11th, 2009 at 10:27

    Hey!

    It seems it could be what I need, but I don’t know how to integrate (in an easy way) a Javascript into my Wordpress sidebar. ¿There’s any easy way to do that?

    I’m trying to start a blog after been on tumblr but I want to integrate both.

    Thank you very much!

  • Robert Nyman - author
    June 11th, 2009 at 10:34

    Antonio,

    Please take a look at the demo page. Just include that code in your code and change your user name accordingly.

Share your thoughts:

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . If you want to display code examples, please remember to write &lt; for < and &gt; for >.

Comment preview

Top results