Tag Archives: facebook

Facebook Access Token Request does not work in IE 8

Integrating Facebook Feeds to your Web Application could be a very common thing nowadays. Supporting this integration across different browser could be a headache for most developers out there. Including me myself.

At the end of this session, you will know how to perform an AJAX request to query Facebook feeds access token at client side which support IE 8 Browsers and all other Modern browsers. Using jQuery 1.9

Note: You can only do client side query if your web servers are not having internet connectivity to Facebook. Especially “graph.facebook.com” where you perform access token retrieval and Graph API.

First of all, you need a jQuery and Facebook JS like this

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head></pre>
<body>
 <div id="fb-root">
 <script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
 </div>
...
</body>

And then you need this to initialise FB SDK

<script type="text/javascript">
var access_tokenParam = ""; //to store the access token
var appId = "" // YOUR APP ID HERE
var appSecret = "" //APP SECRET;

window.fbAsyncInit = function () {
 FB.init({
 appId: appId, //App Id
 status: true,
 xfbml: true
 });

};
</script>

Lastly, you need create a Facebook App (if you have not) for an App ID and App Secret key. You can get it here App DashBoard

Note that you need to set your App to use the testing domain URL. In my cases, i use “facebooktest.com”

facebook app dashboard setting

Not to forget to map this URL to your 127.0.0.1 in hosts file (C:\Windows\System32\drivers\etc\hosts)

127.0.0.1 facebooktest.com

To share what happened before i come to a workaround, below are the JavaScript to obtain Facebook access token to perform Graph API. THIS WORKS in all other browser EXCEPT Internet Explore 8.


$.support.cors = true; //

$.ajax({
 type: "POST",
 url: "https://graph.facebook.com/oauth/access_token",
 cache: false,
 data: {
 "client_id": appId,
 "client_secret": appSecret,
 "grant_type": "client_credentials"
 },
 error: function (xhr, status, error) {

//ERROR THROWN TypeError: Access is Denied for IE8
 },
 success: function (response) {

 },
 complete: function (request, textStatus) {
 if (request.responseText != null) {
 access_tokenParam = request.responseText.split('=')[0] + "=" + escape(request.responseText.split('=')[1]);
//access_tokenParam will be the token that you will then be used for subsequently Graph call
 }

}
 });

If this script runs on IE 8, you will hit TypeError: Access is Denied This is due to IE 8 does not use the XMLHttpRequest, but an alternative object named XDomainRequest. Some googling suggested using JSONP. Alright, lets try.

$.ajax({
 type: "POST",
 url: "https://graph.facebook.com/oauth/access_token",
 cache: false,
 dataType: "jsonp",
 data: {
 "client_id": appId,
 "client_secret": appSecret,
 "grant_type": "client_credentials"
 },

error: function (xhr, status, error) {

//ERROR Thrown "Parseerror" in IE8 AGAIN...
 });

The above both attempts to get the access token failed in IE8. After digging deeper to Facebook Documentation, i found this

There is another method to make calls to the Graph API that doesn't require using a generated app token. You can just pass your app id and app secret as the access_token parameter when you make a call:
http://graph.facebook.com/endpoint?key=value&access_token=app_id|app_secret
The choice to use a generated access token vs. this method depends on where you hide your app secret.

Holy cow…

What you need to do is just setting your access token as per below

access_tokenParam = “access_token=XXX|YYY”

where XXX is your App ID and YYY is your App Secret. e.g. “access_token=778487422177917|gu_TZwkQe5jtBj7VvZpMJX8odlx”

don’t try to use it, it is not valid =)

Knowning that the Access Token needs not to be provided by Graph, you may then perform API call like this (taking my posts as example)


access_tokenParam = 'access_token=' + appId + '|' + appSecret;
renderFBNewsFeed('yihaa5', access_tokenParam);

function renderFBNewsFeed(id, access_tokenParam) {
 var url = '/' + id + '/posts?' + access_tokenParam;
 FB.api(url, { return_ssl_resources: 1 }, function (response) {
 if (response.data) {
 var html = "";
 for (var i = 0; i < response.data.length; i++) {
 var obj = response.data[i];
 var fakeTitle = obj.name ? obj.name : (obj.story ? obj.story : obj.message );
 var fakeDes = obj.description? obj.description : obj.caption;
 html += "<h2>" + fakeTitle + "</h2>";
 html += "<h3>" + fakeDes + "</h3>";
 }
 $("#fbNewsWrapper").html(html);
 }
 });

}

You can find the entire html file here Hope it helps!