How to embed recent Tumblr posts

While searching around for a good way to embed recent tumblr posts onto my website, I came across a nice solution.

Louis Stowasser created a widget in Javascript that will easily display your recent tumblr posts after adding a few lines of code to your website or Tumblr blog. You are able to adjust the maximum amount of posts you want to show up and link to any blog you have. Here we have the code to embed your recent Tumblr posts:

Unminified (864 bytes):

&lt;script type="text/javascript"&gt;
(function(blog, limit) {
limit = +limit || 10;

var scriptTags = document.getElementsByTagName('script');
var scriptNode = scriptTags[scriptTags.length - 1];
var recent = document.createElement("div");
scriptNode.parentNode.appendChild(recent);
recent.setAttribute("class", "widget");
recent.setAttribute("id", "TumblrRecentPosts");

var script = document.createElement("script");
script.src = "http://" + blog + "/api/read/json";
script.onload = function(data) {
    if(!tumblr_api_read) return;

    var response = tumblr_api_read.posts;
    var post;
    var len = Math.min(response.length, limit);
    var html = "&lt;ul&gt;";

    for(var i = 0; i &lt; len; ++i) {
        post = response[i];
        html += "&lt;li&gt;&lt;a href='" + (post['url-with-slug'] || post.url) + "'&gt;" + 
            post['regular-title'] + "&lt;/a&gt;&lt;/li&gt;";
    }

    recent.innerHTML = html;
};

document.body.appendChild(script);

})("yourblog.tumblr.com", 30); //enter your settings here
&lt;/script&gt;

(function(blog, limit) {

limit = +limit || 10;

var scriptTags = document.getElementsByTagName('script');

var scriptNode = scriptTags[scriptTags.length - 1];

var recent = document.createElement("div");

scriptNode.parentNode.appendChild(recent);

recent.setAttribute("class", "widget");

recent.setAttribute("id", "TumblrRecentPosts");

var script = document.createElement("script");

script.src = "http://" + blog + "/api/read/json";

script.onload = function(data) {

if(!tumblr_api_read) return;

var response = tumblr_api_read.posts;

var post;

var len = Math.min(response.length, limit);

var html = "<ul>";

for(var i = 0; i < len; ++i) {

post = response[i];

html += "<li><a href='" + (post['url-with-slug'] || post.url) + "'>" +

post['regular-title'] + "</a></li>";

}

recent.innerHTML = html;

};

document.body.appendChild(script);

})("yourblog.tumblr.com", 30); //enter your settings here

</script>

Minified (573 bytes):

&lt;script type="text/javascript"&gt;
(function(d,e){var  e=+e||10,
a=document.getElementsByTagName("script"),
a=a[a.length-1],b=document.createElement("div");
a.parentNode.appendChild(b);b.setAttribute("class","widget");
b.setAttribute("id","TumblrRecentPosts");a=document.createElement("script");
a.src="https://"+d+"/api/read/json";a.onload=function(){if(tumblr_api_read){
for(var a=tumblr_api_read.posts,c,d=Math.min(a.length,e),f="&lt;ul&gt;",g=0;
g&lt;d;++g)c=a[g],f+="&lt;li&gt;&lt;a href='"+(c["url-with-slug"]||c.url)+"'&gt;"+
c["regular-title"]+"&lt;/a&gt;&lt;/li&gt;";b.innerHTML= f}};
document.body.appendChild(a)})
("yourblog.tumblr.com",30); //enter your settings here
&lt;/script&gt;

(function(d,e){var e=+e||10,

a=document.getElementsByTagName("script"),

a=a[a.length-1],b=document.createElement("div");

a.parentNode.appendChild(b);b.setAttribute("class","widget");

b.setAttribute("id","TumblrRecentPosts");a=document.createElement("script");

a.src="http://"+d+"/api/read/json";a.onload=function(){if(tumblr_api_read){

for(var a=tumblr_api_read.posts,c,d=Math.min(a.length,e),f="<ul>",g=0;

g<d;++g)c=a[g],f+="<li><a href='"+(c["url-with-slug"]||c.url)+"'>"+

c["regular-title"]+"</a></li>";b.innerHTML= f}};

document.body.appendChild(a)})

("yourblog.tumblr.com",30); //enter your settings here

</script>

How To Use:

Choose one of the scripts above.
Find where it says “//enter your settings here”.
Change the URL to your blog; Adjust the number of posts you want to display (minimum 10)
Paste the code in your HTML file or (if on your blog) go to your blogs Customization page
Click the Edit HTML button.
Paste the code wherever you want to display your recent Tumblr posts.

Unminified (864 bytes):

Minified (573 bytes):

How To Use:

Share this: