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
[sourcecode language=”html”]
<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>
[/sourcecode]
And then you need this to initialise FB SDK
[sourcecode language=”javascript”]
<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>
[/sourcecode]
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”
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.
[sourcecode language=”javascript”]
$.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
}
}
});
[/sourcecode]
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.
[sourcecode language=”javascript”]
$.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…
});
[/sourcecode]
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 theaccess_tokenparameter when you make a call:http://graph.facebook.com/endpoint?key=value&access_token=app_id|app_secretThe 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)
[sourcecode language=”javascript”]
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);
}
});
}
[/sourcecode]
You can find the entire html file here Hope it helps!