Back in July of last year, we published the article Display your latest Twitter update with jQuery to show you how simple it was to display your latest Tweets on your website using jQuery. Since that article was published, Twitter have made some changes to their core API which affects how the script in this article works. Before carrying on, if you haven’t already, I recommend that you read the original article first so that the following makes sense.
Everything was working nice and smoothly until Twitter changed the way users can retweet from the main Twitter website. Not that this was a bad thing, the new(ish) functionality was a great addition to an already great service. Before the changes, users manually typed ‘RT’ at the beginning of their tweet to signify that they have retweeted it from another user. Now days, you simply click a button which will take care of it for you.
But, as Kerem pointed out in the comments of the original article, our code does not display these new retweets. Instead, it just displays an empty space where your latest tweet should be sitting pride of place. In nearly all circumstances, I would imagine that this is not the desired effect, especially as the retweet functionality is used a lot more these thanks to the new functionality.
As a result, I have got back to the drawing board to investigate how we can get around this problem and improve the current script. If you wish, you can download the sources files before continuing on.
UPDATE: May 2010 – There is now a new updated blog article that follows on from this article. Once you have finished reading this, please read part 2.
I’m pretty sure that it has not escaped your attention that Twitter is an invaluable tool if you want to communicate with your clients and peers. As you are spending all this time tweeting, it makes sense to display this information on you own website so you can draw in more followers on Twitter and get your voice heard.
There are quite a few tutorials available on this subject and several jQuery plugins that will display your tweets for you, all of which are very good in their individual way. However, this tutorial will show you just how easy it is to use the Twitter API tools with a tiny bit of jQuery to display your latest tweets in a fully customisable, simple and functional way.
First we will create a very basic HTML document to display our latest tweet. Then I will show you how to get the Twitter JavaScript code which will translate the returned data for us. We will be using our Twitter account, @carronmedia in the examples, please feel free to follow us.