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 id="tweets">
    <img id="profile">
    <ul></ul>
</div>

Source

The post Pulling twitter updates with JSON and jQuery appeared first on Ralph Whitbeck.