How to Display Instagram Pics In Your WordPress Theme
A few weeks ago, I did a little custom template coding project for DocPop who had a neat idea: display the latest picture from his Instagram account as a dynamic piece of his layout. I coded his theme about a year ago and we included a rotating image in the corner that’s swapped depending on the time of day (so you would always see the same one at 8pm).
INSERT PIC HERE (damn you WP + Chrome)
The idea would be to grab just the picture content from an Instagram and then display it somewhere in the WordPress template.
[I'll assume for this post that you're already using or interested in using Instagram. But if you'd like some convincing from a creative soul who originally didn't see the point, read DocPop's post called "Learning to Love Instagram More".]
This idea had one major obstacle: Instagram doesn’t provide an RSS feed. Even worse, there’s no reliable way to find one’s latest instagram image, since instagram’s URLs don’t map to usernames or any other regular qualifier to help you guess where to find the latest picture.
DocPop actually had the solution before I had a chance to think about it. He piped his instagram images over to a Tumblr blog (you can see his at docpop.tumblr.com), which does provide an RSS feed. This is a feature built into the iPhone app; over on butterscotch.com you can watch a very quick and simple tutorial on how to set up Instagram sharing to Tumblr.
So with the Instagram-to-Tumblr flow all set up, I took the following steps to embed instagram pictures in the WordPress template (with links to web pages that explain more about how to do each step):
1. Use WordPress’s built-in RSS manipulation library to read DocPop’s tumblr blog’s RSS feed, picking out only the first item in the feed.
include_once(ABSPATH . WPINC . '/rss-functions.php');
$feed = fetch_rss($your_feed_url);
$first = array_slice($feed->items, 0, 1); //last parameter denotes max items to fetch
$entry = ($first[0]['description']);
And in case Tumblr’s RSS feed happens to be down (which seems to happen a lot!), we’ll surround the above block in an if/else to provide a fallback — see below.
2. Since each entry will only ever have one image in it, and it’s always going to be a jpg, we can use a rigorous regular expression to pull out the first URI of an image that we find. (When short on time to build a potentially thorny regular expression, I use txt2re, a regular expression generator (“headache relief for programmers”). You still need to put the time in to test it though!)
$re1='((?:http|https)(?::\\/{2}[\\w]+)(?:[\\/|\\.]?)(?:[^\\s"]*)\.jpg)'; # Match http://blah.com/*.jpg
if ($c=preg_match_all ("/".$re1."/is", $entry, $matches)) {
$imguri=$matches[1][0]; //just pull the first .jpg we get
update_option('RSSIMAGECACHE_LASTGOODURI',$imguri);
}
3. Fallbacks: you can go one of two ways. You could spit out another image that you’ve got saved statically. Or you could use the “last known image URI” that was found from the last image load. We used the latter strategy by saving the URI from the last successful RSS feed read into a WordPress “option”.
3. Once you’ve got a URI, all you have to do is output it encased in an IMG tag wherever you’d like it to display in the template. Easy peasy.
That’s about it for including your latest instagram photo in your WordPress website!
Improvements to this code could be made to make the functionality more general for acquiring an image from any RSS feed. For example, the regular expression could be changed to allow for several different possible filename endings (.gif, .jpg,
The rest of this post deals with the special case of configuring the CSS for DocPop.org to create that rotated-and-under-a-paperclip look, so if you’re interested, read on.
