Sometimes I'm getting the "FB is not defined" issue when loading the http://connect.facebook.net/en_US/all.js
I've realized that the problem is because sometimes my website just doesn't load that file. So it gets nothing, and the object FB literally doesn't exist.
My solution is to prevent my users when this happens, so I've tried the following codes in JavaScript but none seems to work:
if (FB) {/*run the app*/} else {/*alert the user*/}
if (FB!==false) {/*run the app*/} else {/*alert the user*/}
if (FB!='undefined') {/*run the app*/} else {/*alert the user*/}
thanks for the answer!
This question is related to
javascript
facebook
Assuming FB is a variable containing the Facebook object, I'd try something like this:
if (typeof(FB) != 'undefined'
&& FB != null ) {
// run the app
} else {
// alert the user
}
In order to test that something is undefined in plain old JavaScript, you should use the "typeof" operator. The sample you show where you just compare it to the string 'undefined' will evaluate to false unless your FB object really does contain the string 'undefined'!
As an aside, you may wish to use various tools like Firebug (in Firefox) to see if you can work out why the Facebook file is not loading.
FB recommends to add the async all.js include right after body, so that FB object get prepared when you use it in page.
You can also have artificial delay using setTimeout to make sure FB object is loaded. e.g.
<script>setTimeout(function(){
FB.Event.subscribe('edge.create',
function (response) {
alert('msg via fb');
});},2000);
</script>
...
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script type="text/javascript">
...
Check div id="fb-root" /div" !!! It's very important to run.
I had FB never being defined. Turned out that I was prototyping functions into the Object class called "merge" and another called "toArray". Both of these screwed up Facebook, no error messages but it wouldn't load.
I changed the names of my prototypes, it works now. Hey, if Facebook is going to prototype Object, shouldn't I be allowed to prototype it?
I guess you missed to put semi-colon ; at the closing curly brace } of window.fbAsyncInit = function() { ... };
For people who still got this FB bug, I use this cheeky fix to this problem.
Instead of http://connect.facebook.net/en_US/all.js, I used HTTPS and changed it into https://connect.facebook.net/en_US/all.js and it fixed my problem.
You were very close with your original example. You could either use @jAndy's suggestion or:
if (typeof FB != 'undefined')
It's pretty strange for FB not to be loaded in your javascript if you have the script tag there correctly. Check that you don't have any javascript blockers, ad blockers, tracking blockers etc installed in your browser that are neutralizing your FB Connect code.
There is solution for you :)
You must run your script after window loaded
if you use jQuery, you can use simple way:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
status : true,
version : 'v2.5'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
$(window).load(function() {
var comment_callback = function(response) {
console.log("comment_callback");
console.log(response);
}
FB.Event.subscribe('comment.create', comment_callback);
FB.Event.subscribe('comment.remove', comment_callback);
});
</script>
I had a similar issue and it turned out to be Adblocker Pro. Be sure to check that this or other blocking extensions have been disabled. I lost around 1hr 30 mins due to this. Feel like such a noob ;)
<script>
window.fbAsyncInit = function() {
FB.init({
appId :'your-app-id',
xfbml :true,
version :'v2.1'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if(d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src ="// connect.facebook.net/en_US /sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}
(document,'script','facebook-jssdk'));
</script>
From the documentation: The Facebook SDK for JavaScript doesn't have any standalone files that need to be downloaded or installed, instead you simply need to include a short piece of regular JavaScript in your HTML tha
I think you should solve the main issue instead, which solution is provided by Facebook (Loading the SDK Asynchronously):
You should insert it directly after the opening tag on each page you want to load it:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
From the documentation:
The Facebook SDK for JavaScript doesn't have any standalone files that need to be downloaded or installed, instead you simply need to include a short piece of regular JavaScript in your HTML that will asynchronously load the SDK into your pages. The async load means that it does not block loading other elements of your page.
UPDATE: using the latest code from the documentation.
Source: Stackoverflow.com