Pulling twitter updates with JSON and jQuery

I wrote a little script tonight to pull in my latest 3 tweets from twitter and display them on my blog.

Here is how I did it. I used the Twitter’s API and called my time line with a JSON call and consumed it with jQuery and outputted it to a blank div.

var url = "http://twitter.com/status/user_timeline/RedWolves.json?count=3&callback=?";

$.getJSON(url, function(data){

$.each(data, function(i, item) {

$("img#profile").attr("src", item.user["profile_image_url"]);

$("#tweets ul").append("<li>"

+ item.text.linkify()

+ " <span class='created_at'>"

+ relative_time(item.created_at)

+ " via "

+ item.source

+ "</span></li>");

});

Basically what this does is pulls in the data from twitter and makes them available as objects. I then loop through each item and pull out the data I want and write it out to a unordered list. Update: make sure to look at the complete working example below as it has the two functions this code block is using (linkify and relative_time) to transform the JSON data into how I’d like it to look.

Here is the HTML stub it’s going to:

</div>

Source