In my exploration to learn on how to Embed Tumblr into my website, I came across the Tumblr API (Application Programming Interface). As I am no expert in coding, and having very little experience with PHP, XML etc, I wanted to find out how I could Embed Tumblr with the Tumblr API on a basic, and easy to use level.

If you’ve read my previous post on how to Embed your latest Tweet into your website, then you may have heard me ranting and raving about SimpleXML. Essentially (from what i’ve learnt so far…), lets you extract specific ‘bits’ of information from XML files, and do ‘stuff’ with those ‘bits’. Very handy if you want to Embed Tumblr on your website!

If you don’t know what an XML File is then that’s ok. An XML file is just a really organised way of structuring data. For the likes of the Tumblr API, XML files are used to store all the information in your latest blog posts, so that you can go in and take out only the essential information and do ‘stuff’ with that.

So let’s begin!

1. Retrieving your latest post from Tumblr

To tell Tumblr you want to return your latest post you have to give Tumblr a few pieces of information. 

  • That the post is on your blog
  • That you want the latest post
  • The type of post (text, photo, quote…)

Lets get our Tumblr XML Feed up then. We do that like this:

http://finlay.tumblr.com/api/read

If you stick that address into your browsers navigation bar, that will take you to the XML file where all my Tumblr posts are. Because we have not defined any parameters for what we would like Tumblr to return, it will just go ahead and send back everything I’ve ever written. So we’ve got to do something about that!

To tell Tumblr what we want back, we had information onto the end of the URL above, and it will send back that information. We start this by adding a ‘?’ to the end of the URL, and then list of the parameters one by one, separated by a ‘&’. 

To tell Tumblr you want to bring back the latest post you have to tell it which post you would like to start at, and and how many posts to return. So as with all things computing, we start at 0, and tell Tumblr to return 1 entry. This is done like this:

http://finlay.tumblr.com/api/read?start=0&num=1

So we’ve told Tumblr that we want to read from my blog (through the API), from the first post (denoted by ‘start=0’) and that we want to return 1 post (denoted by ‘num=1’).  Easy! We’re one step closer to Embedding Tumblr on your site!

Now we tell Tumblr what kind of post we would like to return. For the purpose of this demonstration we will return a text post. This is done like so:

http://finlay.tumblr.com/api/read?start=0&num=1&type=text

So stick that into your browser and that will return my latest text post.

2. Finding what we want to Embed and Spitting it Out!

Now that we’ve got the right information back, we now need to know how to get into that, and bring back only the bits we want. To do so, you need to be able to read the XML file in it’s pretty, organised way. Now if you go to that URL we made earlier for returning my latest text post, it won’t look that neat. But if you right-click on that page and select ‘View Source’, your browser will show you the raw XML File. We can then look through this and take out what we want!

So let’s assume we want to first return the Title of the Post (but this will work for anything in the XML File). So after a quick inspection we can see that the Title of my latest post is stored in the tag:

<regular-title></regular-title>

So, using SimpleXML in PHP, we can tell our PHP look through for that tag, and then return it’s entire contents. (Because that partiucular tag has a hyphen in it, we have to put {’ on either side of the tag so that SimpleXML can read it) We do that like so:

$title = $xml->posts->post->{‘regular-title’};

In this example i’ve created a variable called ‘title’ to give me somewhere to store the title.

We then use the echo command to print that out on my webpage. On my site I wanted to have the title of my latest blog post be a ‘<h1>’ so I concatenated (stuck together) my ‘<h1>’ tags with the title of the blog post in my echo of the title. Like this:

echo ‘<h1>’.$title.’</h1>’;

So now you can do that with the title, just do the same thing with the ‘<regular-body>’ tag to bring back the body of your post. That is, almost, all you need to Embed Tumblr on your website.

But what if you want to only bring back a taster of your latest blog post?

Good question! If you want to Embed Tumblr into your site, it may be useful to give the user a snippet of the blog instead of the whole thing. Well what we can do is take the contents of the ‘<regular-body>’, and tell our PHP that we only want to use X number of characters from that in our webpage. Do that like this:

$post = $xml->posts->post->{‘regular-body’};
$small_post = substr($post,0,320);
echo $small_post;

So what we’ve done there is we’ve taken the contents of the tag ‘<regular-body>’, and we’ve then used the substr() function in PHP to take only the first 320 characters from the post. Then we saved that into a variable called ‘small_post’ and then we printed that. Easy!

SO HERE IS ALL THE CODE YOU’RE GONNA NEED TO EMBED TUMBLR WITH THE BLOG TITLE, REDUCED BLOG BODY, AND THE LINK TO THE ORIGINAL POST!

<?php
$request_url = “http://finlay.tumblr.com/api/read?type=post&start=0&num=1”;
$xml = simplexml_load_file($request_url);
$title = $xml->posts->post->{‘regular-title’};
$post = $xml->posts->post->{‘regular-body’};
$link = $xml->posts->post[‘url’];
$small_post = substr($post,0,320);
echo ‘<h1>’.$title.’</h1>’;
echo ‘<p>’.$small_post.’</p>’;
echo “…”;
echo “</br><a target=frame2 href=’”.$link.”’>Read More</a>”; 
?>

So there you have it! Everything that you could need to get started if you want to Embed Tumblr into your website.

If you have any questions please leave a comment below or email me directly - hello@finlaycraig.com

Happy Blogging!

ps… Have you used this to Embed Tumblr into your website? If so, let me know in the comments below!

Notes
  1. enegot reblogged this from finlay
  2. autoengine reblogged this from finlay
  3. krushedglass reblogged this from finlay
  4. missherico reblogged this from finlay
  5. lavocedellegno reblogged this from finlay