Forked

I added and modified this recent posts widget to my tumblrs :)

I found this which is a cool bit of code that shows the most recent posts on my blog. At first it only worked for text posts and link posts. I modified it to add in videos and photos and quotes, but the formatting was all wrong, and some posts were ridiculously wrong. I modified the code to get around those problems, as best I could. I converted the HTML from the tumblr API into text so that no stray links got in there - which had been a problem before. This also helped with formatting problems. I limited the length of quotes, video captions and photo captions to 80 characters so the posts weren’t too long. I also updated the jquery to 1.5.0 because that was causing some problems with some other things I was doing.

To make it work in your tumblr, put this in your description or somewhere relevant in your theme and replace “foodnhealth” with your tumblr ID. This shows 50 posts, but to shower fewer posts, change the number 50 at the end to whatever you want. Replace the 80 with whatever you want to change the 80 character limit.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js”></script>

<script type=”text/javascript”>

function strip(html)

{

   var tmp = document.createElement(“DIV”);

   tmp.innerHTML = html;

   return tmp.textContent||tmp.innerText;

}

function tumblr(resp) {

var posts = resp.posts;

$(‘#blog .loading’).replaceWith(‘<ul/>’);

$ul = $(‘#blog ul’);

for (var i=0; i<posts.length; i++) {

var p = posts[i];

                var title = p[‘regular-title’] || p[‘link-text’] || null;          

   if (title)

$ul.append(‘<li><a href=”’+p[‘url’]+’”>’+title+’</a></li>’);

    var title =  p[‘photo-caption’]  || p[‘quote-text’] ||  p[‘video-caption’] || p[‘conversation-title’] || p[‘audio-caption’] ||  p[‘question’] ||  null;

   if (title) {

                                   title = strip ( title);

                                   if (title.length>80) title = title.substring(0,80) + “…”;

$ul.append(‘<li><a href=”’+p[‘url’]+’”>’+title+’</a></li>’); 

                 }

                                                                      }

}

</script>

<div id=”blog”>

<h2>Recent Posts</h2>

<span class=”loading”>Loading…</span>

</div>

<script src=”http://foodnhealth.tumblr.com/api/read/json?callback=tumblr&amp;num=50” type=”text/javascript”></script>