Written by Ryan Nutley.
Simon had set me the challenge of finding a way to integrate Tumblr into the new DotDash site. I’d seen many creative things done with Twitter feeds, Facebook feeds and even LinkedIn feeds, but I’d never seen anything done with Tumblr feeds. Intrigued by the possibilities of the relatively new Tumblr API, I set to work to see if Tumblr had made their system as easy for a developer as they had for a blogger. My goals were as follows:
- Figure out the Tumblr API
- Use the Tumblr Data to do something
Figuring Out the Tumblr API
First thing we needed was to get an API key to allow us to talk to Tumblr, so we headed over to Register a Tumblr Application. The guys at Tumblr have made it easy to get an API key and seem to be using the same authentication system as Twitter… happy days. We register, get our code and move on to stage two.
Next we try to pull information from Tumblr. When you enter an address in your browser, you are basically sending a message from your computer to another computer asking for something. If this is done correctly, you will get what you want.
When dealing with API’s however, computers get very personal and want to know who’s asking for the information, this is exactly the way Tumblr has been set up. Tumblr only responds to “polite” requests, so instead of simply asking “Can I have that webpage?” we needed to structure our request to be more like “I’m Ryan from DotDash, could I please see this webpage?”
It may seem silly, but that’s just the way it is.
As a result we needed to be very specific about how we structured our request to Tumblr. The default API URL structure for Tumblr is as follows:
“http://api.tumblr.com/v2/blog/{base-hostname}/…”
Where “{base-hostname}” represents the name of the blog we want information about. Our Tumblr blog is dotdashdotie.tumblr.com, so we had to use the following structure for our request:
http://api.tumblr.com/v2/blog/dotdashdotie.tumblr.com/…
We were about half way there at this stage!
When you paste this in your browser, according to Tumblr, the URL does not exist. So we tried a little hack to see if we could force our way into obtaining some information. The problem with the above URL was that we asked Tumblr for “some” instead of “one” (remember, requests need to be polite and concise). We needed to ask Tumblr not just for the blog, but a specific part of the blog. We then asked it for the information about the blog and changed our request to the following:
http://api.tumblr.com/v2/blog/dotdashdotie.tumblr.com/info
The last response was a 404 (that page just plain didn’t exist). The next response was a 401 (the page exists, but we didn’t have permission to view it). Still no good!
{“meta”:{“status”:401,”msg”:”Not Authorized”},”response”:[]}
We were rude again and weren’t concise about what we wanted. We meant well, but we failed to introduce ourselves. Instead of saying “Would you mind if I had a quick look at this please?”, we needed to reformat our URL to include “I’m Ryan from DotDash”. This is where the API key comes into play. We added it to the URL so it looked as follows:
http://api.tumblr.com/v2/blog/dotdashdotie.tumblr.com/info?api_key={API_KEY}
Awesome, now we were good to go! This is just what we wanted. We had ticked all the boxes as far as Tumblr was concerned, and we were rewarded with a response. We got a message back in JSON format (human readable javascript object notation) that was ours to do with as we pleased:
{“meta”:{“status”:200,”msg”:”OK”},”response”:{“blog”:{“title”:”DotDash”,”posts”:65,”name”:”dotdashdotie”,”url”:”http:\/\/dotdashdotie.tumblr.com\/”,”updated”:1352216795,”description”:”Inspiration\/Thoughts\/Songs\/Spume”,”ask”:false,”likes”:1}}}
Here’s a list of helpful URL’s that you could use to pull information from Tumblr:
- Information: http://api.tumblr.com/v2/blog/dotdashdotie.tumblr.com/info?api_key={API_KEY}
- Blog Avatar: http://api.tumblr.com/v2/blog/dotdashdotie.tumblr.com/avatar?api_key={API_KEY}
- Posts: http://api.tumblr.com/v2/blog/dotdashdotie.tumblr.com/posts?api_key={API_KEY}
Using the Tumblr Data for Something
Fantastic, we had our feeds set up and we’d received data back from Tumblr, now what? It’s useless unless we did something with it. We wanted a nice little Tumblr display on our site.
The rest of this blog was written as I put together our script:
20:51 -… Tumblr the following post types available for content generation:
- text
- quote
- link
- answer
- video
- audio
- photo
- chat
We can also specify what post we want to pull. I wanted to pull just the leading images from each article to begin with. So I went at it with the following URL:
http://api.tumblr.com/v2/blog/dotdashdotie.tumblr.com/posts?type=photo&api_key={API_KEY}
20:55 – with this URL, I got all the posts from our Tumblr blog. After up-loading our feed I used the following to narrow my response:
$code = json_decode( $json[‘body’], true );
This gave me the data I needed to work with in a neat array assortment.
20:57 – Just realized, that by taking in all the posts, I had to cycle through each one to check what type it was. If there’s no picture I had to place a flag to bypass it. This approach was going to be heavy on code. If I cycled through all the posts, my algorithm would be inefficient as it would add more each day as we posted more stuff. I decided to specify the post type as follows:
http://api.tumblr.com/v2/blog/dotdashdotie.tumblr.com/posts?type=photo&type=photo&api_key={API_KEY}
21:05 – With my feed working what I wanted next was to root straight down to the images. No point being too fancy with code at this stage a simple ‘for loop’ was just fine.
I wanted to cycle through each post that we got back. For each one I went through I wanted to pull the photos from it. I cycled through each one and printed out the structure of each so I knew where to go next.
foreach ( $code[‘response’][‘posts’] as $photo ) {
echo ‘<pre>’; print_r( $photo ); echo ‘</pre>’;
}
21:09 – Ok, so now I knew how Tumblr structured posts, I could now just pull images from the feed! I expanded the above to:
foreach ( $code[‘response’][‘posts’] as $photo ) {
foreach ( $photo[‘photos’] as $image ) {
echo ‘<img src=”‘.$image[‘original_size’][‘url’].'” />’;
}
}
This will cycle through the response and pull the URL for each image from it and is the basis for our feed.
21:16 – I arranged the images into a nice grid to get a better idea of where to go next. The quickest/ best way to do this was to add the following as an attribute to the img output:
style=”max-width: 300px; height: auto; display: inline;”
21:17 – As I see it, that’s all I needed for now, I might add headlines/captions. But some posts will have more than one image…. Instead of outputting images as posts I wanted to output a post with its images (if that makes sense). School boy error, but this was fast track prototyping. I needed to grid up the article rather than the images, and see what happened.
21:22 – I changed the code ever so slightly…
foreach ( $code[‘response’][‘posts’] as $photo ) {
echo ‘<div”>’;
echo $photo[‘caption’];
foreach ( $photo[‘photos’] as $image ) {
echo ‘<img src=”‘.$image[‘original_size’][‘url’].'” />’;
}
echo ‘</div>’;
}
now I have an output that presents the caption and photos from each post. We’re getting places.
21:26 – I’ve decided that I’m going to divide my page into three “columns”. I will do this by setting each article to take up 33% of the width of the page, it will be messy for the moment, but legible all the same. Bear with me while I “style”. Also not liking how some data is dirty. So I’m going to wipe clean up some JSON data with a sanitization call.
foreach ( $code[‘response’][‘posts’] as $photo ) {
echo ‘<article style=”float:left; max-width: 31%; padding: 1%; text-align: center;” >’;
echo ‘<h2 style=”font-size: 16px; line-height: 16px; max-width: 80%; display: block; margin: auto;”>’.filter_var($photo[‘caption’], FILTER_SANITIZE_STRING).'</h2>’;
foreach ( $photo[‘photos’] as $image ) {
echo ‘<img src=”‘.$image[‘original_size’][‘url’].'” style=”max-width: 80%; height: auto; float: left; padding: 10%;” />’;
}
echo ‘</article>’;
}
Here’s some of my code, a very simple Tumblr photo feed. There is little to no styling, but hopefully it will get you started. It’s only 8 lines of code, but it is enough to get started with. I will put together a small little plugin for WordPress users if demand is high enough (completely free and open source needless to say).
Note: This is not the full script that was developed. I will post the complete code after we have implemented it into the DotDash site and are happy that it’s worthy of public consumption.
Let us know what you think of our swanky new footer and Tumblr plug-in!