Embed Tumblr posts in your sidebar!
In the last two weeks I’ve fallen in love with Tumblr. Mostly because it’s SO darn easy to post a photo, link or quote with the bookmarklet. If you look over in the left sidebar of LittleBirdLLC.com/blog there is a stream being pulled in from our Little Bird tumblr. The web is full of amazing things that we see everyday – this is an easy way to collect them as a resource and share them with you.
First, paste the following into a text widget or your sidebar.php file. Replace ‘yourname’ with your tumblr account name.
<script type="text/javascript" src="http://yourname.tumblr.com/js?num=5"></script>
The /js$num=5 is limiting the amount of posts to 5, this can be whatever number you want.
If you look at it now it’s probably a mess. Every element has tumblr css classes wrapped around it so next you’ll want to style it. At the very least you’ll need to change the width so it fits. I recommend using Firebug, the Mozilla Firefox extension, for finding and styling your posts.
/* Tumblr Styles */
ol.tumblr_posts {width: 183px;}
li.tumblr_post {}
li.tumblr_quote_post {}
.tumblr_quote {}
.tumblr_source {}
.tumblr_open_quote {}
.tumblr_close_quote {}
li.tumblr_link_post {}
a.tumblr_link {}
.tumblr_description {}
li.tumblr_photo_post {}
img.tumblr_photo {}
.tumblr_caption {}
/* and that's just a few! */
Tumblr makes it incredibly easy to import RSS feeds so all you have to do is import all of your various feeds to tumblr and Ta-da! Instant life-stream.
Filed under tutorials.Tags: code,tumblr,tutorial
