Since Mashable’s post on 10 ways twitter will change blog design, quite a few Wordpress plugins have been released with the purpose of provided “tweetbacks” for posts. These plugins work quite well, however they lack in true customization and flexibility. So, in order to archive this, we’ll implement a solution of our on.
What we’re going to do
In this tutorial we’ll be using the power of Simple Pie, and Custom Fields to query our twitter timeline and pull in the most recent tweets that include the keywords supplied by the custom field. We’ll also be using a bit of jQuery to make thing pretty! Here’s an example of what the end result will look like.
Note: We’ll be getting down and dirty with some Wordpress and PHP functions, so this tutorial assumes you know all about that. However, if you don’t just follow along step by step and we’ll be don before you know it!
Alright, let’s get started. I’ve prepared a few files to help out, so download them here. Basically it includes a folder called ‘simplepie‘ which you don’t even have to touch, just upload to your theme’s directory along with tweetbacks.php. The other two files, single.php and style.css are templates for you to dissect.
1. Prep your theme.
Like I said above, all you have to do is upload the folder ’simplepie’ and tweetbacks.php to your theme’s directory (usually /wp-content/themes/yourthemesname/ ). Open up tweetbacks.php, your theme’s single.php and header.php in a code/text editor and get ready to code!
2. Add in jQuery (optional)
I like to start at the top and work my way down, so for the first step, we’ll open up header.php and setup jQuery for a bit of effects. Add this bit of code in right before the tag.
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js"></script>
This retrieves the main jQuery file from Google Code. Now that we have that, we can add it the Javascript for the effect we want to archive, which is a nice little drop down. Place this code right below the code above:
<script type="text/javascript">
$(document).ready(function() {
$(".btn-slide").click(function() {
$("#slide").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
Our drop down is now setup. If you prefer not have a drop down, then just skip this step.
3. Setup our Tweetbacks and Simple Pie
Ok, let’s take a look at tweetbacks.php now. It’s our most important file, as it’s responsible for pulling in tweets from our timeline - according to keywords supplied by custom fields - and then displays them properly. I’m won’t go through all the code here (it’s commented pretty good), however there’s a few things worthy of mention.
On line 15 we include a Javascript file, in case your wondering this gives us ajax like updating, which can be set to update every second. It’s quite fun to watch the tweets fly in!
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/tweets.js"></script>
A little bit later, on line 20, we have some more Javascript. This particular line is what queries search.twitter.com for the keywords we set with a custom field of “query” (I’ll touch on this again in a bit). Note the part at the end: “+from:user_name” - this makes sure that only your tweets are queried, Matt Brett style. Change “user_name” to your twitter username.
var feedUrl = 'http://search.twitter.com/search.atom?q=<?php echo get_post_meta($post->;ID, "query", true); ?>+from:user_name';
We’re almost done now. On to step 4!
4. Put it all together.
For the last step, open on single.php and place this code somewhere above or below the comments tag (<?php comments_template(); ?>).
<?php
if (get_post_custom_values('query')) { include(TEMPLATEPATH . '/tweetbacks.php'); } // If query is filled - show twitter mentions.
else { echo '<div class="tweetbacks"><h3>Twitter Mentions</h3><br /><p>Whoops! No tweets to display here!</p></div>'; } // If query is not filled - show error.
?>
What this bit of code does, is check if you’ve actually supplied keywords via custom fields. If you have, then it includes our tweetbacks.php file, if not then it says so. Pretty cut and dry.
That’s it, your done with all the coding stuff! 
The Custom Fields
It’s quite easy to input the keywords using custom fields - simply put “query” as the key and then in the value field place the keywords you’d like to query your timeline for (e.x. the title of the post, or the tags).
Because we query search.twitter.com we have to use the proper syntax - if you want to search for a couple of different words then we have to use this: twitter+OR+tweetbacks. It will then look for tweets containing either “twitter” or “tweetbacks” or both. If you remove the OR then it will search for tweets containing the exact phrase “twitter tweetbacks”. You can read up on the exact operators on the Twitter API Wiki.
A few things.
The thing to remember about this “script”, is that it’s very flexible and customizable. If your down with coding, go ahead a look through the files - I’m sure you’ll be able to find a way to improve upon it. For reference, the tweet is wrapped in class called “tweets”, the tweet’s content is wrapped in class “content”, and the tweet’s date is wrapped in a class of “date”. Also, it’s set to display the 5 most recent tweets - if you’d like more or less, open up the folder ’simplepie’ and then open up feed.php. Feed.php is the template controlling how the tweets are displayed, so you can mess around with it quite a bit. Check out this list of tags you can use for even more customization.
Well there you have it. Once it’s implemented it runs quite smoothly, and if nothing else provides a bit more of a personal touch to your blog. Let us know in the comments if you have any questions, and if you put it to use on your site, then drop us a link in the comments!
