Sunday, March 15, 2009

Flickr, Tumblr, and a Tumblr Badge Widget for Blogs

I've really been loving Tumblr lately. It's been making my photo publishing workflow a lot simpler.

Here's the typical process now:
  1. Take a bunch of photos.
  2. When I get home, pull out the memory card and import everything into Picasa.
  3. When I get time, flip through the photos in Picasa. Delete crap ones, Star the good ones, tag others for repair or editing later.
  4. Select the Starred photos in Picasa and hit the Picasa2Flickr button. This little guy is a huge win. It basically just chucks all the photo file names onto a command line for the Flickr Uploader. You can set titles, descriptions, and tags as a batch.

Now here's where Tumblr starts to come in handy. I've always been tagging some of my favorite photos with "BlogBadge", which causes them to be eligible for appearance in the random 10 photos that go in the Flickr badge in the right sidebar. That thing uses the Flickr API, a bit of script and a bit of CSS, but I've forgotten how I originally did it, so that's a whole other post for later.

Anyway, I configured Tumblr to subscribe to the RSS feed for "BlogBadge" tagged photos as well.
So Tumblr will pull in the photo, it's title, and description. I've then set up Facebook to pull the Tumblr feed. So that saves me the trouble of cross-posting photos to Facebook.

Now to save the trouble of posting tiny little "here's what I did last weekend and a couple of photos" posts to Blogger, I created a little badge widget for my blog sidebar.

Tumblr provides a basic script to pull badge HTML, but the images are full size.

<script type="text/javascript" src="http://rengber.tumblr.com/js"></script>


I've whipped up a bit of CSS to cut down the image size, tweak the colors, and contain the Tumblr post text into a sidebar box. Just stick the following in your stylesheet, or in a style tag near the widget script.


.tumblr_photo
{
width: 110px;
height: auto;
float: right;
margin: 7px;
border: 2px black solid;
}

.tumblr_posts
{
margin-left: -50px;
}

.tumblr_post
{
font-size: x-small;
list-style-type: none;
width: 210px;
padding: 7px;
margin: 5px;
max-height:200px;
overflow: hidden;
border: thin black outset;
background-color:#78a;
}


So from a simple batch Flickr upload, I've now covered both my Blog and Facebook, and the photos are available via iPhone. Which brings me to the main reason I love Tumblr: their excellent iPhone app.

From the dashboard of the Tumblr app, I can post any photo from the iPhone, and using CoolIris or Flickr mobile, I can pull any Flickr photo into the iPhone. Which means that I can do simple photo updates easily on the bus ride to or from work every day. Much more pleasant than messing around in Blogger (which is quite painful from the iPhone).

49 comments:

  1. This is a great tutorial! The only problem is that I notice the badge displays fine in firefox, but the margin is out in IE. I assume it's the styling 'margin-left'...do you know how to fix it so that it displays fine in IE too?

    Cheers mate!

    ReplyDelete
  2. Sorry Rob, I've looked at it in IE 8 and there's no problems there, even though there were problems in IE 7.

    Thanks again for the tutorial and css - I've wanted to put my tumblr stuff on my blog for a while and this is the best info I've found.

    ReplyDelete
  3. Thanks for pointing that out!

    I'd tested in Firefox, Chrome, and IE8, but not IE 6-7. The problem turned out to be that those IE versions use a fairly large default margin, while the others use a bit of default padding. So setting the left margin to negative had a much larger impact on the IE layouts.

    The solution was to set both margin and padding to zero. I'll post something on it when I get a chance, but here's what I did to the CSS:

    .tumblr_posts
    {
    margin: 0px;
    padding: 0px;
    }

    ReplyDelete
  4. This is great I've been looking for something like this for ages.

    Thanks!

    I messed with it a bit (not very good with code). Is there any chance of getting the pictures to click through?

    ReplyDelete
  5. THANK YOU, just what I needed! =)

    How would I limit the amount of tumblr posts that appear on my blog?

    I have 5 per page on my tumblr site but on my blog I think it's just going to keep going.

    Thanks in advance!

    ReplyDelete
  6. Hi Maria,

    It looks like the default is to pull 10 Tumblr posts. I would have thought their script would be configurable, but it looks like not.

    If you don't want 10, the best workaround might be to write a bit of javascript that pulls the Tumblr divs from the DOM and sets x-10 to hidden. I'll give that a try, might take me a while to get to it though.

    ReplyDelete
  7. Hi,

    Very nice code ! I'm using it into my blog to publish pictures I have on my tumblr. I changed it a bit, and, to publish only one picture (not 10) I put this in the tumblr_posts part :

    max-height:186px;
    overflow: hidden;

    Of course, it works because every picture I use is 186px-high.

    Many thanks for the code !

    ReplyDelete
  8. I cannot seem to get the code correct.... :( where can I put the style codes which you have created. P/s:I am not html trained.

    petrinayuan@hotmail.com

    ReplyDelete
  9. The CSS needs to go in the template HTML. In Blogger, go to Design -> Edit HTML. Paste it in somewhere after the /* Content --*/ block.

    ReplyDelete
  10. Hi^^
    This code is really great! There's nothing wrong with the code, except I just want to ask how you made your whole 'Tumblr Feed' a link. I want mine to have a relink back to the actual blog by just clicking it (like yours ^^), or even better, a direct link to the post.
    Thanks! Been a great help already ~~!

    ReplyDelete
  11. @aloeverahe I just added a bit of CSS and an onclick handler to the DIV that holds the Tumblr widget. Like so:

    <div style="cursor:pointer" onclick="document.location.href='http://rengber.tumblr.com/'">

    ReplyDelete
  12. Oh! Thank you so much! Works just like yours now ^^ Thank you! Thank you!

    ReplyDelete
  13. Hi, I managed to do the styling by following your example, and now I have the badge on my sidebar, but I can't figure out how to get the onclick handler to work. I want the whole box to link to my Tumblr blog like yours. So, just exactly what do I need to add and where? Any help you can give me would be greatly appreciated.

    ReplyDelete
  14. @Mother Theresa I've had a couple people ask that. It's pretty simple.

    The click-through is just a little bit of CSS and Javascript in the widget code. Add the following two attributes to the main Tumblr DIV:


    style="cursor:pointer"
    onclick="document.location.href='http://rengber.tumblr.com/'"

    ReplyDelete
  15. So the full code of the widget should look like this:

    <h2>
    <a style="text-decoration:none;"
    href="http://rengber.tumblr.com/">Tumblr Feed</a>
    </h2>
    <div style="cursor:pointer"
    onclick="document.location.href='http://rengber.tumblr.com/'">
    <script src="http://rengber.tumblr.com/js"
    type="text/javascript"></script>
    </div>

    ReplyDelete
  16. Hey, thanks! I've got it up and running. I spent several days looking for a good way to embed Tumblr, and your script is the best I've found. Great job!

    ReplyDelete
  17. Do you have any idea on how to make videos posted on Tumblr fit into the badge? Right now I'm only getting one corner in the frame.

    ReplyDelete
  18. I'm totally inept at this. I'm not sure if it's because I have a custom template or what, but I just can't figure out where to put the CSS to get it to work. Is there any way I could just copy-and-paste something into the add HTML/JaveScript widget to get this widget to work for me?

    ReplyDelete
  19. Hi True. The CSS classes have to go into your template HTML. Unfortunately, you can't just put them in the JavaScript widget, and the tumblr js code isn't very configurable.

    Just look for a style element in your template header and put the CSS anywhere in there. There'll be other classes in there to help you spot the right place ( .classname { attr : val; } )

    ReplyDelete
  20. Rob,

    Thanks for the tip. It seems to be working a bit better now, but it still doesn't look as nice as the one you have in your sidebar. I'm having issues with getting it the right width and something other than that dingy blue. I've been tweaking and playing with it for an hour or so, but I'm still lost. One of the things that is really confusing me is the fact that when I set the photo or post to float center, it appears to float left.

    Sorry to bug you for so much help! ^^;

    ReplyDelete
  21. Ah, right, sorry ...I did a follow up on this post quite a while later where I figured out some cross-browser CSS issues and updated the widget code to correct them. This might help:

    Tumblr Badge for Blogs and CSS Troubleshooting
    http://rengberg.blogspot.com/2009/08/tumblr-badge-for-blogs-and-css.html

    ReplyDelete
  22. Rob,

    Thanks for the link. I adjusted accordingly, but no positive change. For some reason, I'm no longer able to adjust the size of the photo. Also, there's about a 15-20px gap in between each post still.

    The funny thing is, I've tried using the css in another test blog with the Awesome template from Blogger, and everything looked great!

    However, that's not the template I want to use. So, the CSS not working on the template I want is definitely not great. It has to be some issue with my template. I'm just not sure what.

    Any guesses? I'm completely lost...

    ReplyDelete
  23. Sorry! I take the part about the photos back. I've managed to get the re-sizing of those to work again after taking out some code garbage. They still won't align center, though..

    ReplyDelete
  24. HTML and CSS can be pretty temperamental with the various browsers, and I'm a bit of a hack with this design stuff. But usually I find that when something that was working stops working (like your image resizing), usually it's because something is commented out, or there's a mismatched bracket somewhere.

    If you've got the parts working in another template, I'd revert the template you want back to the way it started, and paste in the working Tumblr CSS directly from the other. The Tumblr CSS classes all have Tumblr in their names, so they shouldn't conflict with any template.

    If that doesn't work, try the firebug plug-in for Firefox, that has a nice hover-over CSS inspector.

    ReplyDelete
  25. Hmm. . . Looks like you can get Firebug for pretty much any browser now. Cool!

    http://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/

    ReplyDelete
  26. I had a look around, I'm guessing it's just a matter of your Tumblr content being a bit more complex than mine. My Tumblr is pretty much just a feed of my favorite photos on flickr, so the structure is pretty predictable in every post div: photo, title, description.

    You might have a few more div's in play, and your photos might sometimes be indented by their surrounding text. You'll have to poke around in Firebug to see.

    ReplyDelete
  27. This is great! I'm glad to have found your help. But I was wondering if there's ANY way to keep this from showing non-photo posts? since anything else shows up as an error message in the sidebar for me.

    ReplyDelete
  28. Hi Steven,

    You can actually query Tumblr using the initial URL that you link in the Script Tag. Like so:

    http://rengber.tumblr.com/js?tag=BlogBadge

    <script type="text/javascript" src="http://rengber.tumblr.com/js?tag=BlogBadge"></script>

    This means you'll have to tag the posts you want to feed through to your blog, but that shouldn't be too much trouble. There are probably other query types that are possible, but I don't know them. A good start would be their regular script API documentation. I'd guess that anything you can query via API might be exposed via Querystring to the .js. Have a look here:

    http://www.tumblr.com/docs/en/api/v2

    ReplyDelete
  29. This is great, but I don't know any html, I don't know what any of this means. Can somebody give me a code that I can stick in the add a gadget box that includes all these changes? Sorry, but I have tried a few times and it isn't working, I keep getting huge images and then some rubbish at the bottom. I have no idea where to add all the other codes. Is there a simpler code maybe?

    ReplyDelete
  30. hello rob, i want to put a Tumblr badge into my sites. i like the badge you created above. unfortunately, i am code-challenged. would you please write the instructions again, including the code? i would appreciate it.

    ReplyDelete
  31. I used the code and it worked a treat - it was exactly what i needed. Reading through the questions and answers gave me the info I needed to customise the code to suit my needs.

    Thanks Rob.

    richardmordenillustration.blogspot.com

    ReplyDelete
  32. Thanks for this! I just started a Tumblr for a 365 project, and your code is perfect. It all appears to be working smoothly so far! (I actually just stuck a style tag in the widget, and it seems to be fine...)

    ReplyDelete
  33. Great, thanks! How would you remove the text in this widget, or at the very least change the color of it to white so it doesnt show up?

    ReplyDelete
    Replies
    1. That's controlled by the widget definition in the blogger dashboard, just leave the title empty.

      Delete
  34. No sorry, I mean the text that tumblr puts as a caption on each photo.

    ReplyDelete
  35. Ah right, just add your styles to .tumblr_post{} you could do color: whatever; or better yet: visibility: hidden; or display: none; Though come to think of it the visibility tags might make the whole block disappear, there may be another class applied to the text that I didn't look for. It'll be in the tubmblr js.

    http://www.w3schools.com/css/css_display_visibility.asp

    ReplyDelete
  36. I found it, you'll need a new CSS style to apply to the caption.
    In the js it is:

    div class=tumblr_caption

    Just add a new style to make that either hide, or not display, depending on whether or not you want the space to reserve:

    .tumblr_caption
    {
    visibility: hidden;
    }

    ReplyDelete
  37. works amazing, thank you! one last question. would you know how to show just three posts instead of 10?

    ReplyDelete
  38. I know that it's possible to pass parameters to the JS to make it do things, for example you can query by tag.

    http://rengber.tumblr.com/js
    vs.
    http://rengber.tumblr.com/js?tag=BlogBadge

    But I've never been able to find a parameter to limit post count. That read-only api is not very well documented on the Tumblr site.

    At this point you're into some scripting. You could easily hide elements after a certain count using JQuery, but I'm not a JQuery guru, so I don't know the specifics off the top of my head. I do know it'd probably be about 2 lines though. JQuery's meant for that sort of thing, and makes it pretty easy.

    ReplyDelete
  39. Never mind, finally found it!

    Use the "num" parameter.

    http://rengber.tumblr.com/js?num=3

    It is actually documented, as the Tumblr version 1 API:
    http://www.tumblr.com/docs/en/api/v1

    Looks like the following parameters will work:
    start
    num
    type
    id
    filter
    tagged
    search
    state

    ReplyDelete
  40. you are amazing, thank you! now do i put this tag in my css or with where its actually embedded on my blog?

    ReplyDelete
  41. It goes in the widget definition:

    <script type="text/javascript" src="http://yourname.tumblr.com/js?num=3"></script>

    ReplyDelete
  42. Hi Rob,
    This looks fantastic and I wanted to do it. But I am in wordpress. Can you explain the instructions for where I find the source code and how I can alter it?
    Have not done any code in seven years so am very very rusty...If you can let me know where to open and how to do it, that would be great.
    Kae

    ReplyDelete
  43. I don't know anything about Wordpress, but as long as it lets you incorporate JavaScript widgets into your layout, the same instructions should work. The initial script include from Tumblr gets all the content, then the CSS can be placed anywhere you want.

    ReplyDelete
  44. Hello, Do you know if it is possible so that the thumbnails scroll, or automatically move like a slideshow? right now i have the widget height set to only show three images.

    ReplyDelete
  45. Yes, both of those are possible. You'd need to script the movement on a timer. JQuery would make that simple, there's probably even a plugin for it.

    ReplyDelete
  46. i would like to make mine scroll too but am not totally sure how to incorporate the jquery with this tumblr script?

    ReplyDelete