I've really been loving Tumblr lately. It's been making my photo publishing workflow a lot simpler. Here's the typical process now:
- Take a bunch of photos.
- When I get home, pull out the memory card and import everything into Picasa.
- When I get time, flip through the photos in Picasa. Delete crap ones, Star the good ones, tag others for repair or editing later.
- 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).
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?
ReplyDeleteCheers mate!
Sorry Rob, I've looked at it in IE 8 and there's no problems there, even though there were problems in IE 7.
ReplyDeleteThanks 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.
Thanks for pointing that out!
ReplyDeleteI'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;
}
This is great I've been looking for something like this for ages.
ReplyDeleteThanks!
I messed with it a bit (not very good with code). Is there any chance of getting the pictures to click through?
THANK YOU, just what I needed! =)
ReplyDeleteHow 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!
Hi Maria,
ReplyDeleteIt 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.
Hi,
ReplyDeleteVery 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 !
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.
ReplyDeletepetrinayuan@hotmail.com
The CSS needs to go in the template HTML. In Blogger, go to Design -> Edit HTML. Paste it in somewhere after the /* Content --*/ block.
ReplyDeleteHi^^
ReplyDeleteThis 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 ~~!
@aloeverahe I just added a bit of CSS and an onclick handler to the DIV that holds the Tumblr widget. Like so:
ReplyDelete<div style="cursor:pointer" onclick="document.location.href='http://rengber.tumblr.com/'">
Oh! Thank you so much! Works just like yours now ^^ Thank you! Thank you!
ReplyDeleteHi, 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@Mother Theresa I've had a couple people ask that. It's pretty simple.
ReplyDeleteThe 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/'"
So the full code of the widget should look like this:
ReplyDelete<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>
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!
ReplyDeleteDo 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.
ReplyDeleteI'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?
ReplyDeleteHi 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.
ReplyDeleteJust 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; } )
Rob,
ReplyDeleteThanks 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! ^^;
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:
ReplyDeleteTumblr Badge for Blogs and CSS Troubleshooting
http://rengberg.blogspot.com/2009/08/tumblr-badge-for-blogs-and-css.html
Corrected CSS:
ReplyDeleteTumblr Badge for Blogs and CSS Troubleshooting
Rob,
ReplyDeleteThanks 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...
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..
ReplyDeleteHTML 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.
ReplyDeleteIf 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.
Hmm. . . Looks like you can get Firebug for pretty much any browser now. Cool!
ReplyDeletehttp://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/
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.
ReplyDeleteYou 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.
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.
ReplyDeleteHi Steven,
ReplyDeleteYou 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
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?
ReplyDeletehello 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.
ReplyDeleteI 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.
ReplyDeleteThanks Rob.
richardmordenillustration.blogspot.com
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...)
ReplyDeleteGreat, 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?
ReplyDeleteThat's controlled by the widget definition in the blogger dashboard, just leave the title empty.
DeleteNo sorry, I mean the text that tumblr puts as a caption on each photo.
ReplyDeleteAh 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.
ReplyDeletehttp://www.w3schools.com/css/css_display_visibility.asp
I found it, you'll need a new CSS style to apply to the caption.
ReplyDeleteIn 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;
}
works amazing, thank you! one last question. would you know how to show just three posts instead of 10?
ReplyDeleteI know that it's possible to pass parameters to the JS to make it do things, for example you can query by tag.
ReplyDeletehttp://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.
Never mind, finally found it!
ReplyDeleteUse 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
you are amazing, thank you! now do i put this tag in my css or with where its actually embedded on my blog?
ReplyDeleteIt goes in the widget definition:
ReplyDelete<script type="text/javascript" src="http://yourname.tumblr.com/js?num=3"></script>
thank you :)
ReplyDeleteHi Rob,
ReplyDeleteThis 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
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.
ReplyDeleteHello, 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.
ReplyDeleteYes, 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.
ReplyDeletei would like to make mine scroll too but am not totally sure how to incorporate the jquery with this tumblr script?
ReplyDelete