Facebook API’s FB object just seems to go null after init. This is the code I’m using, it’s quite simple. The problem is that it says my “/me” response is undefined. I’m logged in, just double checked, so this is not the case. I already gave it permission to use my data.
Why is my “/me” responce undefined?
Also, is there a way I can move my code:
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
testAPI();
Into a separate .js file (with the code wrapped in a function), and have it load when function gets called inside window.fbAsyncInit? Cause every way I’ve tried to do that resulted in failure.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FB-Stuff</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[my code]', // App ID
channelUrl : '//[my channel]', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
testAPI();
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>
edit——————————————————-
Now I’m not getting any function calls/error messages at all. This is the new code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FB-Stuff</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mycode.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx', // App ID
channelUrl : '//xxx/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
facebookInit();
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>
And inside mycode.js is:
function facebookInit(){
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
}
You need to defer the call to
FB.apiuntil after the status has been resolved – useFB.getLoginStatusor listen to one of the events for this.Not sure what you mean with moving the code – you can put this code anywhere as long as it is loaded before the JS SDK.