Uncaught ReferenceError: FB is not defined when using FB.getLoginStatus
In Chrome, you'd be getting the error: Uncaught ReferenceError: FB is not defined.
I like to trigger a custom event in Facebook's initialization function, fbAsyncInit(). Then I'm not limited to doing all my FB related scripting inside of the fbAsyncInit function. I can put it anywhere, by just listening for that custom event to be fired.
window.fbAsyncInit = function() {
FB.init({
appId : '123456789',
status : true,
cookie : true,
xfbml : true
});
$(document).trigger('fbload'); // <---- THIS RIGHT HERE TRIGGERS A CUSTOM EVENT CALLED 'fbload'
};
//MEANWHILE IN $(document).ready()
$(document).on(
'fbload', // <---- HERE'S OUR CUSTOM EVENT BEING LISTENED FOR
function(){
//some code that requires the FB object
//such as...
FB.getLoginStatus(function(res){
if( res.status == "connected" ){
FB.api('/me', function(fbUser) {
console.log("Open the pod bay doors, " + fbUser.name + ".");
});
}
});
}
);
You are calling FB.getLoginStatus before the SDK is loaded and/or initialized. To wait for that, that’s what the fbAsyncInit event is for. So put the method call in there.
I used the following simple approach and it works correctly:
In the head
section I load the SDK:
<script type="text/javascript" src="//connect.facebook.net/en_US/sdk.js"></script>
Then in the body
of your page where your actual content is, I used this:
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login(function(response) {
statusChangeCallback2(response);
}, {scope: 'public_profile,email'});
} else {
alert("not connected, not logged into facebook, we don't know");
}
}
function statusChangeCallback2(response) {
console.log('statusChangeCallback2');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
console.log('still not authorized!');
} else {
alert("not connected, not logged into facebook, we don't know");
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
$(document).ready(function() {
FB.init({
appId : '1119999988888898981989819891',
xfbml : true,
version : 'v2.2'
});
checkLoginState();
});
</script>