Integrating tumblr blog with website

Question

I would like to integrate my tumblr feed in to my website. It seems that tumblr has an API for this, but I'm not quite sure how to use it. From what I understand, I request the page, and tumblr returns an xml file with the contents of my blog. But how do I then make this xml into meaningful html? Must I parse it with php, turning the relevant tags into headers and so on? I tell myself it cannot be that painful. Anyone have any insights?

Answer 1

You can use PHPTumblr, an API wrapper written in PHP which makes retrieving posts a breeze.

Answer 2

There's a javascript include that does this now, available from Tumblr (you have to login to see it): http://www.tumblr.com/developers

It winds up being something like this:

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

Answer 3

If you go to http://yourblog.tumblr.com/api/read where "yourblog" should be replaced with the name of your blog (be careful, if you host your Tumblr blog on a custom domain, like I do, use that) you'll see the XML version of your blog. It comes up really messy for me on Firefox for some reason so I use Chrome, try a couple of different browser, it'll help to see the XML file well-formed, indented and such.

Once your looking at the XML version of your blog, notice that each post has a bunch of data in an attribute="value" orientation. Here's an example from my blog:

<post id="11576453174" url="http://wamoyo.com/post/11576453174" url-with-slug="http://wamoyo.com/post/11576453174/100-year-old-marathoner-finishes-race" type="link" date-gmt="2011-10-17 18:01:27 GMT" date="Mon, 17 Oct 2011 14:01:27" unix-timestamp="1318874487" format="html" reblog-key="E2Eype7F" slug="100-year-old-marathoner-finishes-race" bookmarklet="true">

So, there's lots of ways to do this, I'll show you the one I used, and drop my code on the bottom of this post so you can just tailor that to your needs. Notice the type="link" part? Or the id="11576453174" ? These are the values you're going to use to pull data into your PHP script.

Here's the example:

<!-- The Latest Text Post -->
<?php
    echo "";
    $request_url = "http://wamoyo.com/api/read?type=regular"; //get xml file
    $xml = simplexml_load_file($request_url); //load it
    $title = $xml->posts->post->{'regular-title'}; //load post title into $title
    $post = $xml->posts->post->{'regular-body'}; //load post body into $post
    $link = $xml->posts->post['url']; //load url of blog post into $link
    $small_post = substr($post,0,350); //shorten post body to 350 characters
    echo // spit that baby out with some stylish html
        '<div class="panel" style="width:220px;margin:0 auto;text-align:left;">
            <h1 class="med georgia bold italic black">'.$title.'</h1>'
            . '<br />' 
            . '<span>'.$small_post.'</span>' . '...' 
            . '<br /></br><div style="text-align:right;"><a class="bold italic blu georgia" href="'.$link.'">Read More...</a></div>
        </div>
        <img style="position:relative;top:-6px;" src="pic/shadow.png" alt="" />
    '; 
?>

So, this is actually fairly simple. The PHP script here places data (like the post title and post text) from the xml file into php variables, and then echos out those variable along with some html to create a div which features a snippet from a blog post. This one features the most recent text post. Feel free to use it, just go in and change that first url to your own blog. And then choose whatever values you want from your xml file.

For example let's say you want, not the most recent, but the second most recent "photo" post. You have to change the request_url to this:

$request_url = "http://wamoyo.com/api/read?type=photo&start=1"

Or let's say you want the most recent post with a specific tag

$request_url = "http://wamoyo.com/api/read?tagged=events";

Or let's say you want a specific post, just use the id

$request_url = "http://wamoyo.com/api/read?id=11576453174";

So all you have to do is tack on the ? with whatever parameter and use an & if you have multiple parameters.

If you want to do something fancier, you'll need the tumblr api docs here: http://www.tumblr.com/docs/en/api/v2

Hope this was helpful!

Answer 4

There are two main ways to do this. First, you can parse the xml, pulling out the content from the the tags you need (a few ways to do this depending on whether you use a SAX or DOM parser). This is the quick and dirty solution.

You can also use an XSLT transformation to convert the xml source directly to the html you want. This is more involved since you have to learn the syntax for xslt templates, which is a bit verbose.