Michael Tyznik's Blog

Integrating Tumblr into Wordpress

In planning the HighStreet Blog, we decided that, along with the longer, magazine-style articles and reviews, we wanted to have a couple of places where we could just throw stuff up that we thought was cool. One of those ended up being the Inspiration Board, and the other ended up being Cincinnati Stream. I suggested using Tumblr for these two, since it facilitated the posting of materials one comes across on the web, as well as in life (via the iPhone app). I figured there must have been an easy way to integrate the Tumblr RSS feed into the blog, but after some research into it, discovered that there wasn’t anything that would work for us. There is surprisingly little information on integrating Tumblr into Wordpress on the internet.

So I came up with this PHP function that would bring the latest entries of these two Tumblrs into our Wordpress blog as sidebars. While there’s some custom formatting in there that won’t fit everyone’s blog, this might at least give you some insight as to how it can be pretty easily done. I might work on a version of the function that doesn’t have the HighStreet Blog-specific formatting. This function requires that you install SimplePie, an RSS importer script for PHP.

// Pass the feed URL and number of items to displayed to the function

function HS_import_feed_items($feed_url,$num_items)
{
	global $div_num; /* A global variable that makes each video div have a
                            different id. This is necessary for the Javascript
		            rollover to work. */
	$feed = new SimplePie($feed_url);
	$feed->handle_content_type();
	$items = $feed->get_items(0,$num_items);
	foreach ($items as $item):
		$data_array = $item->get_item_tags('','description');
		$feedDescription = $data_array[0]['data'];
		
		/* This looks for a Youtube link. If found, it shows a thumbnail of the
		   video with a "play button" overlay to indicate it's a video. */
		
		if (strpos($feedDescription,'value="http://www.youtube.com')!=false) :
			$pattern = '/value="http:\/\/www\.youtube\.com\/v\/(.+?)&/';
			preg_match($pattern, $feedDescription, $matches);
			$videoID = $matches[1];
			$image = 'http://img.youtube.com/vi/'.$videoID.'/2.jpg';
			$alt_text = strip_tags($item->get_description());
			$dims = getimagesize($image);
			$resize_coeff = $dims[0]/150;
			$img_height = $dims[1]/$resize_coeff;
			echo '<div class="videobox" id="videobox'.$div_num.'" 
alt="'.$alt_text.'" title="'.$alt_text.'" style="position: relative; display: block; height: 
'.$img_height.'px; padding-bottom: 15px; border-bottom: 1px solid #333; margin-bottom: 10px;" 
onmouseover="document.getElementById(\'playbutton'.$div_num.'\').src=\'/wp-
content/themes/modularity/images/playbuttonhover.png\'" 
onmouseout="document.getElementById(\'playbutton'.$div_num.'\').src=\'/wp-
content/themes/modularity/images/playbutton.png\'"><a href="'.$item-
>get_permalink().'"><img src="'.$image.'" width="150" 
height="'.$img_height.'"><img src="/wp-content/themes/modularity/images/playbutton.png" 
alt="'.$alt_text.'" title="'.$alt_text.'" id="playbutton'.$div_num.'" style="position: absolute; 
top: 50%; left: 50%; margin-top: -55px; margin-left: -50px"/></a></div>';
			$div_num++;
			
		/* This looks for an image in the Tumblr entry. If found, it shows the
		   image and links it to the Tumblr entry. */
			
		elseif (preg_match('/<img.+?src=.+?>/',$feedDescription) == 1):
			$image = returnImage($feedDescription);
			$image = scrapeImage($image);
			$image = urldecode($image);
			$alt_text = strip_tags($item->get_description());
			$dims = getimagesize($image);
			$resize_coeff = $dims[0]/150;
			$img_height = $dims[1]/$resize_coeff;
			echo '<a href="'.$item->get_permalink().'"><img 
src="'.$image.'" alt="'.$alt_text.'" title="'.$alt_text.'" width="150" height="'.$img_height.'" 
style="padding-bottom: 15px; border-bottom: 1px solid #333; margin-bottom: 10px;"></a>';
		
		/* This looks for a link in the Tumblr entry. If found, it shows the
		   link directly instead of linking to the Tumblr entry. */
		
		elseif (preg_match('/(<a.+?<\/a>)/',$feedDescription) == 1):
			preg_match('/<a.*?href=(\'|")(http.+?)(\'|")>(.+?)<\/a>/',$feedDescription,$matches);
			$href = $matches[2];
			$linktext = $matches[4];
			preg_match('/:\/\/(.+?)\//',$href,$matches2);
			$title = $matches2[1];
			if (strpos('www.',$title)==0) {
				$title = substr($title,4);
			}
			$title = 'External link to '.$title;
			echo '<div style="padding-bottom: 10px; border-bottom: 1px solid #333; 
margin-bottom: 10px; font-weight: bold"><a href="'.$href.'" 
title="'.$title.'">'.$linktext.'</a></div>';
		
		/* If all else fails, this checks that the Tumblr entry has a title. If	
		   so, it shows the title and links it to the Tumblr entry. */
		
		elseif ($item->get_title() != ''):
			echo '<div style="padding-bottom: 10px; border-bottom: 1px solid #333; 
margin-bottom: 10px; font-weight: bold"><a href='.$item->get_permalink().'">'.$item-
>get_title().'</a></div>';
		endif;
	endforeach;
}