Twitter feed using jQuery

Question

I'm trying to make a twitter feed that shows 5 tweets by using jQuery to parse a JSON file, provided by twitter. I've made jsFiddle over here.

$(document).ready(function () {

    var k = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=Twitter&include_rts=1&count=5";

    $.getJSON(k, function (data) {
        $.each(data, function (i, item) {
            $("#tweetFeed").append("<div class='tweetCloud'><div id='tweetArrow'></div><div id='tweetText'>" + item.text.linkify() + "</div></div>");
        });
    });
});

The tweets must outputted by the jQuery code in the following way:

<div class="tweetCloud">
<div id="tweetArrow"></div>
<div id="tweetText">tweet text</div>
</div>

Only the text of the tweets need to be used.

As you can see in the jsFiddle, no tweets are displayed, and I don't know why. I don't have much experience with jQuery, and practically none with JSON, so I hope someone can give a clear explanation why this doesn't work.

Thank you.

Answer 1

Your code wasn't using JSONP and therefore being denied by cross domain restrictions. I've modified the request and it works now. Here's the code and here's the fiddle

$(document).ready(function () {

    var k = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=Twitter&include_rts=1&count=5&jsoncallback=";

    $.ajax({
        dataType: 'jsonp',
        url: k,
        success: function (data) {
            $.each(data, function (i, item) {
                $("#tweetFeed").append("<div class='tweetCloud'><div id='tweetArrow'></div><div id='tweetText'>" + item.text + "</div></div>");
            })
        }
    });
});

Your imgur link in the CSS was 404'ing so I commented that out. Also, linkify() is not a method. Perhaps you forgot to link some additional library. Lastly, your link to the droid font was improperly embedded on jsfiddle.