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.

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.

Posted in Developing,JavaScript,Technology |

304 Comments

  • Sid says:

    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 says:

    mdmadph,

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

  • Robert Nyman says:

    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 says:

    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.

  • 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!

  • […] 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 says:

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

  • Robert Nyman says:

    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 says:

    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 says:

    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 says:

    thanks! found it very useful.

  • Robert Nyman says:

    bcardoso,

    Great, good to hear!

  • Benp says:

    Really nice – thanks!

    Is there any way to display the post titles too?

  • Benp says:

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

  • Robert Nyman says:

    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 says:

    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 says:

    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 says:

    Giulietta,

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

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

    Just remove the types you're not interested in.

  • Simon Iddol says:

    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 says:

    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 says:

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

  • Gregory La Vardera says:

    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 says:

    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 says:

    Gregory,

    Great to hear!

  • 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 says:

    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/

  • 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…

  • 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 says:

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

  • Robert Nyman says:

    Gregory,

    Good to hear.

    Jermy,

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

  • Jermy says:

    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 says:

    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 says:

    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 says:

    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 says:

    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 says:

    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 says:

    Jermy,

    Great to hear!

  • 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 says:

    Mr Colour Drunk,

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

    <code>listItem.innerHTML += text;</code>

    Change it to:

    <code>listItem.innerHTML += text.substring(0, 50) + "…";</code>

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

  • Joe J says:

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

  • Claire says:

    What if I only want to show photo updates?

  • Robert Nyman says:

    Joe,

    Sorry, no idea.

    Claire,

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

  • tbone says:

    Your project makes Tumblr far more useful. Thank you!

  • Robert Nyman says:

    tbone,

    Thank you!

  • Lukas says:

    Thank you for your great work!

  • Antonio says:

    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 says:

    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.

  • Darren says:

    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 says:

    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 says:

    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 says:

    sean,

    Thanks!

    And no, sorry – by default, it doesn't support video postings, but feel free to hack it if you want to.

  • Bax says:

    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 says:

    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 says:

    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 says:

    Bax,

    Thanks, I'm glad you like it!

  • James says:

    Great badge Robert. Thank you

    Is there a way I can tweak "shortPublishDate"

  • Robert Nyman says:

    James,

    Thank you!

    At the top of the file there's a setting: <code>shortPublishDate</code>. 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 says:

    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 says:

    Brian,

    Thank you, glad to hear it!

  • katie says:

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

  • Robert Nyman says:

    katie,

    Nice! Glad you like it!

  • Antonio says:

    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 says:

    Antonio,

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

  • […] TumblrBadge – A Tumblr Badge Script If you enjoyed this post, make sure you subscribe to my RSS feed! blog comments powered by Disqus var disqus_url = ‘http://lifestreamblog.com/how-to-embed-tumblr-into-your-own-site/ ‘; var disqus_container_id = ‘disqus_thread'; var facebookXdReceiverPath = ‘http://lifestreamblog.com/wp-content/plugins/disqus-comment-system/xd_receiver.htm'; var DsqLocal = { ‘trackbacks': [ ], ‘trackback_url': ‘http://lifestreamblog.com/how-to-embed-tumblr-into-your-own-site/trackback/’ }; AboutLifestream blog provides the latest news, reviews and resources for the tools and services to create a Lifestream. It also provides information on the social services used to fuel them. You can follow author Mark Krynsky on: […]

  • Chris says:

    Anyway to have title show? If not, I'll look into myself.

  • Robert Nyman says:

    Chris,

    Sorry, not by default.

  • hannes says:

    did a bit of hacking to inlcude video post, audio posts and titles on regular text posts.

    if someone is interested the script can be found here:
    http://cumuli.tumblr.com/post/170311102/some-work

    servus,

    h

  • Robert Nyman says:

    hannes,

    Haven't tested the script, but thanks for the effort! Would you like to test it more, and then perhaps join the tumblrBadge project and submit your enhancements?

  • great badge, also looking to try @hannes video hack

  • @hannes liked your hack. simple, but works great so far. interested to see how it handles a vimeo post.

    cheers!

  • hannes says:

    thanks!

    the link above is no longer working. i reposted here:
    http://h4nne5.tumblr.com/post/172444646/some-work

    i further added the possibility to filter posts by tags.

    some testing and i will be happy to contribute to the tumblrbadge project!

  • Robert Nyman says:

    hannes,

    Great! Just let me know when you're ready and I will give you access to the project!

  • hannah says:

    I'm building a webpage using iWeb. How can I put the tumblr badge code into an HTML snippet… do I need to use an iFrame? or do I need to add anything to the code so it will show up in the snippet?

    This might not even make sense to you! sorry! Any help would be wonderful

  • Kuni says:

    Hey, awesome badge man, love it. One question though, any ideas how I'd go about including a "comments" link in the js to output?

    Basically its just a render of the posts url with #disqus_thread at the end, {Permalink}#disqus_thread if you know what I mean?

    That would be pretty useful. :)

  • Robert Nyman says:

    hannah,

    I'm sorry, I don't know anything about iWeb, but you do not need an iframe. If you look in the demo page, linked to in the article, you can see what sort of code you need.

    Kuni,

    That's a nice idea, but currently I'm not doing any more work on it. However, please feel free to alter the code any way you want to, to make it better.

  • Uzo says:

    Hi Rob,

    Amazing work with the Tumblr badge … I don't know a lot about code yet but from the little I know, ITS A LOT OF WORK.

    I am teaching myself how to code by looking at the source code of websites I like, goggling terms I don't understand, and trying things out on my own; this results in me hitting my head against my desk several times a day but I digress:)

    Quick question: I don't have a website; I have a blog with blogger and would love to integrate/embed my tumblr posts in my blog. I have looked at your script but I have NO idea where to put what in my template.

    I have added the javascript that Tumblr provides Here and I know where the CSS portion of the script goes. My question now is where do I stick the rest of the code?

    Any feedback would be GREATLY appreciated. Thank you:)

  • Robert Nyman says:

    Uzo,

    Please insert like it is in the demo page, linked to in the article. Basically, just have an HTML element in your template file where you want it to show up, and then include the script file below that:

    <code><div id="tumblr-badge"></div>

    <script type="text/javascript" src="tumblrBadge-1.1.js"></script>

    </code>

  • Hawk says:

    Awesome job on the script. I'm having a little issue with it, sometime it loads the content, sometime it doesn't. What could the reason be?

  • Robert Nyman says:

    Hawk,

    Thank you!

    My estimation is that it times out when trying to connect to Tumblr. Check line 10 in the code, with a parameter called <code>timeToWait</code>.

    There you can set the desired time to wait, in milliseconds.

    Good luck!

  • Rita says:

    Thank for the sample code and I test it with FF and working fine.

  • Forrest says:

    Thanks a lot! To you too Hannes, I'm currently using the audio/video posting hack and it works great!

  • Robert Nyman says:

    Rita, Forrest,

    Glad that you like it!

  • marta says:

    Hi ;-)

    I hold a lot of hope for your help.

    I am learning html/css and as you can see on my website, I know something;-)

    I am truly trying to understand it..

    My html :

    Blog

    <!–end of rightsidebar–>

    than I place this js script into my test ( in the future-if it works, I'll move it to blog directory) directory ( same level as index.html, right ? It does not have to go to any additional folder?

    If this is all I need to do – it's not working…

    btw – I am trying it on my test page :

    martaspendowska.com/news

    Please, please, help!

    Thank you!

    Marta

  • marta says:

    I think I got it with the first version.

    The extended does not show up, so for now I am going to be occupied with yours code, Robert.

    Thank you so so much!

    Goodnite;-)

  • Jakob says:

    Hello Robert,

    I have installed your badge onto my new project, and it is working fine as it is! All well so far, but the thing is that I want to manage the pictures in greater depth – and for doing that I would like to add a class element to the image tags that are generated by the script. However, I seem not to be able to do so without making the script stop working because of what I assume is some type of syntax error.

    Perhaps you could help me by writing a working way of making a class id embedded to the image tag, or point me to the right direction.

    Have a great evening, my fellow Swede.

  • Robert Nyman says:

    Jakob,

    After line 52, include a line that will look something like this:

    <code>img.className = "Jakobs-class-name";</code>

    Good luck!

  • Jakob says:

    It worked like a charm – thank you, Robert!

  • Jakob says:

    I did by the way, just as a note to anyone who may wonder about it, make the click-through of images a link to the largest size of images, using a new variable called imageSizeL – I then used http://andreaslagerkvist.com/jquery/image-zoom/ to make the links that points to images appear as larger pop-ups. :)

  • Robert Nyman says:

    Jabok,

    Nice! Personally, I really like ColorBox.

  • Jakob says:

    Oh! I shall certainly remember that when I ever need something more versatile!

  • Yianni says:

    Thanks for providing this! I have everything working great except sometimes it times out. But I'm working on trying to place the code in different places. Currently it's in the footer and works 95% on homepage, but no luck on sub pages…

    Thanks again though!

    -yianni

  • Robert Nyman says:

    Yianni,

    Timeouts could pose a problem, but you can set the desired time to wait yourself in the JavaScript file.

  • elena says:

    hi robert!

    thanks for your public code.

    are there any chances to get in my widget box video-embed posts?

    maybe, could you help me to improve the code with embed videos like youtube or vimeo videos, please?

    thanks a lot

    elena.

  • Robert Nyman says:

    elena,

    Sorry, at this time, I don't have the chance to extend it. I know hannes did some work with it (see his comment above), but that link isn't valid anymore.

    Please contact him and see if he has the code available somewhere.

  • BCS says:

    Hello Robert!

    Thanks for your code, it's very handy.

    One question: how can i enable page navigation (next page, previous page links)?

    Keep on rockin'!

  • Robert Nyman says:

    BCS,

    Thanks!

    If you want that you need to heavily use some other script for that, or alternatively try jQuery and similar and some plugins to accomplish that.

    Basically, I have no easy option to offer you.

  • Richard says:

    Thanks for providing the Tumblrbadge. I've been gawping at the code for hours, trying to make some simple changes, but with no js experience, I'm stuck! I want the post date displayed, but I'd like to stop it being a link back to tumblr. Also, I'd like it to precede the post. This is the section I've been gawping at:

    // Create a link to Tumblr post

    postLink = document.createElement("a");

    postLink.className = "tumblr-post-date";

    postLink.href = post.url;

    postLink.innerHTML = (settings.shortPublishDate)? post["date"].replace(/(^w{3},s)|(:d{2}$)/g, "") : post["date"];

    listItem.appendChild(postLink);

    I'm guessing I need to erase a lot, and then move it up the page. Any ideas?

  • Robert Nyman says:

    Richard,

    Thanks for using it!

    Here's, roughly, what you need to do:

    – Change this: postLink = document.createElement("a"); to postLink = document.createElement("span");

    – Remove postLink.href = post.url;

    – Now cut out this code:

    postLink = document.createElement("span");

    postLink.className = "tumblr-post-date";

    postLink.innerHTML = (settings.shortPublishDate)? post["date"].replace(/(^w{3},s)|(:d{2}$)/g, "") : post["date"];

    listItem.appendChild(postLink);

    and instead place it directly in the code after this line:

    listItem = document.createElement("li");

    Hope that makes sense – good luck! :-)

  • Richard says:

    Hi Robert

    Thank you. I really appreciate you taking the time to help me out. I followed your instructions… and it worked! So now I have a non-clickable post date, followed by the post.

    The one other thing I'd like to include is the Title for text posts, in the format: Title, Date, Post.

    I've looked at the js posted further up this thread by Hannes – http://rocknroll.c.umu.li/stuff/tumblrBadge-1.1-e

    He has included this to get the title of text posts:

    if (post.type === "regular") {

    text = "" + post["regular-title"]+ "" + text;

    }

    I tried pasting this into your script, but couldn't get it to work. Maybe the 'if/else if's got confused. Or maybe it's just tricky to get the format I want (Title, Date, Post).

  • Richard says:

    Right, so that bit of code means (I think!): if it's a text post, then include the post's title (in bold), add a line break, then include the post. And I'm wanting to modify it so that it includes the non-clickable date between the title and the post…

  • Robert Nyman says:

    Richard,

    Right. I think you need to experiment with changing the values around, and switching the order to get your desired result.

  • Erin says:

    two questions:

    1. how do i remove the bullet posts from my embedded blog posts

    2. has anyone found a way to include post "tags?" (as simply as you can pls, I'm pretty unfamiliar w javascript.)

    here's what the blogpage looks like now: http://www.whatabouterin.com/index.php?/project/b

    Thank you! Awesome work!

  • Robert Nyman says:

    Erin,

    1. Remove it with desired CSS code. For instance: ul li {list-style: none;}

    2. Not supported as of right now

  • Christian says:

    Hey, thanks for the script but i have a problem. I have 2tumblr blogs (the second only because it is used as a group blog and that doesnt work on the first one for whatever reason). The second blog is also connected to a subdomain, so if i enter that username no posts will show up mith your script. If i enter ie your username or the name from my first blog in the account everything works fine. Any idea? Any help appreciated. Thx in advance

  • Robert Nyman says:

    Christian,

    Sorry, but I have no idea why that would be.

  • Mayowa says:

    Hi, I'm wondering, with the "generated html" on your page, are we supposed to include that? What I'm having is that it just display the static example. Not sure what I'm doing here.

    Thanks.

  • ntlk says:

    Thank you so much! I used the hack from hannes. It works beautifully. I am indeed very grateful.

  • Robert Nyman says:

    Mayowa,

    No, that's just to show the result of the tumblrBadge in place.

    ntlk,

    Glad it was useful! :-)

  • chris finlay says:

    This is totally what I need but it doesn't seem to work in Square Space. Html box just shows the badge code without any content. Any ideas?

    Thanks!

  • Robert Nyman says:

    chris,

    Sorry, no idea why it won't work in Square Space.

  • robert smith says:

    I’ve been tooling around with this and I love it so far, the only thing I’m having trouble with is trying to add a horizontal rule of some sort between each post the script puts on the page. Any Ideas?

  • robert smith says:

    Disregard my previous question, I eventually figured it out. But I do have a new question now, How can I change the date format from what it is currently ( DD M YYYY TT:TT) to (M DD YYYY). I've tried tweaking the date code, but the seemingly random string of symbols there has me dumbfounded. I guess just saying which parts of the code represent the different date variables is all I would need.

  • Robert Nyman says:

    robert smith,

    The line to look for is this:

    <code>postLink.innerHTML = (settings.shortPublishDate)? post["date"].replace(/(^w{3},s)|(:d{2}$)/g, "") : post["date"];</code>

    Change that to:

    <code>postLink.innerHTML = post["date"];</code>

    Then you will get the default date value from Tumblr, and can use <code>substring</code> or similar in JavaScript to read out the parts of the string you want to.

  • istara says:

    Thank you so much for this! It has been really helpful and clear for me as a newbie to follow – and it seems to be working! http://www.rpg-site.com/blog.html – not that there's much content up there yet ;)

    Now the next step would be seeing if I could get my disqus comments to also display, but that's probably a whole new ballgame.

  • Robert Nyman says:

    istara,

    Glad it was helpful!

  • hi! that's great! thanks for ur work!! Now i'll try to customize a little :D

    bests from Barcelona! ;)

  • Suzie says:

    Do you know how to put this in wordpress? I simply love it! :)

  • Robert Nyman says:

    Suzie,

    You can, for instance, just include the JavaScript code here in your sidebar.php template where you want it.

  • Ed Hall says:

    Great script quick question

    Is there a way to get the height of the content?

    I've noticed that div elements that should float below float on top because it's not reading that there is content there.

    So is there a way to trick the browser or get the height of the content so the divs resize accordingly.

    Thanks.

  • Robert Nyman says:

    Ed,

    I guess this is up to you and the CSS you apply to it. I think this will help you with what you need: How To Clear CSS Floats Without Extra Markup – Different Techniques Explained.

  • JB says:

    Wow! Thanks so much, I have used this script, extended it, and I use it to embed the tumblr blog with far more than is possible with their JS embed code. Nice work!

  • Robert Nyman says:

    JB,

    You are welcome! :-)

  • Alec says:

    This is fantastic! Thanks very much. Looks good tucked into jQuery tooltip :)

  • Ashley says:

    How do I remove the blue border around the images?

  • Angelo says:

    hello.

    when i go to preview my site using Dreamweaver I can see your code and not my tumblr page.

    any idea why this is happening?

    thanks

  • Gabriel says:

    Hi Robert !

    i´m using your script in my website and it is so great! but now i'm changing the layout of my site, and i want to know if is possible to change de size of the image to a bigger size than the 500px ?!

    thanks for your help and great effort !

  • Simon says:

    Robert,

    Thanks for providing so much help on this really useful script. I'm having trouble with changing the date format that you outlined in post #117 – I basically have no idea how to format the date using substring (I have no real idea what I'm doing when it comes to JS, I just bodge things about until they work).

    Any examples you could give would help massively – many thanks in advance.

    S

  • xavier armstrong says:

    I want to know how to clear the content before it loads? I mean, if I delete a post on my tumblr page, it still appears on my web page.

    Any advice?

  • Simon says:

    Xavier, that sounds like an issue with your browser caching the tumblr feed – clear the cache and reload the page and it should be fine (people who've not seen your tumblr feed before won't see the deleted post).

  • Carl says:

    Thanks for this badge. It seems to work really well. As previously requested by others, it would be hugely beneficial to include the title of the post. I am quite surprised this wasn't built in by default. Any examples of workarounds seem to have disappeared, so I would like to know if there are any new updates to the script to include the title of the posts?

    Thanks in advance.

  • Carl says:

    UPDATE:

    In order to display the TITLE of the posts, add this to the JS file:

    Under the line:

    listItem = document.createElement("li");

    Add the following 4 lines:

    postTitle = document.createElement("h3");

    postTitle.className = "tumblr-post-title";

    postTitle.innerHTML = post["regular-title"];

    listItem.appendChild(postTitle);

  • xavier armstrong says:

    How can I show the post 10 to 20, on a page, instead of post 1 to 10?

    I want to created an archive but can't find out how to call certain post…

    Thank you!

  • Robert Nyman says:

    Alec,

    Thanks,

    Ashley,

    Add CSS for those images that sets the border to none, e.g. img {

    border: none;

    }

    Angelo,

    Not sure, it might time out in Dreamweaver.

    Gabriel,

    Sorry, I think 500 is the maximum size.

    Simon,

    It depends on waht you want, but substring is basically something you sue on a string value in JavaScript to tell it at which character to start and how many characters to include from there. E.g:

    postLink.innerHTML = post["date"].substring(0, 4); // Reads out the first four characters.

    xavier,

    Not sure why that happens – like Simon mentioned, it's probably web browser caching or maybe temporary caching done by Tumblr.

    Carl,

    Thanks for fixing the title!

    xavier,

    Pagination, as far as I know, is not possible at this moment.

  • tommyrensh says:

    Hi,

    Just wanted to thank you for the badge, exactly what I was looking for!

    One thing, I don't have any java script knowledge, but is there a way to make the links to the tumblr page (ie the date links) open in a new window rather than the same?

    Cheers

  • tommyrensh says:

    sorry one more thing, my feed is showing with bullet points beside each one, is there a way to get rid of them?

    apologies for the noob questions

  • Robert Nyman says:

    tommyrensh,

    Thanks!

    You need to look into the target attribute (or another JavaScript solution) for opening links in new windows, and the list-style property for CSS to set it according to your liking.

  • rgg says:

    Hello!

    First: to the creator, thank you!, this is a wonderful script.

    I have a question for anyone good in javascript:

    I'm already displaying titles, but I'm getting "undefined" in those posts that have no title (photos, links). How could I edit the .js in order to get only titles from regular posts?

    Thanks in advance!

  • Robert Nyman says:

    rgg,

    Thank you!

    Hmm.. The simplest way, I think, is to find this line:

    listItem.innerHTML += text;

    and replace it with something like:

    listItem.innerHTML += text || "";

    That means it should be an empty string, i.e. nothing when you don't have a title. But this is just a guess, so try it out and play around with it. :-)

  • Jo says:

    Thanks so much for this script – it's really useful. Just a couple of comments and a question.

    I found what I think is a version of hannes' script on ntlk's site. The difference I found for adding in tags was:

    tagsToShow : "", // Tags to extract; leave empty to get all posts

    placed after:

    itemsToShow : 6, // Number of Tumblr posts to retrieve

    I made my own hack having discovered that the api/read for link posts also spits out "links-description" (I couldn't find this mentioned in the api documents).

    So I added:

    + post["link-description"

    after

    else if (post.type === "link") {

    text = '<a>' + text + ''

    It seemed to work!

    Final question – it isn't working at the minute. The api is down, and I was wondering if someone had any bright ideas about posting an error message in that instance. Otherwise it just goes blank. I have the code of what gets posted if that's of any use. Thanks a lot

  • Vael Victus says:

    It seems that the API is down or your script has been broken for some reason by Tumblr. It was broken/down yesterday too.

  • Robert Nyman says:

    Jo,

    Thanks for the suggestions!

    Generally about using JavaScript badges and such, there is always a good idea to have default content (e.g. a link to the Tumblr account or similar) in case JavaScript isn't available, the API times out or similar.

    Vael,

    I'm sorry, but I don't know why it seems to time out.

  • Jo says:

    Thanks Robert – I hadn't previously realised that any text within the div would be replaced by the script if it was working, so that is a good solution (sorry I'm a complete novice!).

    I contacted Tumblr about the api/read being down – apparently it is a known issue and they are looking into it – it doesn't look like it has anything to do with the script being broken.

    It's a shame that they don't post their 'up' status anywhere (I asked about this and they didn't have anything to tell me). For people who want to check if it's down or if you've done something wrong with incorporating the script in your website the link is USERNAME.tumblr.com/api/read. If it is down an error message is displayed there.

  • Robert Nyman says:

    Jo,

    Ah, I see about Tumblr and their API. Thanks for the info!

  • ben says:

    well now its the 13th (at least here in Glasgow) and the API still seems to be down?!? Humm – is this a one time burp, or does the json feed die sporadically?

  • Robert Nyman says:

    ben,

    Before this it has had its occasional downtime, but has worked for the most part.

  • rgg says:

    Thanks for answering Robert, but it is not working.

    I'm not good in javascript, I'll look for help around here.

    If anybody knows help would be aprecciated!

  • ben says:

    Robert – this is impressive work by the way. Im beginning to see it implemented in various ways. There's been a plugin for example for the cms indexhibit, which caters to creative types – so congratulations on that.

    I was wondering what the hurdles were in importing the other types of tumbler posts ie audio and video. dose the api just not support it for bandwidth reasons or is it some other hurdle?

    A friend asked me so Im relaying the question to you in turn – what kind of nastiness would be needed to support discuss comments that have been added to a tumbler blog? Is that just too painful a process to contemplate?

    bravo

  • Robert Nyman says:

    ben,

    Thanks!

    To be honest, it's been quite some time since I looked at it, so I don't know. I don't think audio and video would be that hard, though, but discuss comments would be trickier.

    I have no plans at this time to extend it, however.

  • Masey says:

    Did anyone manage to get hold of the extended code that "hannes" created to include video posts, audio posts and titles on regular posts?

    All his linked pages seem to be down or missing. I'd love to get my hands on his example code if anyone has it?

  • Daniel says:

    I have implemented Hannes' extended version of the TumblrBadge js on my site (after cribbing it from NTLK's blog). Take a look if you haven't been able to find it elsewhere.

  • KillerAJD says:

    I used the code Carl provided to post the the title, but is there a way for that title to be a hyperlink to the post on Tumblr? Regardless, thanks for all the work.

  • Wade says:

    I'm having issues where the tumblr post sometimes shows (empty space) and doesn't show.

    Would a longer "TimetoWait" fix this or is it something else? Currently set at default 2000ms

  • Wade says:

    Sorry for DP (can't delete prev one). It should of read:

    I’m having issues where the tumblr post sometimes shows and doesn’t show (empty space).

  • DanS says:

    I have got this script working and using the Hannes video hack, but the videos always embed at 400px wide.

    Anybody have any thoughts how to change this. I would like them to embed at 600px, but 500px would work too since thats the maximum for images.

  • DanS says:

    Also I had the same the problem as RGG and I solved it(not really). At least it looks good now, I just added a text-indent: -9999px; to the <h5>. I'm pretty sure thats the tag that "undefined" was showing up in for photos. Then I added a text-indent: 0px; !important to the tag so that the Photo caption was still in the right place.

    Not good coding but worked for me.

  • JT says:

    hey man, great code. Sometimes however, when I refresh the webpage the Tumblr badge appears on, it disappears. Only refreshing it onces or twice will bring it back. Then I'll go back to work on my site, refresh, rinse, and repeat.

    How can I make it stop vanishing on refresh?

    Thanks!

  • snookz says:

    sorry, i'm not good in CSS,

    can you explain (just a quick tutorial) how to change Font type…

    because, im using iWeb & HTML snipet to put your script into.

    this is what it look like:

    but i've got my Tumblr post in Times New Roman font.

    i wanted to change it font to arial or helvetica, how can i do that?

  • dxo says:

    Robert,
    I have been trying to get the script to just show pictures, but so far no luck. I omitted the ones I didn’t want (on line 43 as per your suggestion), but still get text, etc. I’ve tweaked that js ten ways to Sunday and I can’t get it. Being a js rookie probably doesn’t help.

    Thanks for your great script and any help would be greatly appreciated.

    -dxo

  • Travis says:

    Hey yea, just wondering if anyone has figured out what needs to be done, so when you delete a post on tumblr is deletes on the site you have set up the badge on???

    Could be a nice feature lol..

    Ive been messing around with the JS and still have not figured it out..

    Its like the js creates a file somewhere that can not be found with a history of all the posts it pulls from tumblr…

  • Travis says:

    Ok never mind, it was a site cache thing… I should of read the comments more..

    Thanks for he awesome code Robert :D

  • Riana says:

    Help! I’m no programmer.
    First, I have to put the code between head tags, am I right?
    Then I have to call the function? how? my blog is on Blogger.com

    Thank you in advance!

  • oLi says:

    Hey Robert,
    thanks for your work – really awsome! I’m relaunching my Site and I’m working with your badge, its great.

    One question: how do I link to the original images, the High Res Ones.

    If I insert

    link.href = post[“photo-url-” + HighRes]; nothing happens.

    Is there a simple was to do that?

    Keep up the good work!

    Thanks,

    oLi

  • Hi Robert, thanks for sharing your script! I have a question, is there a way to display text while the blog is loading? Something like ‘Loading Blog…” I’m experiencing a bit of a lag between when my page loads and when the blog loads, so I was hoping to put in some placeholder text.

    Thanks very much!
    Cheryl

  • Robert Nyman says:

    Sorry I’ve been late replying here.

    Masey,

    Sorry, no, I don’t have access to that information.

    Dannes,

    Thanks!

    KillerAJD,

    In the loop, you have access to post.url, which is the link to that specific post on Tumblr. Just wrap a link around with that URL added.

    Wade,

    Longer timeout is my only guess, yes.

    DanS,

    Hmm. Is that due to something in his script, you think, or something in the data received from Tumblr?

    JT,

    Thanks! Not sure why it vanishes, but it could be a timeout issue. Also, make sure to test in various web browsers.

    snookz,

    Take a look at font-family – MDC Doc Center.

    dxo,

    Make sure to check that post.type === “photo” and only present those results.

    Travis,

    It always gets the data from Tumblr, so when it’s deleted there, it’s deleted. Good it worked out for you. :-)

    Riana,

    Look at the code in the example page.

    oLi,

    Not sure the high resolution links are in there in the data.

    Cheryl,

    In the script, you add the id of the element you want the Tumblr posts to be presented in, in the itemToAddBadgeTo variable. Just have your default content. e.g. “Loading…” in there and then the script will automatically replace it.

  • nitin says:

    hi , i am finding it difficult to put this on my blogger blog. how do i make this work for me? can you help me?

  • Robert Nyman says:

    nitin,

    I’m sorry, but you need to take the code in the demo page, change user name, and just place the code where you want it.

  • Jared says:

    For some reason, it appears the script won’t work anymore. Going to the URL that the script uses brings a “We’ll be back shortly” page. Has been doing this for weeks now. (e.g. http://robertnyman.tumblr.com/api/read/json?callback=tumblrBadge.listItems&num=3 )

    Any solution to this?

  • Robert Nyman says:

    Jared,

    Not sure why. I know Tumblr have faced a number of problems recently, and that might be one of the results.

  • Cassie says:

    Hi there, This is what I have been looking for however I cannot seem to get it implemented into my code properly. I am fairly knowledgeable with CSS/HTML, not so much with JS.. I understand where to put the CSS bit and I understand I need to put the div tag to call up the badge, but I cannot figure out where to put this:

    // 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
    };

    or how this works.. I am assuming this is what I use to call up the badge, but do I need to insert something here?:

    <div id=”tumblr-badge”></div>
    <!– Note: the script file needs to be included AFTER the HTML element you want to insert the code into (DOES SOMETHING GO HERE?)–>
    <script type=”text/javascript” src=”tumblrBadge-1.1.js”></script>

    I am trying to use this badge on my Tumblr site, not another blogging site. I want to feature posts on my Tumblr page from another Tumblr page. Within the “Custom HTML Code” section I can’t seem to get all of the pieces of this badge in the right places and I have tried many combinations, the badge just won’t show up. Any help is much appreciated. Thank you.

  • Robert Nyman says:

    Cassie,

    If you take the exact code in the demo page, change the user name to the one you want to in the script file, and it should all be good.

    However, I don’t know why, but at the time of me writing this, the Tumblr API and this script don’t seem to be working together.

  • Jared says:

    Everything is fixed now. I just checked and the script is now working. :)

  • Robert Nyman says:

    Jared,

    So it does. All good then. :-)

  • Aaron Zimmer says:

    Is there a way that the link back to my Tumblr blog post could load in a new window???

  • Robert Nyman says:

    Aaron,

    Find the code in the badge for postLink, and just add a line like this:

    postLink.target = “_blank”;

  • Velvet says:

    Hey,
    what do I need to change, when I want that links in blog shall be shown in a new window. Any idea?
    It would help me lot, cause I’m using your tool in a iframe, and all links are shown in this frame and that looks like crap.
    Thanks for your tool, it’s great.

  • Robert Nyman says:

    Velvet,

    The solution is in the comment just above your comment.

  • Aaron says:

    postLink.target = “_blank”;

    This works GREAT for the date portion of the post. Any image though still gets directed to the post in the same window. Is there any code that would make the images load the posts in a new window as well?

    Thanks!

    -Aaron

  • Robert Nyman says:

    Aaron,

    Same goes there. Look for post.type === “photo” and apply it within that if clause.

  • Aaron says:

    “Same goes there. Look for post.type === “photo” and apply it within that if clause.”

    Sorry, can you be a little more specific. I tried adding:

    postLink.target = “_blank”;

    between every line in:

    if (post.type === “photo” ) {
    link = document.createElement(“a”);
    link.href = post.url;
    img = document.createElement(“img”);
    // To avoid a creeping page
    img.width = settings.imageSize;
    img.src = post[“photo-url-” + settings.imageSize];
    link.appendChild(img);
    listItem.appendChild(link);
    text = “” + text + ““;

    And I cannot get it to work. Can you help!?!?

    Thank you!!

  • Robert Nyman says:

    Aaron,

    In there, it’s “link, not “postLink”.
    So link.target = “_blank”; should suffice.

  • Brad says:

    Has anyone found a link to Hannes code to add video and audio posts? Or could someone post a sample html and js file. I have searched all the questions and answers and all the links are broken.

  • Nicholas says:

    I got it the badge working with Hannes’s video and audio hack here:

    http://blackrhombus.com/battleofthecamel/thoughts.html

    You can grab the page code there and the javascript is here:

    http://blackrhombus.com/battleofthecamel/tumblrBadge.js

    I hope this helps. Does anyone have any pointers on changing the appearance of the audio players? I just want a little background, the transparent makes them look funny to me.

  • Sandra says:

    Hey Nyman!

    Awesome stuff!
    Is it possible to show up to 500 post with infinite scroll or something like that? or just do a link to another site with previous post?

    Thanks!

  • Robert Nyman says:

    Nicholas,

    Thanks for adding that!

    Sandra,

    Not by default, then you would need to change the script dramatically. You are more than welcome to do it, though! :-)

  • Ash says:

    Hi guys,

    I’m trying to filter posts by tags using this badge. I note Hannes put this up few times, but I can’t find this online anymore, does anyone have it?

    Thanks

  • Ash says:

    oh and one more thing is there anyway of making the post, like summary with a link to the actual blog?

    Cheers

  • Robert Nyman says:

    Ash,

    Sorry, don’t have the code for the tags thing. Depending on the post type it becomes a link, but as you see in the JavaScript file, all content is added as a string. That means that you can add a link as text around the content if you want to, but it takes some JavaScript file tweaking.

  • Harvey says:

    Hey Robert,

    Great script you have here, but I’m struggling with the time-out issue. When you say – “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.” What options are you talking about exactly?

    I have it inside a div class, but it loads maybe 1 out of 10 times.


    <div class="col2">
    Blog
    <div id="tumblr-badge"></div>
    <script type="text/javascript" src="tumblrBadge-1.1.js"></script>
    </div>

    Hope you can help, thanks!

  • Robert Nyman says:

    Harvey,

    Basically, all you can do is change the timeToWait value at the top of the JavaScript file ()it is set in milliseconds.

  • Mankatsu says:

    Hi,
    is there possibility to place “prev-next” buttons to the bottom of a page to load previouse items?

  • Robert Nyman says:

    Mankatsu,

    Sorry, no easy way by default.

  • Mankatsu says:

    Robert, thank you for your answer! Can you give some idea, what direction i should moove to?

  • Robert Nyman says:

    Mankatsu,

    Not really. You need to delve into the Tumblr API and check retrieval URLs and then apply that to previous/next paging elements.

  • Mankatsu says:

    hm… today it doesn’t work. neither my site nor yours

  • DBlog says:

    Hey Robert – first off, thanks so much for the tumblr script – plus from reading all the comments looks like you offer great support as well.

    As Mankatsu mentioned today it was not working for a long time on either my site or on your demo page? Is this most likely caused by the the Tumblr API not working with your script?

    How often does this occur?

    Thanks!

  • Robert Nyman says:

    Mankatsu, DBlog,

    I think you need to ask the Tumblr people that. I personally don’t use it regularly and I know they’ve been having some stability problems.

  • Christina says:

    Hi,

    I just got done scrolling through all the comments to make sure this Q hadn’t been asked yet, but is there a way to display only a certain amount of characters? I don’t want such long posts to show and I’m not a dynamic coder so I don’t know how to modify the script to show, say, 200 characters of a post.

    – Christina

  • Lucas Balaminut says:

    Hi,
    I’m an amateur and still learning html and css while I create a website. I tried using your badge script, but failing really bad.
    I must be doing something wrong but can’t find where. Baby step me through this please!

  • Lucas Balaminut says:

    Nevermind, just got it to work. Still trying to understand the functionalities though

  • brainwavestv says:

    I love this badge and Hanne’s addition for video and such.
    Have you had anyone running two badges on the same page?
    Like a badge feeding from one tumblr and another badge feeding from another tumblr.
    Everything I have tried to accomplish this has failed and only one will work at a time.

    Any help or thoughts are appreciated.

  • Robert Nyman says:

    Christina,

    I believe my reply above helps with that.

    Lucas,

    Glad that it worked out for you.

    brainwavestv,

    Well, the easiest way is to copy the entire script and rename it, but that’s not really optimal. Otherwise, though, you need to rewrite it quite a bit to make it do that.

  • gas says:

    hey can somebody help? where do you place the js and do you need an html holder for a js?

  • Robert Nyman says:

    gas,

    Please check the demo that is linked to in the post.

  • Barry says:

    Fantastic stuff Robert, I have it working but have a quick question on styling. How would I get the feed to be centered on the page?

  • J says:

    @RGG about the undefined problem.

    this little fix helps:
    if (post.type !== “photo”){

    listItem.innerHTML += text || “”;
    }

    cheers.

  • Robert Nyman says:

    Barry,

    You need to look into CSS and generally how you use it to center things – it totally depends on your layout.

    J,

    Thanks for the alternative solution!

  • Shred Pillai says:

    I am really amazed by the efforts of Robert and Hannes in developing this nice script which has great utility and linking and SEO value and the perseverance of nearly 4 years at that!
    I have searched all over the net and haven’t found anything better though TUMBLR guys have produced a script. which can be downloaded here http://www.tumblr.com/goodies
    The problem with that is there is no control of how many posts you can import ,which makes it not suitable for integration and TUMBLR support couldn’t tell me if this was possible.

    I have tried to implement your script (Hannes post #187) in a Widget in Blogger here http://lastingrose.blogspot.com/
    However, I can’t get the header of the widget to show and change the background colour from transparent to white.
    I assume that the widget inherits the CSS from blogger, but not sure how to override it. Appreciate your support to everyone and wonder if you could help with this. Many thanks.

  • Jan says:

    Hey, thanks for the badge, works great, just one problem: I just want to show the photo posts, so I deleted the specific code in the .js. But now it has blank fields on my website when I have a text post. I display three rows with 11 pics each row. When I have a text post on the last 33 posts only 32 photos are displayed and one empty field. So the badge does try to load 33 posts as I defined it in the .js, but it does not load the last 33 *photo* posts.
    Any ideas? Thanks!

  • Jan says:

    just found out: you have to add &type=photo on line 19. awesome.

  • Robert Nyman says:

    Shred,

    Happy to hear that you like it!
    I can’t go into details, but you will have to write a CSS selector to override the default styling that gets applied to your headings. Use a tool like Firebug to see which styles are applied, and which are overridden – that way you can get a hint what you need to do.

    Jan,

    Glad it worked out!

  • Brandon says:

    Is there anyway to limit how many lines you can see when you embed the code onto your website. When I have a long blog post on Tumblr and it posts on my website it kicks the page layout down. Any thoughts?

  • Robert Nyman says:

    Brandon,

    You need to use CSS to control that. Apply width and height to a surrounding element and then use overflow: auto or overflow: scroll to control that. The badge doesn’t offer any limitation control in terms of characters or similar…

  • Travis says:

    Hey Robert,
    This script seems to have stopped working on my site. No information from tumblr loads. It was working wonderfully just a few days ago. It also seems like your example page for the script is failing to load data from tumblr as well. I wonder if this has anything to do with tumblr phasing in the v2 api? Wondering if anyone else is experiencing this problem.

  • Robert Nyman says:

    Travis,

    No idea, really. I know Tumblr have had their problems with uptime too, so it could be related to that.

  • Anonymoose says:

    Hey Robert,

    Thanks for making the code, it’s been awesome for myself and apparently many other people. Basically everything works out fine, except for every type of post (video, quote, text), it’s showing the post date at the top of the post, but when the post is a picture it’s showing the picture first and then the post date underneath it and then the picture caption. I’m trying to set it so it shows the post date on top, then the picture itself, then the caption. I did add the coding from Hannes post so I’m sure if you’re the right person to ask. I think it might just be something small but I’m relatively new to coding.

  • Robert Nyman says:

    Anonymoose,

    Well, you need to make a couple of changes to make that happen. Find the code that looks like this:

    // Create a link to Tumblr post
    postLink = document.createElement(“a”);
    postLink.className = “tumblr-post-date”;
    postLink.href = post.url;
    postLink.innerHTML = (settings.shortPublishDate)? post[“date”].replace(/(^\w{3},\s)|(:\d{2}$)/g, “”) : post[“date”];
    listItem.appendChild(postLink);

    Move that up in the code above:

    if (post.type === “photo”) {

    And it should add the date before the content for each post.

  • Mooseolini says:

    Thanks for your very quick reply. Yeah I figured it was something like that but I just couldn’t get it right. It worked out fine for anyone who ever sees this and has a similar issue.
    Thanks Again!

  • Robert Nyman says:

    Glad it worked out for you!

  • Blake "The Snake" says:

    Hi Robert,

    I’m not sure if you’ve heard this already but thanks for the awesome tumblr code. As of right now, I have the publishdate length set to long. I want to set it so that it will show “Posted on Sat, 20 August” and have it end there, instead of showing the exact minute and second I publish a post. I don’t know anything about javascript and couldn’t really find the answer on google, so if you could offer any insight I’d really appreciate it. Thanks!

  • Robert Nyman says:

    Blake,

    Glad you like it.
    Regarding publish date and cutting it short, it has been touched on a few times, in using substring and cutting the date short.

  • Vladimir says:

    tumblr now offers a direct way to embed the blog. It is “Embed your blog”
    under tumblr goodies

    But your library enables much more control for embedding
    and is much more suitable for geeks ;-) Thanks!

  • Robert Nyman says:

    Vladimir,

    Thanks, glad you like it!

  • johnline says:

    HALLU

    thanks for the great script, im more of a jquery fag so i find it harder to modify it. my question is how do i get tumblrbadge to show more than one img (all imgs from original post). its only showing the first img of the post atm.

    thanks again!

  • Robert Nyman says:

    johnline,

    It only gets the first image as it is right now.

  • brainwavestv says:

    Re: video from Hannes altered .js

    Has anyone figured out how to adjust to video size?
    Or does anyone know why it is defaulting to 400 pixels?

  • christian says:

    Hi Robert – the badge is great! But please – I’ve trawled the web and not been able to find the code to make the tumblr feed fall horizontal across the page – instead of vertical down the page… any help would be much appreciated!

    thanks

  • Robert Nyman says:

    christian,

    It is done through CSS, where you need to use float or a similar approach to make elements appear horizontally next to each other.

  • Amy says:

    Hi Robert, I have been searching the internet for days looking for the answer for how to embed my tumblr feed into my wix created website properly. I can embed the feed by using the snippet of code that tumblr gives you.

    &itscript type=”text/javascript” src=”http://collectivesurfwomens.tumblr.com/js”></script&gt

    But it shows with really small text, numbers and ugly scroll bars.

    Any ideas you could suggest would be amazing! I was hoping i could somehow use your html code… :)

  • Robert Nyman says:

    Amy,

    You can use all the code that is in the demo page to present it in your web page.
    However, when it comes to its looks, you need to look into CSS and how you control the appearance of text etc.

    Good luck!

  • knaeckebroed says:

    Somehow the demo doesn’t work anymore…???

  • Robert Nyman says:

    knaeckebroed,

    No idea why that is, if they have changed something on their part.

  • knaeckebroed says:

    shame, i’ve been working on my badge for ours yesterday,
    do you think you could fix it?

  • knaeckebroed says:

    …I mean the demo :)

  • Robert Nyman says:

    knaeckebroed,

    The demo hasn’t changed in years. Either Tumblr are having issues, or they changed something. I do not have the time to investigate if they broke something that previously worked.

  • David Ocker says:

    Thanks. I got the script working with a very minimum of effort. The last few posts from my tumbler now appear in my blogger’s sidebar.

    But — there’s always a but — can you suggest a way for the script to select a random post from the tumblr instead of going with most recent? There are hundreds of posts hidden in the tumblr’s past and it would be cool to resurrect them. I know that tumblr has a “select a random post function” – but I want it to happen automatically on the other blog.

    Any help would be appreciated.

  • Robert Nyman says:

    David,

    Sorry, from what I know, it’s not that easy for the badge to get random posts.

  • David Ocker says:

    Bummer. But thanks for your response. And for your script.

  • Adrian says:

    Any idea of changing the post title font size? i’ve looking for in the css and the js and no idea :)

    I mean, the title of the post… let’s say, the title have 24px Arial Bold…

    thanks
    (and awesome goodie!)

  • Robert Nyman says:

    David,

    Sure thing.

    Adrian,

    You need to look into CSS Specificity to control that.

  • We’ve been looking for something like this to add to our site.
    As tradesmen(shopfitters) we’re not really clued up on code but we are learning html as quickly as we can.

    Thanks for this,the site is going to get revamped and we intend to add a blog so we want as much in the blog as possible.
    We’ve have a look through your site to see what else we can use lol.

    Thanks again for the great information it’s appreciated.

    Any good code for a flickr feed?

  • Robert Nyman says:

    Glasgow Shopfitters,

    Thanks, glad you like it!
    For Flickr, take a look at the Flickr badge.

  • Cool,I’ll check that out,thanks again Robert,I’ll be having a right good look around your site,goldmine here,
    All the best.

  • Piers says:

    I want to use tumblr badge to load two recent tumblr posts to a Facebook fan page. According to the Facebook api for security reasons they will not allow JavaScript to run onload, does this mean your script won’t work?

    If this is the case can anyone suggest an alternative? Thanks

  • Robert Nyman says:

    Piers,

    The script doesn’t use onload to trigger itself, but it does use the onload event on a script element to know when it has received data back from Tumblr. Try it and see if it works.

  • res says:

    i really like this script. Tumblr is a perfect blog for my clients. but embedding has been very difficult. This is the closest i’ve come to getting it to work. This script is great but could use a little more code. I’m not a Javascript writer, but I can’t seem to get rid of the “undefined” response & I notice the script doesn’t refresh when the posts are deleted from tumblr. I’m assuming possibly that they files still exist in tumblrs archives. i haven’t used tumblr a lot recently and noticed they made a lot of changes and can’t seem to find the archives either to see if the posts still exist…

    ? any help on this?

  • Robert Nyman says:

    res,

    When it comes to implementation, feel free to copy the example in the demo page just as it is. With deletion and undefined responses, however, it might be due to the responses we get from the Tumblr API, and deleted ones should go away fairly soon.

  • Jo says:

    Hi again. I’m a very happy user of this script and all is still working well since I put it on my site in Sept 2010.

    I’m currently looking to see if it’s possible to do something a bit similar with Dropbox, so that I can automatically update files that I link to on my website.

    I was therefore looking back over the script to try and see how it worked so that I could base a new script on it and saw that tumblr now have a new API. I’m just wondering – are you thinking of updating the script to fit in with the new API? It seems to ask for OAuth authentication – would that have to be individually applied for?

    Thanks, and I don’t mean to say that it needs to be updated!

  • Robert Nyman says:

    Jo,

    Glad you like it!
    I haven’t done anything with this script in some time, and have no plans of updating it with the new API, since I basically just don’t have the time, doing lots of other things.

    But feel free to take the script and tweak it in any way you want to!

  • omsoc says:

    hey,
    as im a newbee on programing i was wondering how this works ?
    how do i use this code with dreamweaver ?
    when i try to include it in my webpage it just shows the code but nothing else ..
    so what do i have to do ?
    im sorry for not knowing :)
    regards,
    omsoc

  • Robert Nyman says:

    omsoc,

    Please copy the code in the demo page, replace the username with yours and take it from there. Good luck!

  • Jo says:

    Hi. I’ve tweaked the badge to work with the second version of the API. I’ve also integrated a date format function from Steven Leviathan to allow the customisation of the dates. If anyone would like to use it, here it is on Dropbox.

    It’s very bodgy, so any suggestions for cleaning it up very welcome. And NB I’ve only got link and photo posts on my tumblr blog so those are the only two types I’ve changed.

    Many thanks to Robert for the initial script. Jo

  • Robert Nyman says:

    Jo,

    That’s great, thank you for sharing!

  • snake says:

    Hey, great script!

    Is there any way to make the images link to just the full size image that was originally on Tumblr (that is greater than 500px)?

    Thanks!

  • Robert Nyman says:

    snake,

    Not sure if that data is available from Tumblr. Either way, you need to change the JavaScript yourself to make it do that.

  • Sean says:

    @Richard

    To insert Titles:

    Line 43 of tumblrBadge-1.1.js:

    if (/regular|photo|quote|link|conversation/.test(post.type)) {
    listItem = document.createElement(“li”);
    text = post[“regular-body”] || post[“photo-caption”] || post[“quote-source”] || post[“link-text”] || post[“link-url”] || post[“regular-title”] || “”;
    if (post.type === “regular”) {
    text = “” + post[“regular-title”]+ “” + text;
    }

  • Robert Nyman says:

    Sean,

    Thanks for adding that!

  • H C says:

    Hi Robert,

    Thanks you so much for the tumblrBadge.

    I was able to use the tumblrBadge for my personal website, but for some reason there is a bullet point in front of each of my posts. Do you know if there’s any way of eliminating those bullet points?

    Thanks in advance.

  • H C says:

    Thanks for the suggestion Robert.

  • P. Sauer says:

    Hey, great script! Just wanted to drop my 2c in and say that you should add support for text titles; I added something like

    if(post[“regular-title”]) text = post[“regular-title”] +text;

    to mine so I could display titles above the body!

  • Robert Nyman says:

    P. Sauer,

    Thanks!
    It’s a good suggestion. This script is provided as-is, though, so any tweaks or customizations will in your own installs. Unless you want to set up a GitHub or something for it?

  • Andres says:

    First thanks a million for such an awesome script, it took forever to find the right now to make things work. For some reason it stopped working tonight, it was working fine in the afternoon and stopped working at the night, I thought it was something I had done to my code but when I refer to your Demo page the feed is not there.

    Did something change? What could have cause this?

    Thank you in advance for your time and consideration

  • Robert Nyman says:

    Andres,

    Thanks, glad you like it!
    It could probably mean that the Tumblr API is down, because if you have working code that suddenly stops, it’s seldom something wrong in the code. Hopefully it will be working soon again!

  • alex says:

    Robert, this is really awesome, thanks! I have read through this thread extensively, am using the 1.1 version, but still cannot get the script to work in IE. It works on all other browsers though. Do you have any new suggestions on how to make it work in IE? Thanks

  • Robert Nyman says:

    alex,

    Thank you!
    Not sure what that would be since it’s supposed to work in IE too. Do you get any JavaScript errors or similar in your page?

  • Paul says:

    Trying to add in the Video hack, but all of the files are not available anymore — any help on getting videos and audio to show up?

  • Robert Nyman says:

    Paul,

    Sorry, no don’t seem to be available anymore. You could probably check in the code if the type is video and take it from there.

  • Karine says:

    Hello

    This seems to be the exact piece of code I was looking for…. but it’s not working. I’m building my own website and I want to pull the first 59 characters of the last blog post I’ve written onto my website.

    01. I put this code in my HTML document where I wanted to place the badge: <div id=”tumblr-badge”></div>
    02. I put tumblrBadge-1.1.js into my “js” folder
    03. I changed the username to mine and the number of item to show to 1.

    I suspected that the reason why it was not working was because I didn’t call tumblrBadge-1.1.js in my html document, so I added this code in the head div : <script src=”/path/to/js/tumblrBadge-1.1.js” type=”text/javascript”></script><script src=”js/tumblrBadge-1.1.js”></script>

    I must do something wrong, but I can’t find out…. Do you have an idea?
    Thanks
    Karine

  • Robert Nyman says:

    Karine,

    You only need to include the JavaScript file once in your page, just via a script tag like you did. Try putting alert(“Hello”); to see if it does anything in the page.

    If yes, you know that the file has been included – if not, the path to the file is wrong.

    After that, it should work, from the sound of it.

  • Karine says:

    Hello

    Fantastic! I put the javascript code inside my html. It was not working until I found out that the script was supposed to be placed just before </body> !! I’m such a beginner. Thanks to an earlier post from Nicholas (#187) I managed to include video and audio blog posts and I succeeded in pulling only the text without pictures, videos… :)

    The only thing I’m blocking on is : How to pull only the first 60 characters of my post? Do you have any idea or links that might give a hand? Thank you, Karine

  • Robert Nyman says:

    Karine,

    Glad it worked out!
    When it comes to post length, perhaps this reply helps?

  • Lek Dellosa says:

    Hey Robert! Nice code! :) I’ve been digging for these codes since, forever. But now that I’ve found it, I can’t seem to figure out where to start :( Can you help me? I’ll make it easier for you by just giving you questions to answer. I hope you dont mind.

    1) What am I supposed to do with the downloaded javascript? Where should I put it on my theme’s code? How?

    2) I was wondering if I can make it like, marquee-ing. How can I do that? Is that even possible without me altering the java codes?

    I really hope you can help me cos Im not really into codes. Thankyou so much, Robert!

  • Robert Nyman says:

    Thanks!

    1. Save the JavaScript file somewhere where you can reference it. Then include it, i.e. point to the file, just like in the demo page.

    2. You can, but then you need to alter the JavaScript massively.

  • Lek Dellosa says:

    Omg!! It’s working!! Thanks Robert!!! <3 You're amazing!

  • Robert Nyman says:

    Great! Glad that it works! :-)

  • Lek Dellosa says:

    One more thing Robert, the pictures doesn’t to load :/ Do I have to authorize anything from my Tumblr for it to appear proply?

  • Robert Nyman says:

    Lek,

    Not as far as I know. They should load.

  • John Asistio says:

    Hello Robert, can we customize the imageSize? 100 for me is too small, whole 250 is too big. Help man?

  • Cameron says:

    Awesome code, love the customization options for everything. It’s way better than Tumblr’s embed.

    However, I can’t seem to figure out how to get the video code working. Looking at Nicholas’ post (187), I can’t figure out what i need to do to set it up. Looking at his website, it seems like he just copied over his entire tumblr onto a webpage, no custom css or anything.

    So how do I implement this video code? Do I just need to switch out my current javascript with the new one?

  • Cameron says:

    Alright, I figured out how to implement the new code, but now my CSS is being weird for some reason, and I have no idea why.

  • Robert Nyman says:

    Cameron,

    Glad you got it to work. No idea about the CSS, it probably takes some good tweaking. :-)

  • Cameron says:

    Now my problem is that in Nicholas’ script, every post has the word “undefined” inside of it, which I don’t know how to remove…

  • Robert Nyman says:

    Cameron,

    Well, it means that it tries to access a value that isn’t there. SO the question is what it accesses and why it doesn’t work.

  • Cameron says:

    I believe it’s trying to access the title, and since image posts and the like don’t have titles, it’s returning undefined.

    I just need to know how to stop it from doing this…

  • Robert Nyman says:

    Cameron,

    Ah, is that something specific to his script?
    Since I can’t see it in the original.

  • Cameron says:

    Not sure… how would you fix this in your script, perhaps it will work again here?

  • Robert Nyman says:

    Cameron,

    Well, in the script, for any part that requests a title, add something in line with:

    if (typeof post.title !== “undefined”) {
    output += post.title;
    }

  • georg says:

    Great. Exactly what I was looking for.

  • TROY says:

    Hi Rob,

    I have got it working and It’s great thanks so much for your hard work.

    Just one question though. When I Post Multiple photos in Tumblr It only Post 1 photo appears on my webpage, is there way to make the tumblr badge to post multiple photos in one post?

    cheers, Troy

  • Robert Nyman says:

    TROY,

    Glad it works!
    Not sure about multiple photos, unfortunately.

  • Ikethepike says:

    Where should you insert the

    if (typeof post.title !== “undefined”) {
    output += post.title;
    }

    code?

    Fantastic code by the way!

  • Robert Nyman says:

    Ikethepike,

    Depends on what you want to use it for. But maybe before the if (post.type === “photo”) { line.

  • UtH says:

    Hi Robert,
    I’m trying to load photo links in a new tab or window but tips #179 to #185 do not work.

    when I add link.target = “_blank”; , everything disappears, photos, titles, dates…

  • Jonathan Bidgood says:

    Hi there,

    trying to use your script to embed a tumblr feed into a site. Do you know if it is still working, or whether changes to tumblr may have stopped it functioning? I can’t get it to work, either in the site or even in a simple test html page… Don’t want to keep fiddling if it is known to be defunct.

    Cheers,

    Jonathan.

  • Robert Nyman says:

    Jonathan,

    Don’t know more than you do, I’m afraid. To my knowledge it should work, but I don’t know if they have changed anything.

  • shane says:

    Hey Robert,
    thank you so much for the code! saved me so much trouble finding a tumblr feed.

    i have a problem though. i’m trying to make the image bigger and i understand it’s through the imageSize option. however it doesn’t seem to work and the images are still at 100 when i’ve changed them to 500.

    please advise, thank you so so much! :)
    you can view the website here.
    password: howdri

  • shane says:

    anyway problem solved! (top)

    is there a way to make 2 columns instead of a single long one?
    i’m quite new to coding so apologies for that! :)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>