Want to show your latest entry to Twitter on your WordPress blog or website? It’s really very simple. Don’t be scared off by the vague instructions for adding a badge at the Twitter Badge page. The Twitter Badge page has some Flash badges at the very top and some javascript badges immediately below the Flash badges.
We’re mostly interested in the javascript badges. I don’t give two shits about Flash and refuse to add something to this site that will cause unnecessary lag just because it’s “pretty”. I’m a pretty devout follower of the K.I.S.S. philosophy. And besides, all we’re covering here is how to show your latest Twitter entry, pretty basic. Take a look below to see how I display “My Latest Twitter” in my sidebar.
1. Open your themes sidebar.php file (probably in /wp-content/themes/theme_name/).
2. Determine where you would like your Recent Twitter Status to appear in your sidebar.
3. Copy the following code and paste it into sidebar.php in the location you chose in step 2.
<div class="sb-lasttwitter"> <h2><a href="http://twitter.com/<em>yourTwitterUsername</em>/"><?php _e('My Latest Twitter'); ?></a></h2> <ul><li> ### insert javascript for Twitter Badge here ### </li></ul> </div>4. Open your themes style.css file and add a class called sb-lasttwitter. You can expand on the styling for the sb-lasttwitter class all you want. The CSS I use is below, it should work for most people as-is.
/*- most recent twitter*/ .sb-lasttwitter ul li { list-style-type: none; }5. After adding the sb-lasttwitter CSS class, save your style.css file and upload the newly modified file to your website.
6. Login to your Twitter account and click the “Badge” link at the top.
7. Click the first javascript badge, it should automatically select all of the code when you click on it. Copy the selected javascript code to your clipboard (right-click and copy).
8. After you’ve copied the badge javascript, go back to sidebar.php and find the line that reads: ### insert javascript for Twitter Badge here ###. Replace that line with the javascript you copied from step 7.
9. Save sidebar.php and upload it to your website, it goes in the same directory you uploaded style.css to.
10. Done! Visit your blog to (hopefully) see your latest twitter in the sidebar.
Once you’re done with that you should see “My Latest Twitter” in your sidebar. Immediately below that text you should see your most recent Twitter and how long ago it was entered.
You should also note that the code from step 2 may not work for every WordPress theme, in fact, it probably won’t. However, you should be able to make a few simple changes to make it fit perfectly with your blog’s theme. My point is, you may have to modify that code (and the CSS) to make this show properly with the rest of your blog theme.
Please be aware that the Twitter javascript badge breaks XHTML 1.0 Transitional validation. Fortunately, it’s an easy fix to get pages including the Twitter javascript badge to validate again. Remember, this is the javascript we copied in step 7.
Anyway, to make it pass XHTML 1.0 Transitional validation, have a look at the very last line of the javascript, towards the end of the line, should look similar to this:
?callback=twitterCallback&count=1"></script>
Replace the text above with the following text:
?callback=twitterCallback&count=1"></script>
Modifying the last line of the javascript as described above will make your site/blog pass XHTML 1.0 Transitional validation, assuming nothing else in your site is broken. WDG has some good information on why this change will help your site pass validation.
If you have any problems with this, please let me know! I will try to help people as much as I can, no promises though. If there’s enough interest, I may end up throwing together a very simple wordpress plugin to do all this automatically. It would seem the only Twitter WordPress plugins currently available require the WordPress Widgets plugin, which I don’t use. I just want a simple plugin to include the basic javascript badge without the need for Widgets. If nothing pops up within the next few weeks I’ll probably get to work on a plugin of my own.
There are two full featured Twitter WordPress plugins currently in development, both should be fantastic. The first plugin is Twitter Tools from Alex King. Twitter Tools aims to provide full integration between Twitter and WordPress. The second plugin in development is Twitt-Twoo from Dean J. Robinson. Twitt-Twoo isn’t aiming to be a full integration plugin like Twitter Tools. Twitt-Twoo is much more basic, although I believe it will allow you to post to twitter right from the sidebar of your blog, provided you’re logged in. I’m not sure if that functionality will be included in Twitter Tools as well or not.
Well, now what?
Work with Me
I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!
Leave some Feedback
Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. 😀
Longren.io is proudly hosted by DigitalOcean
Thats a clever little script you got there, I might decide to dump that on my blog sidebar later on. Thanks for the help for this and the post ratings. I will keep in touch and comment on your blog every now and then – added you to my Blogroll.
Thanks Bull3t. You shouldn’t need to make any modifications to the code I posted for this to work for you. This is only because you’re using the K2 theme on your blog. People using other themes may not be so lucky.
Thanks for the linkage, I’ve added you to my blogroll too. I’m always happy to push a bit of traffic towards a blogger who’s just moved from Blogger to WordPress. 🙂
I just thought that you could add the little RSS Feed icon on the My Latest Twitter sidebar widget, linking to your Twitter RSS Feed which can be found at the bottom of your Twitter page (it is in RSS format, though – which isn’t so good) just to make it look similar to the rest, not compulsary, but it just came to me and I thought I would let you know. Anyway, I am going to go and get some sleep now because I am a little tired (it is 22:40 here).
That would be a good method Bull3t, however I don’t use sidebar widgets or sidebar modules. That’s why I want a plugin that can simply grab x number of Twitter entries without requiring sidebar widgets or sidebar modules.
I suppose I should just bite the bullet and use either the widgets or the modules. The modules in Unwakeable 2.0 are actually very nice, so I may end up switching over from my static sidebar.php file when Unwakeable 2.0 is finished.
I could use the BDP RSS Aggregator WordPress plugin I guess, that would actually work really well.
Thanks for the info Bull3t.
As a loyal user of a custom k2 theme, you have solved my twitter module problem.
Thanks for the scripts, Tyler.
Glad I could help Foehammer.
Hi, I’m a spanish guy (so sorry for my english level) and I have a problem with Twitter badge.
When I run my blog in Firefox it looks perfect, but when runs in Internet Explorer the script crashes showing NaN in the minute/hour/day place.
I saw by the Twitt-Twoo homepage they have an issue with IE too (the entire plugin crash and it’s no possible to see), so i don’t have idea to fix it.
Can anyone help me?
(Sorry for my english, again)
Great code div, thanks
Works out fine for me, thanks for sharing this with us.
Thanks a lot for this code!
A beautiful subject Thanking
Great code div, thanks
Thanks for the article
http://www.oyun27.com/oyunlar/10/Dovus-oyunlari.html
Hmmm… I first thought it was going to be the other way around (show your latest blog entry on Twitter, not Twitter on your blog entry.) What could be interesting about that is you could then shove some of your blog onto your friend’s mobile phones. In other words, they would get a message with some of it on. What I really mean is a mobile RSS reader, which is something I’m looking for. There must be something that can integrate all your twitter updates etc. and send it all through on an RSS reader. If not, there’s an idea for someone– I’m sure it would get a lot of attention!
That was a great post. I really enjoyed it. Great looking site too.
Just like you, I’m more interested with the JS badges. I’ve added a few of those Flashy stuff to my other blogs that served as my affiliate site. I’ve had few visits and decreased my sales as well. When I removed the flashy things some of my post got distorted so I ended up re-doing everything as if I had to start back at one.
Hi Tyler!
It works, but it throws up one validation error and thats due to the nesting of unordered list elements.
I had to modify mine to this:
Twitter Updates
It validates and works perfectly now.
Cheers!
Twitter Updates
enter JS HERE
Ah Damn! Code not showing up here.
Basically all i did was instead of closing the unordered list directly after the twitter_update_list ID I closed it after the Javascript excerpt.
Apologies *** Your code was correct – it was the lousy code from Twitter 🙂
thanks
I’ve just opened an account at Twitter. Is it possible to write in there as if it’s like my blog? Or am I just limited to that thing called UPDATES? If I’m limited to UPDATES I’ll give your suggestion a try. I will try this out today and will get back to you for updates and some clarification.
thats a brilliant little script thanks!
Great and excellent article it’s realy helpful. Thanks again.
Thanks for the theme. I will just still have to get a different header image.
Damn, that sound’s so easy if you think about it.