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.
130 Comments/Reactions
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!
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.
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.
September 22nd, 2008 at 20:17
mdmadph,
Thanks! And yeah, I agree, more Tumblr things for the people!
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!
September 24th, 2008 at 10:50
Anders,
Great!
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 [...]
October 1st, 2008 at 13:10
Ugh.. how do I use the badge? script code doesn’t seem to work…
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.
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.
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!
October 23rd, 2008 at 6:45
thanks! found it very useful.
October 23rd, 2008 at 9:02
bcardoso,
Great, good to hear!
November 23rd, 2008 at 1:08
Really nice – thanks!
Is there any way to display the post titles too?
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 :-/
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).
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.
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…
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.
December 19th, 2008 at 16:46
This is very nice Robert!
But I have a lame question, I’m new to tumblr
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/
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!
December 19th, 2008 at 21:31
THX Robert, no worries I’ll try to find out
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?
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!
February 2nd, 2009 at 10:34
Gregory,
Great to hear!
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?
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/
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…
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.
February 4th, 2009 at 1:40
I am also having problems with displaying the badge in IE. Could you please help/advice?
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.
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
.
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.
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.
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.
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.
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!
February 5th, 2009 at 14:15
Jermy,
Great to hear!
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!
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.
February 18th, 2009 at 9:21
Has anyone, or does anyone use this on their MySpace pages? And do you know if it works??
February 25th, 2009 at 19:35
What if I only want to show photo updates?
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.
March 2nd, 2009 at 12:45
Your project makes Tumblr far more useful. Thank you!
March 2nd, 2009 at 13:26
tbone,
Thank you!
April 6th, 2009 at 3:19
Thank you for your great work!
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
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.
April 16th, 2009 at 2:53
[...] Read more… [...]
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?
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.
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?
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.
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!
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.
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
May 6th, 2009 at 9:05
Bax,
Thanks, I’m glad you like it!
May 6th, 2009 at 22:46
Great badge Robert. Thank you
Is there a way I can tweak “shortPublishDate”
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.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.
May 11th, 2009 at 10:03
Brian,
Thank you, glad to hear it!
June 10th, 2009 at 20:43
Thanks for the great script, i used it on my blog!
June 11th, 2009 at 0:24
katie,
Nice! Glad you like it!
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!
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.
August 13th, 2009 at 6:56
[...] 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: [...]
August 14th, 2009 at 4:47
Anyway to have title show? If not, I’ll look into myself.
August 17th, 2009 at 0:13
Chris,
Sorry, not by default.
August 24th, 2009 at 10:45
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-on-the-blog
servus,
h
August 24th, 2009 at 20:42
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?
August 24th, 2009 at 20:54
great badge, also looking to try @hannes video hack
August 24th, 2009 at 21:30
@hannes liked your hack. simple, but works great so far. interested to see how it handles a vimeo post.
cheers!
August 27th, 2009 at 0:51
thanks!
the link above is no longer working. i reposted here:
http://h4nne5.tumblr.com/post/172444646/some-work-on-tumblrbadge
i further added the possibility to filter posts by tags.
some testing and i will be happy to contribute to the tumblrbadge project!
August 27th, 2009 at 8:43
hannes,
Great! Just let me know when you’re ready and I will give you access to the project!
September 4th, 2009 at 8:32
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
September 8th, 2009 at 18:29
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.
September 8th, 2009 at 20:09
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.
September 14th, 2009 at 23:07
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:)
September 15th, 2009 at 9:44
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:
<div id="tumblr-badge"></div>
<script type="text/javascript" src="tumblrBadge-1.1.js"></script>
September 18th, 2009 at 22:58
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?
September 18th, 2009 at 23:02
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
timeToWait.There you can set the desired time to wait, in milliseconds.
Good luck!
October 20th, 2009 at 11:51
Thank for the sample code and I test it with FF and working fine.
November 3rd, 2009 at 1:41
Thanks a lot! To you too Hannes, I’m currently using the audio/video posting hack and it works great!
November 3rd, 2009 at 2:12
Rita, Forrest,
Glad that you like it!
November 24th, 2009 at 9:31
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
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
November 24th, 2009 at 10:26
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;-)
November 25th, 2009 at 10:48
marta,
Good luck!
November 30th, 2009 at 22:39
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.
November 30th, 2009 at 22:45
Jakob,
After line 52, include a line that will look something like this:
img.className = "Jakobs-class-name";Good luck!
November 30th, 2009 at 22:56
It worked like a charm – thank you, Robert!
November 30th, 2009 at 22:59
Jakob,
Great!
November 30th, 2009 at 23:02
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.
November 30th, 2009 at 23:06
Jabok,
Nice! Personally, I really like ColorBox.
November 30th, 2009 at 23:35
Oh! I shall certainly remember that when I ever need something more versatile!
December 1st, 2009 at 6:59
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
December 1st, 2009 at 11:05
Yianni,
Timeouts could pose a problem, but you can set the desired time to wait yourself in the JavaScript file.
December 2nd, 2009 at 2:06
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.
December 2nd, 2009 at 10:39
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.
December 18th, 2009 at 15:33
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’!
December 18th, 2009 at 15:38
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.
February 2nd, 2010 at 16:36
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?
February 2nd, 2010 at 22:19
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!
February 4th, 2010 at 14:48
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-extended.js
He has included this to get the title of text posts:
if (post.type === “regular”) {
text = “<strong>” + post["regular-title"]+ “</strong><br>” + 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).
February 4th, 2010 at 15:47
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…
February 4th, 2010 at 16:35
Richard,
Right. I think you need to experiment with changing the values around, and switching the order to get your desired result.
February 19th, 2010 at 2:25
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/blog/
Thank you! Awesome work!
February 19th, 2010 at 9:53
Erin,
1. Remove it with desired CSS code. For instance:
ul li {list-style: none;}2. Not supported as of right now
February 19th, 2010 at 11:23
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
February 19th, 2010 at 17:53
Christian,
Sorry, but I have no idea why that would be.
March 7th, 2010 at 14:13
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.
April 12th, 2010 at 15:54
Thank you so much! I used the hack from hannes. It works beautifully. I am indeed very grateful.
April 12th, 2010 at 16:25
Mayowa,
No, that’s just to show the result of the tumblrBadge in place.
ntlk,
Glad it was useful!
May 5th, 2010 at 3:08
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!
May 5th, 2010 at 8:58
chris,
Sorry, no idea why it won’t work in Square Space.
May 16th, 2010 at 1:59
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?
May 16th, 2010 at 7:44
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.
May 17th, 2010 at 9:40
robert smith,
The line to look for is this:
postLink.innerHTML = (settings.shortPublishDate)? post["date"].replace(/(^\w{3},\s)|(:\d{2}$)/g, "") : post["date"];Change that to:
postLink.innerHTML = post["date"];Then you will get the default date value from Tumblr, and can use
substringor similar in JavaScript to read out the parts of the string you want to.May 18th, 2010 at 10:56
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.
May 18th, 2010 at 10:59
istara,
Glad it was helpful!
May 21st, 2010 at 15:42
hi! that’s great! thanks for ur work!! Now i’ll try to customize a little
bests from Barcelona!
May 21st, 2010 at 16:06
Marcel,
Enjoy!
May 26th, 2010 at 17:09
Do you know how to put this in wordpress? I simply love it!
May 27th, 2010 at 10:10
Suzie,
You can, for instance, just include the JavaScript code here in your sidebar.php template where you want it.
June 19th, 2010 at 20:04
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.
June 19th, 2010 at 20:07
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.
June 23rd, 2010 at 0:13
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!
June 23rd, 2010 at 11:00
JB,
You are welcome!
July 2nd, 2010 at 1:00
This is fantastic! Thanks very much. Looks good tucked into jQuery tooltip
July 20th, 2010 at 1:03
How do I remove the blue border around the images?
July 28th, 2010 at 3:01
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
Write a comment
Twitter reactions