Posted In Internet

Twitter: Show Your Latest Entry On Your Blog

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.

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.

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:

Replace the text above with the following text:

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. :)

Enter your email address to subscribe and receive notifications of new posts by email.

  • http://www.bull3t.me.uk Bull3t

    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.

  • http://longren.org Tyler

    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. :)

  • http://www.bull3t.me.uk Bull3t

    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).

  • http://longren.org Tyler

    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.

  • Pingback: Basic Thinking Blog » Crysis und die Cry Engine 2()

  • Pingback: darf ich vorstellen - twitter.com at pl0g.de()

  • http://foehammer.net Foehammer

    As a loyal user of a custom k2 theme, you have solved my twitter module problem.

    Thanks for the scripts, Tyler.

  • http://longren.org Tyler

    Glad I could help Foehammer.

  • http://www.undiarioencodigofuente.com Parzival

    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)

  • Pingback: Twitter on Wordpress()

  • http://www.audiophile.pl Pioneer

    Great code div, thanks

  • http://www.yellobook.eu yellowpages

    Works out fine for me, thanks for sharing this with us.

  • http://www.praca.citygambo.pl/gdansk,praca oferty pracy gdańsk

    Thanks a lot for this code!

  • http://www.oyun27.com oyun

    A beautiful subject Thanking

  • http://www.eceoyun.com kral oyun

    Great code div, thanks

  • http://www.oyun27.com kral oyun
  • http://www.factoryfast.com.au luggage

    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!

  • http://www.thecreditexchange.com Wanda

    That was a great post. I really enjoyed it. Great looking site too.

  • http://www.portraitkingdom.com/pets.php oil pet paintings

    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.

  • http://abulletproofidea.com/ John

    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!

  • http://abulletproofidea.com/ John

    Twitter Updates

    enter JS HERE

  • http://abulletproofidea.com/ John

    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 :-)

  • http://www.oyun112.com Süper Oyunlar

    thanks

  • http://www.portraitkingdom.com/painting-from-photos.html oil painting from photos

    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.

  • http://www.dazzlecat.co.uk DazzleCat

    thats a brilliant little script thanks!

  • http://www.sisi.com.pl bilard

    Great and excellent article it’s realy helpful. Thanks again.

  • http://www.sohbetor.net sohbet

    Thanks for the theme. I will just still have to get a different header image.

  • http://blogs.ebay.com/joeykryszewski Greg-Muellerson

    Damn, that sound’s so easy if you think about it.