How to use Tumblr as a simple and flexible content management system
First off, apologies to my regular readers; this post is going to be far geekier and techier than most stuff I blog about.
This is a tutorial on how use the Tumblr API to embed content into a website (in other words, use it as a simple CMS.) It’s aimed at people like me, designers/front-end developers who know HTML and CSS but don’t have the programming chops to build our own databases.
(This is just boring background-y stuff; skip to below if you just want the code/tutorial)
I do occasional freelance web work, mostly on projects for individuals or small businesses. In other words, people who want a custom site but are also on a limited budget. The problem that has started to crop up over and over again in the past year (for me, at least) is that everyone wants easy-to-update, dynamic content on their pages, but they don’t want a crappy template site and they don’t want to pay a programmer to build something for them.
As non-programming-type people, that leaves us with a few options: Wordpress, Joomla, and Drupal. The few times I’ve had to mess with Drupal and Joomla, I’ve found them to be completely counterintuitive and very frustrating. Using them makes me go:
Wordpress, on the other hand, I love. The system is super-intuitive if you know HTML, and can make you feel like a total PHP god(dess) even though you totally aren’t. The problem: the client has complete control over each post, and it’s amazing what kind of trouble they can get themselves into if you leave them alone with a WYSIWYG editor for long enough…
I knew there had to be a better solution. I also knew that Tumblr had an API, and with the ability to post different types of content (photos, videos, links, text, etc), that gave it a lot more versatility than Wordpress. The problem was, I only sort of know what an API is, much less how to to make it do what I want. I spent a long time searching the intrawebs for a tutorial. I found this, which was a good jumping off point, but had the problem of only returning one post, no matter what I tried.
So that’s when I enlisted the help of a very kind and patient programmer friend, and he helped me mess around with the code until we got it right AND he explained what each and every line meant, so I could fix it myself in the future. He only made fun of me and threatened to post my embarrassing php/life analogies on Reddit two or three times. Swoon.
Anyhoo, figured this information might be useful to some other designers out there, so I’m sharing it with y’all:
STEP 1. Get the content you want
You first need to get the XML feed with the correct data. Lets start by calling everything:
http://kelmo.tumblr.com/api/readExcept, obviously, you’ll want to replace my Tumblr name with your own. If you have a custom URL it might look like this:
http://blog.kellymorr.com/api/readThis should come out looking like code vomit on your page. That’s good! You’re doing it right!
From here you can decide to pull data by post type, post number, tags, etc.
http://blog.kellymorr.com/api/read?type=photo&tagged=Fantastic%20StuffThis will pull all of the data from my site for any photo posts that are also tagged “Fantastic Stuff” (note: if your tag is separated by a space, just put a %20 in its place)
You can also decide how many posts you want, and were to start.
http://blog.kellymorr.com/api/read?type=photo&tagged=Fantastic%20Stuff&start=0&num=3This will get me the three most recent posts (starting at post “0”). Just as a note, I believe Tumblr limits the total number of posts you can call at any one time is 50.
I’m sure you see the pattern now: to the end of your XML feed just at a ? then the thing you want to call. Separate multiple calls by &s. BAM!
STEP 2. Learn to speak barf
Look at your XML feed.
Now back at me.
Now back at your XML feed and right-click to view the source code.
Okay, so it may still appear to be code-barf, but it’s now slightly more comprehensible code-barf. You’ll start to notice there are bits in angle brackets <these things>? And they’re all nesty and cozy inside of each other? Maybe you’ll notice they look a little something like this?
Gooooood.
Super Smart Programming Friend informs me that these things are called “elements.”
Now, if we look inside our elements, we’ll notice that sometimes there’s some additional information hanging out as well:
<post id="1224936338" url="http://blog.kellymorr.com/post/1224936338" url-with-slug="http://blog.kellymorr.com/post/1224936338/hmm-maybe-i-should-think-about-going-back-to" type="photo" date-gmt="2010-10-02 01:16:50 GMT" date="Fri, 01 Oct 2010 18:16:50" unix-timestamp="1285982210" format="html" reblog-key="KuaSEPKv" slug="hmm-maybe-i-should-think-about-going-back-to" width="1882" height="1086">In this case, our element would be the post, and all the things partying in post’s hot tub (url, url-with-slug, type, date-gmt, etc) are called “attributes.”
These elements and attributes are the different bits of data that we can call. Now that we can speak their language, they are our friends!
STEP 3. Puts the content where you wants it
In the words of my hero, Bob Ross, now all we have to do is create ourselves a happy little PHP document. Do a happy little copy-paste of the below. FTP that shiz. And now you should have something that looks somewhat like this Example. (Minus all the fancy styling, which I obviously spent hours and hours slaving over.)
<?php
$tumblrfeed = 'http://blog.kellymorr.com/api/read?type=photo&tagged=Fantastic%20Stuff&start=0&num=3';
$tumblrfeed = simplexml_load_file($tumblrfeed);
foreach($tumblrfeed->posts->post as $blog){
$caption = $blog->{'photo-caption'};
$url = $blog->{'photo-url'};
$date = $blog->attributes()->date;
echo "<li><div class='picture'><img src='$url' /></div><div class='info'>$caption<p>Posted: $date</p></div><div class='clear'></div></li>";
}
?>
WOW! Magic! But even more awesome, I’m now gunna ‘splain to you what it all means, so you can customize it as you see fit.
$tumblrfeed = 'http://blog.kellymorr.com/api/read?type=photo&tagged=Fantastic%20Stuff&start=0&num=3';This line is saying that we’re going to create something called “$tumblrfeed” and it’s going to be everything found at that XML URL we designated earlier. (I’m gunna go ahead and assume you know to put your own url in here…)
Essentially $ signs are used as naming devices in PHP; from here on out, anywhere you see a $blah, you’re free to hilariously change it to $boogers, $farts, $boobies, $etc and it will have no negative impact, as long as you’re consistent.
$tumblrfeed = simplexml_load_file($tumblrfeed);Well now PHP knows he’s looking at something, he’s just not quite sure what yet. So, in this line, we tell him that he’s looking at an xml load file. Now he knows how to interact with little $tumblrfeed there. Aw, how cute.
foreach($tumblrfeed->posts->post as $blog){So now we’re going to start going through and picking out what we want. We’re going to look through all that $tumblrfeed code-barf, and we’re going to see that there’s an element called “posts”, and nested within “posts” is another element called “post”. We’re going to call that post $blog. Furthermore, we’ll notice that there is more than one “post” in our $tumblrfeed, so we use the foreach to tell us to pick them all out and call them all $blog.
$caption = $blog->{'photo-caption'};
$url = $blog->{'photo-url'};Now we’re going to search through the posts ($blog->) and find anything that’s in a <photo-caption> element and we’re going to call it $caption. Similarly, we’re going to go through the posts and find all the <photo-url> elements and call them $url.
$date = $blog->attributes()->date;Lastly, we’ve decided we want to get the date. Now, if we look back at our code-barf, we realize that the date is an attribute, not an element. Same concept, just slightly tweaked. We look through element post (which, remember, we named $blog), then look through the attributes of $blog to find “date”.
echo "<li><div class='picture'><img src='$url' /></div><div class='info'>$caption<p>Posted: $date</p></div><div class='clear'></div></li>";Finally, the echo prints out our content how we want it. Feel free to use whatever html you want and to style it however you want. Wherever you want to put the information you called above, just put in the $hilarioustitle you designated.
STEP 4. There is no step four
That’s it! Now you/your clients can easily upload a “video of the day” or update lists of articles that they’ve written, with little chance that they’ll end up with a white, 4px-tall h1 tag in lieu of a line break.
If you want, you can even incorporate javascript, so it’s all pretty-licious. Hopefully this helps someone out there… I know I’ll be using it more in the future.
RSS
Twitter
Facebook