Workaround to making an XMLHttpRequest to api.twitter.com?

Question

** UPDATE:

Apparently the problem morphed into an XMLHttpRequest problem:

XMLHttpRequest cannot load http://api.twitter.com/1/statuses/user_timeline.json?screen_name=bogdanch&. Origin http://adfix.ro is not allowed by Access-Control-Allow-Origin.

The code I'm using is:

(function ($) {
    var Twitter = {
        init: function () {
            this.insertLatestTweets("bogdanch")
        },
        insertLatestTweets: function (a) {
            var b = 5;
            var c = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=" + a + "&count=" + b + "&callback=?";
            $.getJSON(c, function (b) {
                var c = '<marquee behavior="scroll" scrollamount="1" direction="left">';
                for (var d in b) {
                    c += '<a href="http://twitter.com/' + a + "#status_" + b[d].id_str + '">' + b[d].text + " <i>" + Twitter.daysAgo(b[d].created_at) + "</i></a>"
                }
                c += "</marquee>";
                $("#twitter p").replaceWith(c);
                Twitter.fancyMarquee()
            })
        },
        fancyMarquee: function () {
            $("#twitter marquee").marquee("pointer").mouseover(function () {
                $(this).trigger("stop")
            }).mouseout(function () {
                $(this).trigger("start")
            }).mousemove(function (a) {
                if ($(this).data("drag") == true) {
                    this.scrollLeft = $(this).data("scrollX") + ($(this).data("x") - a.clientX)
                }
            }).mousedown(function (a) {
                $(this).data("drag", true).data("x", a.clientX).data("scrollX", this.scrollLeft)
            }).mouseup(function () {
                $(this).data("drag", false)
            })
        },
        daysAgo: function (a) {
            if ($.browser.msie) {
                return "1 day ago"
            }
            var b = (new Date(a)).getTime();
            var c = (new Date).getTime();
            var d = Math.round(Math.abs(c - b) / (1e3 * 60 * 60 * 24));
            var e = d + " days ago";
            if (d == 0) {
                e = "today"
            } else if (d == 1) {
                e = d + " day ago"
            }
            return e
        }
    };
    Twitter.init()
})(jQuery);

Is there a way I can avoid the XMLHttpRequest problem?

** Original post

I want to implement a horizontal marquee of my last 5 tweets and I followed this tutorial: http://artistutorial.blogspot.ro/2011/09/how-to-make-horizontal-scrolling.html. You can see my version of it here The problem is that when I try to implement it on my site it's not loading any tweets and using the Chrome inspector I see an Uncaught TypeError

Cannot call method 'getJSON' of undefined 
Twitter.insertLatestTweets 
Twitter.init 
(anonymous function)

I can't understand why it works on pastebin and not in my site. Any ideas?

Answer 1

In order to avoid the XMLHttpRequest to api.twitter.com I've made a php file which acts as a proxy. The file contains the following code:

<?php
header('Content-Type: text/xml');
$tweets = file_get_contents('http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=TWITTER_USERNAME_HERE&count=6');
echo $tweets;
?>

Answer 2

It's because for some reason the jquery.js file you use has jQuery.noConflict(); at the end of it, which makes $ unavailable. Either remove that line, use jQuery instead of $, or wrap your code in a closure:

(function($) {
    // your code
})(jQuery);