How to Display Your Twitter Posts on Your WordPress Blog
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:
![[ Screenshot: Perishable Tweets Displayed at Perishable Press ]](https://perishablepress.com/wp/wp-content/images/2008/misc-chunks/twitter-tweets.png "Twitter Sucks!")
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:
- A WordPress-powered blog
- A you-powered Twitter account
- The amazing SimpleTwitter plugin
- 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="https://x.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!
13 responses to “How to Display Your Twitter Posts on Your WordPress Blog”
Hey Jeff first of all HAPPY EASTER :) I just realised it’s Sunday. I think weekends are a blur to me because I usually sleep very late and wake up even later.
Twitter is a fun web application! I like it how the way they make it possible for bloggers and non-bloggers alike to update their current status and inform their friends about things they’re up to. Now the web is finally getting more personal (although a little spooky, like how Google enroaches into our privacy but hey, it’s fun!).
I’ve just created a Twitter account yesterday and tried to insert the my twitters into my blog. I’ve used Alex King’s plugin though – Twitter Tools. I hate myself for not being patient enough to wait another day to read your tutorial and decide on a simpler plugin :(
Simple Twitter sounds very simple and user-friendly! Although Twitter Tools may come jampacked with a little more functionality, the making-it-to-work part was frustating, so much so that I have to actually rollback for the older version due to issues with the prototype.js file.
Thanks for sharing, it’s another great tutorial. I’m definitely linking this, I hope you don’t mind!
P.S. I love this line: “Part three: a little CSS to make it all tweet..” it sounds so cute!
Ha ha.
Yes, tell the world how I begged mercilessly for information.
Well, you relented didn’t you? So it worked. Must try more often.
Your tutorials rock Mr J.
So now when you going to implement a Tumblr Blog? Hmmm? Well? I have seen it done and it looks great.
Me.
Thanks for the feedback, teddY! I am glad you enjoyed the tutorial. You are absolutely right about Twitter Tools — it is one the most comprehensive Twitter plugins I have seen, allowing users to do just about anything with their Twitter posts. For me, I try to keep the processing overhead as low as possible, especially when it comes to WordPress plugins. It’s definitely a fine line between performance and functionality, but for the current incarnation of the site, simply displaying my Twitter tweets (there I go again!) was more than enough to serve all of my Twittering needs. But who knows, in the next theme evolution, I may wind up expanding the implementation. Okay, I’m just rambling now.. time to go eat some lunch! ;)
Alright, alright.. one more comment before lunch — just for you, Mr. Graham! What, you didn’t appreciate being exposed for the lowly beggar you truly are? Shame, shame! ;) And, about all that “Tumblr Blog” nonsense, interestingly enough, someone just asked if I would design a custom, minimalist-style Tumblr theme. I like the idea and plan on looking into it for sure, but there wasn’t any begging involved, so who knows what will happen! ;)
I’ve tried the Twitter plugin you’ve linked and I find it simple :) it just displays a simple block of Twitter test, which totally fits your minimalistic design. Great job! And thanks for your reply!
I was looking for something like this all weekend. Thanks!
Happy to help, Teleken! :)
Jeff,
Just by stumbling one your theme I have learned how to incorporate twitter into my new blog! Thanks for the tut!
Great details.
-Vrbo
Thanks for the feedback, Vrbo!! :)
There is actually a much easier way to put Twitter posts into your theme/template on your blog.
http://twitter.com/widgets/html_widget
This part of the Twitter website gives you some code to put into your site. It uses some JavaScripts from Twitter to grab x amount of tweets, and displays them in an unordered list.
The only downside is if the user doesn’t have JavaScript enabled, all they will see is an empty unordered list (and the Twitter links). Another problem arises from this problem, your code won’t look valid using the W3C XHTML Validator due to the empty unordered list. A quick, dirty, cheating way to make it validate is to put a list item with a non-breaking space into the unordered list. It’s not the best fix, but it works.
Another downside is the JavaScript call takes a small amount of time to load. For my website and connection it takes about 1 second, but it still loads after the rest of the content on the website, and causes a slight ‘jump’ in the page. If you want to solve this, you can use the flash widget.
http://twitter.com/widgets/which_flash
With this widget, you can allow the users to communicate interactively (a follow and login button), or you can just let it display your tweets. Since it is a flash item, the user must have FlashPlayer installed.
For these widgets, all it comes down to is whether you want flash or JavaScript in your blog.
I tried it out and it worked nicely. Thanks for the post.
This is all good stuff but I would recommend the updated version of Simple Twitter.
http://daveschatz.com/simpletwitter/