Google Chrome Frame and Facebook Javascript SDK - Cannot login
- by Giannis Savvakis
On the example below i have an html page with the javascript code needed to login to facebook.
On the i have the Google Chrome Frame meta tag that makes the page run with google chrome frame. If you open this page with any browser the finish() callback runs normally.
If you open it with Google Chrome Frame it never fires.
So this means that every Facebook App that tries to login to gather user data cannot login.
This happens if the page is opened with google frame.
But even if i remove the meta tag so that the page can open with IE8 the page opens again with google chrome frame because Facebook opens google chrome frame by default.
So because this is a Facebook app that runs inside an inside facebook.com it is forced to open with Google Chrome Frame!
SERIOUS BUG!
I have seen other people reporting it, someone has made a test facebook app also here:
http://apps.facebook.com/gcftest/
appID and channelUrl are dummy in the example below.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8" />
<title>Facebook Login</title>
<script type="text/javascript">
//<![CDATA[
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
var appID = '0000000000000';
var channelUrl = '//myhost/channel.html';
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : appID, // App ID
channelUrl : channelUrl,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.statusChange', function(response)
{
if(!response.authResponse)
FB.login(finish, {scope: 'publish_actions,publish_stream'});
else
finish(response);
});
FB.getLoginStatus(finish);
}
function finish(response)
{
alert("Hello "+response.name);
}
//]]>
</script>
</head>
<body>
<h1>Facebook login</h1>
<p>Do NOT close this window.</p>
<p>please wait...</p>
</body>
</html>
