Tumblr API for WordPress

there are a few assumptions:

1. you already have your tumblr consumer key, secret, oauth token, and oauth token secret
   • you can get the oauth info thru this site: https://api.tumblr.com/console/calls/user/info
   • just pop in your consumer key/secret, hit authenticate, then you’ll be able to grab the other info from the sample code it returns
   • wait, you know how to get the consumer key/secret, right? no? well you gotta register an application here: https://www.tumblr.com/oauth/apps
2. i used this tutorial as a starting point: http://techslides.com/tumblr-api-example-using-oauth-and-php
   • i didn’t use the callback.php nor the connect.php files in the zip
3. create a private (password-protected) tumblr blog and set up each editor as a contributor to it
   • private because you don’t want viewers to happen upon the tumblr site (you’ll lose hits on your own site!)

the problem

set up a liveblog on a wordpress site that is easy for multiple authors to contribute to at the same time.

obviously, we can’t have multiple users log into the same page to write content… and these authors will most likely be at a remote location where they may only have their smartphones to make posts.

the solution

authors post on a private tumblr with the tumblr app*

* the tumblr app has some limitations, unfortunately. when posting a link, the app does not extract images or excerpts. it’ll literally just post the link with the page title. however, if you post the link through the website, it’ll look 100x better (test with a twitter or instagram link)

code – php

modify the api.php file like so (i put the tumblr code folder into the theme’s folder — it may be better practice to add it as a plugin just in case you change themes in the future):

<?php
$parse_uri = explode( 'wp-content', $_SERVER['SCRIPT_FILENAME'] );
require_once( $parse_uri[0] . 'wp-load.php' );

require_once( 'tumblroauth/tumblroauth.php' );

$consumer_key = get_blog_option(1, 'tumblr_consumer_key');
$consumer_secret = get_blog_option(1, 'tumblr_consumer_secret');
$oauth_token = get_blog_option(1, 'tumblr_oauth_token');
$oauth_token_secret = get_blog_option(1, 'tumblr_oauth_token_secret');
$base_hostname = get_blog_option(1, 'tumblr_base_hostname') . '.tumblr.com';

$post_URI = 'http://api.tumblr.com/v2/blog/'.$base_hostname.'/posts';

$tum_oauth = new TumblrOAuth( $consumer_key, $consumer_secret, $oauth_token, $oauth_token_secret );

// Make an API call with the TumblrOAuth instance.
$parameters = array();
$parameters['tag'] = $_POST['tag'];
$parameters['limit'] = 50;

$post = $tum_oauth->get( $post_URI, $parameters );
echo json_encode( $post );
?>

let’s break it down a bit

$parse_uri = explode( 'wp-content', $_SERVER['SCRIPT_FILENAME'] );
require_once( $parse_uri[0] . 'wp-load.php' );

these first 2 lines are optional — this is just so you can hook into wordpress’ functions, which are used in the definition of keys — you can hard code those straight into this file if you don’t plan on making changes in the future

$consumer_key = get_blog_option(1, 'tumblr_consumer_key');
$consumer_secret = get_blog_option(1, 'tumblr_consumer_secret');
$oauth_token = get_blog_option(1, 'tumblr_oauth_token');
$oauth_token_secret = get_blog_option(1, 'tumblr_oauth_token_secret');
$base_hostname = get_blog_option(1, 'tumblr_base_hostname') . '.tumblr.com';

define the needed keys. i have a separate plugin that stores this info into the wp_options table (you can hardcode them if you want)

$post_URI = 'http://api.tumblr.com/v2/blog/'.$base_hostname.'/posts';

we want to retrieve posts so use the “posts” call

$parameters = array();
$parameters['tag'] = $_POST['tag'];
$parameters['limit'] = 50;

specific hashtag for all authors to use in their tumblr posts — so the wordpress page knows what to grab. the default limit is 20. from my tests, the max you can pull at a time is 50, unfortunately

UPDATE: the workaround for the 50 post limit is to set up navigation to show posts older than the 50 that are currently displayed

code – javascript

now we want the post to call it, but not just any post because that would be chaotic. i set up a checkbox custom metabox for a user to check on if the post is going to be used as a liveblog. then i set up a conditional that calls the following

<?php
// liveblog - tumblr api integration
$liveblog_tumblr_url  = get_blog_option( 1, 'tumblr_base_hostname' );
$liveblog_tag = get_post_meta( get_the_ID(), '_liveblog_tag', 1 );
?>

the api will return a series of objects, which you can see in the console log. from there, you can play with the display of each of those objects.

the javascript goes through each object and depending on its type, will display it accordingly. i’m sure it can be cleaned up a bit, but each post type has different attributes which is why there are so many conditionals

don’t forget to set variables for the tumblr url (which can be hard-coded) and the tag that’ll be used, which is a custom metabox for the post

update

this portion will check to see if a querystring is added to the url, in this case, “tumblrpage” (ex: http://gorirrajoe.com/post/?tumblrpage=2 — 2nd page of the tumblr gallery)

the code goes a little bit more in depth with twitter and instagram links because that’s what the client requested — a unique display for those types. you can omit that portion if you don’t need to get so specific:

what good is a liveblog if it doesn’t auto-update? this code is set to make the api call every 5 minutes — it’ll just reload the contents in the ul.liveblog_entries area

in action

• rock ‘n’ roll marathon series
• velonews

whew… any questions?