As for my general setup, I was using jQuery's getJSON and a typical call looked something like the following:
$.getJSON('https://graph.facebook.com/13601226661?access_token=' + accessToken, function (response) {
callback(response);
});
The first problem was that I was getting a No Transport when making a call to https://graph.facebook.com. The issue here was due to the fact that IE uses XDomainRequest and I ultimately resolved it by using the following workaround: https://github.com/jaubourg/ajaxHooks/blob/master/src/ajax/xdr.js.
This is because XDomainRequest is currently not supported in jQuery.
After including the xdr.js file, I started getting a different problem. Internet Explorer now started saying "Access is denied" whenever I make the AJAX call.
After some reading, I found out from here that:
7) Requests must be targeted to the same scheme as the hosting page.
Essentially this means that "[...] if your AJAX page is at http://example.com, then your target URL must also begin with HTTP. Similarly, if your AJAX page is at https://example.com, then your target URL must also begin with HTTPS".
And of course, I was making calls from http (my domain) to https (graphs.facebook), and that goes against the aforementioned point #7.
So what I first tried was to make a call to http://graphs.facebook.com instead (i.e. using http instead of https), and that works...but only when not using an access_token in your request; and I needed to include my token in all the requests.
And the solution to this problem was jsonp. With jsonp, IE allows the cross-domain requests. I'm not going to go into the details of jsonp in this post, and luckily, jQuery supports it natively since all you need to do is include callback=? as part of your request. This means that my calls now changed as follows:
$.getJSON('https://graph.facebook.com/13601226661?access_token=' + accessToken + '&callback=?', function (response) {
callback(response);
});
