How to Display Your Twitter Posts on Your WordPress Blog

Published Saturday, March 22, 2008 @ 5:16 pm • 7 Responses

Alright, time for another “How’d-you-do-that-thing-on-your-site?” post. This question comes from the one and only Mr. Graham of ImJustCreative.com. In a recent email, Graham literally begged me to share my “secret recipe” for displaying my latest Twitter Tweets (wow, did I actually just say that?) right here on Perishable Press:

…Would be really really decent of you if you could let me know how to do it? Pretty please? How do you call the last twitter feed, what commands do you need etc?

In case you have no idea what we’re talking about here, scroll down to the bottom of any page on the site (using the current theme) and observe the savviness and sophistication of my latest Twitter post, updated automagically every fifteen minutes. Or, for those of you too lazy to “go there,” here is a screenshot demonstrating the perpetual Twitter display:

Amazing, isn’t it? I hope so, because it was terribly difficult to achieve. Not really, but I do enjoy sharing my tweets right here on my own site. It encourages me to keep active on Twitter and helps direct traffic to my Twitter account. Plus, it’s just a thrill to see it all “up in lights” and everything. Whatever though! We all know that Twitter Sucks! Okay, okay, enough song and dance, let’s get on with another fascinating tutorial, shall we..?

So, you want to display your “Twitter Tweets” (aaaarrrrggghhh!!!!) on your blog..

First, to do things my way (there are many others!), you will need each of the following:

1. A WordPress-powered blog
2. A you-powered Twitter account
3. The amazing SimpleTwitter plugin
4. The PHP cURL library installed on your server

Once you are down with all that, upload and install the SimpleTwitter plugin as per the instructions. Once installed, click on over to the SimpleTwitter Options tab in the WordPress Admin and customize the following settings:

• Your Twitter username
• The cache duration (amount of time between updates)

Your Twitter username is a no-brainer, and the cache time is simply the amount of time that should pass before the plugin checks for a fresh tweet. Even if you Twitter like every minute or so, it is best to use caution when choosing the cache interval. Have mercy on your server! For example, I use 15-minute intervals, but would increase that to 10 or even 5 (at the most!) if I were a more frequent Twitter tweeter (somebody KILL me!). Whatever, it’s up to you! After picking your nose settings, click the ‘ol “Update Options” button and call it good.

Part two: Sealing the deal — preparing your PHP for some serious tweets..

Everyone okay so far? At this point, we have all the required functionality in place; all that remains is to call the SimpleTwitter function and present it with some sort of (X)HTML markup. Hopefully, this won’t be too difficult.. ;)

Alright, open up your theme’s footer.php (or whatever) file and add the following code:

<p><?php if (function_exists('get_twitter_msg')) { get_twitter_msg(); } ?></p>

Save, upload, and check the results in a browser. If everything is working (i.e., you did everything correctly), you should see your latest Twitter post displayed near the bottom of the page. If nothing appears, try changing the plugin’s “cache interval” in the Admin options page. Change it to anything different and then save your changes. This should cause the plugin to make a new request for your latest tweet and display it accordingly. If even this doesn’t work, try posting a new tweet, adjusting/saving the settings (again), and wash rinse repeat a couple fo times until it “kicks in.” Honestly, it should work fine “out of the box,” with no problems whatsoever. It worked (and continues to work) great for me, but I mention the troubleshooting tips “just in case..”

Part three: a little CSS to make it all tweet..

After you get everything working, you will probably want to fine-tune your markup and/or CSS to suit your blog’s design. For this site, I wanted to spice things up a little bit by adding a Twitter icon to the left and linking the tweet to my Twitter account. Here is the (X)HTML markup (and requisite PHP) that I decided to use:

<div class="content">
	<p class="center"><span class="twitter"><a href="http://twitter.com/perishable" title="Twitter Sucks!" rel="nofollow"><?php if (function_exists('get_twitter_msg')) { get_twitter_msg(); } ?></a></span></p>
</div>

..and associated CSS styles:

div.content { 
	margin: 33px 0; 
	clear: both; 
	}
p.center { 
	text-align: center; 
	}
span.twitter {
	background: url(images/twitter.gif) no-repeat left center; 
	padding-left: 17px; 
	}

Oh, I know, there are better ways of doing this, but this is what I went with, so feel free to make it all better!  Of course, to see this code in action, I once again refer you to the bottom of any page of the current theme. Essentially, I have applied some modest vertical space, centered the contents of the paragraph (i.e., the link), and added the twitter icon (  ) to the left. And finally, I decided to “nofollow” the link to Twitter because I suck am trying to control sitewide external links.

Obviously, there are many possibilities when it comes to presenting Twitter posts on your own site, but I offer this method as a way to get your juices flowing. Who knows, you may even want to display your tweets somewhere other than your footer, like your sidebar or “About” page or something. Maybe use a different icon, bigger font — whatever!

Well okay, that about does it for this action-packed tutorial — have fun twittering those tweets you crazy twitterers! “Two tweets to the wind!!”

Next up..

In the next “How-to..” post, I finally get around to explaining the process used to create the coveted Perishable Press sun icon and logo. Stay tuned!

← Previous post • Next post →

« CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu • More Killer CSS Reset Styles »