17 Jun 2013
Twitter has moved to v1.1 of its API, which means that, unless they have been updated, apps that pull data from Twitter are dead. I needed something that could display the results of a Twitter hashtag search (or any search, really) inside Wordpress. Since I'm building an archive of tweets from a conference, I also need to be able to be able to cache tweets. I was unable to find a Wordpress plugin that could do any of this, so I've stitched together a solution. Here's what it looks like.
The code is available on Github.
You'll need access to the source code of your WordPress install for the instructions below.
It's worth nothing that there are no quick and easy plugins for this because the new Twitter API has created a few additional hurdles. Specifically, the API requires you to authenticate, so you can't just rely on the output of a URL such as http://search.twitter.com/search?q=%23ala2013. None of this is terribly difficult, but you can't just click here / type a hashtag / click here / and be done (yet).
Most of the fabric in this quilt comes from Abraham Williams's TwitterOAuth library and Tom Elliott, who has done a great series of posts on using the new Twitter API. Check out his posts and the comments for tips and troubleshooting, specifically these ones:
Before you can do anything, you have to create a new app with Twitter, which is how you authenticate. This is where you get your consumer key, consumer secret, learn the secret handshake, etc. Rather than have me duplicate the instructions, why not just walk through Step 1 at http://www.webdevdoor.com/php/authenticating-twitter-feed-timeline-oauth/?
Now that you know the secret handshake, let's get to the code.
Note: this isn't a plugin, so don't put the files in your plugin directory. Here's where you should put them:
Next, open the header.php file (in your theme's folder; e.g. /wp-content/themes/clean-home/header.php), and add the following lines inside the
tag, replacing "sitename" with the name of your root Wordpress dirctory:<script type="text/javascript" src="/sitename/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/sitename/js/twitterfeed.js"></script>
<link href="/sitename/wp-content/themes/clean-home/twitter-styles.css" rel="stylesheet" type="text/css" />
For example, I would enter
<script type="text/javascript" src="/ala2013/js/jquery-1.8.2.min.js"></script>
for this site, and so forth.
Technically, you shouldn't add Javascript files to the header (which will be loaded on every page) if the files are only needed for one page, but I'm lazy. If you want to be proper, use the wp-enqueue-script function.
Next, open twitteroauth/get-tweets.php and fill in the following variables with your data:
$twitteruser = "username";
$hashtag = "%23ala2013 OR %23ala13"; //Enter search term(s) here
$notweets = 100; //Number of tweets to display
$consumerkey = "12345678910";
$consumersecret = "12345678910";
$accesstoken = "12345678910";
$accesstokensecret = "12345678910";
To test that it works, go you http://yoursite.com/twitteroauth/get-tweets.php. You should see the JSON output of your $hashtag search. It won't be pretty, but it's a start. Once that's working, we'll need to enable the caching function. To do so, comment out this line:
echo json_encode($tweets);
and uncomment this section:
$file = $twitteruser."-tweets.txt";
$fh = fopen($file, 'w') or die("can't open file");
fwrite($fh, json_encode($tweets));
fclose($fh);
if (file_exists($file)) {
echo $file . " successfully written (" .round(filesize($file)/1024)."KB)";
To test that it works, go to http://yoursite.com/twitteroauth/username-twitter.txt. For example, I would go to http://zachcoble.com/ala2013/twitteroauth/coblezc-tweets.txt. You should see the same output as the get-tweets.php page. Now all of your tweets are being cached.
Next, open /js/twitterfeed.js and edit this following line:
$.getJSON('http://yoursite.com/twitteroauth/username-tweets.txt?'+Math.random(),
so that it directs to your cached tweet file. For example, mine would say:
$.getJSON('http://zachcoble.com/ala2013/twitteroauth/coblezc-tweets.txt?'+Math.random(),
The hard part's over, now for the easy part!
Create a new page in your Wordpress site - you can give it whatever URL you please. Go to the Text tab, and enter:
<div id="twitter-feed"></div>
That's it!
Preview the page and see how it looks. Adjust the CSS as necessary (/wp-content/themes/your-theme/twitter-styles.css).
There's one final piece that's necessary for the caching bit. You need to set up a cron job to run get-tweets.php so you can archive tweets while you sleep. You can follow Tom Elliott's instructions for creating cron jobs. Mine looks like this:
*/30 * * * * /usr/bin/wget -O /dev/null http://zachcoble.com/ala2013/twitteroauth/get-tweets.php" >/dev/null 2>&1