Problème Facebook Javascript SDK: "FB n'est pas défini"
le code suivant, copié à partir de la documentation Facebook ici, ne fonctionne pas pour moi dans Chrome.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
dans la console Javascript je reçois:
Uncaught ReferenceError: FB is not defined
Je n'ai aucun problème avec le SDK de Firefox ou Safari, juste du Chrome.
19 réponses
J'ai vu un cas où Chrome avait installé WidgetBlock qui bloquait le script Facebook. Le résultat était exactement ce message d'erreur. Assurez-vous de désactiver toutes les extensions qui peuvent interférer.
donc le problème est en fait que vous n'attendez pas que l'init soit terminé. Cela provoquera des résultats aléatoires. Voici ce que j'utilise.
window.fbAsyncInit = function () {
FB.init({ appId: 'your-app-id', cookie: true, xfbml: true, oauth: true });
// *** here is my code ***
if (typeof facebookInit == 'function') {
facebookInit();
}
};
(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));
cela assurera qu'une fois que tout est chargé, la fonction facebookInit est disponible et exécutée. De cette façon, vous n'avez pas à dupliquer le code d'initialisation à chaque fois que vous souhaitez l'utiliser.
function facebookInit() {
// do what you would like here
}
cette erreur s'affichera également si vous omettez le point-virgule après la définition de fbAsyncInit.
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true
});
//do stuff
}; //<-- semicolon required!
Sans le point-virgule, la situation est la même que dans ce court exemple:
var x = function () {
console.log('This is never called. Or is it?');
}
('bar');
la fonction est appelée, car sans le point-virgule la partie ('bar') est considérée comme un appel à la fonction juste définie.
j'ai rencontré ce problème aussi et ce qui l'a résolu n'a rien à voir avec Facebook mais le script précédent que j'ai inclus qui était en mauvaise forme
<script type="text/javascript" src="js/my_script.js" />
je l'ai changé pour
<script type="text/javascript" src="js/my_script.js"></script>
Et ça fonctionne...
Weew... avec un peu de chance, mon expérience peut aider d'autres personnes coincées dans ce qui a fait à peu près tout, mais ne peut toujours pas le faire fonctionner...
Oh Boy... ^^
Essayez De Chargement Asynchrone: http://developers.facebook.com/docs/reference/javascript/fb.init/
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
j'ai eu un cody très désordonné qui a chargé le javascript de facebook via AJAX et je devais m'assurer que le fichier js a été complètement chargé avant d'appeler FB.initialisation cela semble fonctionner pour moi
$jQuery.load( document.location.protocol + '//connect.facebook.net/en_US/all.js',
function (obj) {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
//ANy other FB.related javascript here
});
ce code utilise jquery pour charger le javascript et faire la fonction callback onLoad du javascript. c'est beaucoup moins désordonné que d'avoir créé un eventlistener onLoad pour le bloc qui finalement ne fonctionnait pas très bien sur IE6, 7 et 8
AdBlock bloque les scripts de l'api JS facebook parce qu'il est lié à Facebook connect ce qui est souvent ennuyeux.
Je ne sais pas si vous avez toujours ce problème, mais j'ai eu le même problème, il s'avère que j'avais une extension qui bloquait Facebook de tous les sites qui ne sont pas Facebook. Désactivé, travaillé!
Utilisez un setTimeout, parce que parfois le FB.init prend un certain temps pour être déclaré
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
function login() {
FB.login(function(response) {
if (response.authResponse) {
testAPI();
} else {
// cancelled
}
});
}
setTimeout(function() {
login();
},2000);
essayez de charger vos scripts dans la Section Head.
De plus, ce sera mieux si vous définissez vos scripts sous un appel comme:document.ready
, si vous avez défini ces scripts dans la section body
j'ai eu le même problème et la seule solution que j'ai trouvée a été de mettre tout ce qui utilise l'instruction FB dans le script d'initialisation, j'ai aussi utilisé le chargement async, donc la fonction de rappel est après tout ce qui a besoin de FB. J'ai une page dinamycally commune chargée avec php tellement de parties ont besoin de différentes fonctions facebook contrôlées par php si les déclarations qui fait tout un peu désordre, mais fonctionne!. si j'essaie de prendre n'importe quelle déclaration FB hors du script de chargement, alors firefox montre le "FB n'est pas défini" message. J'espère que ça aide en quoi que ce soit.
pour tester les suggestions de Mattys sur le fait que FB ne termine pas, j'ai mis une alerte dans le script. Cela cause un retard que je pourrais contrôler. Bien sûr assez... c'était un problème de synchronisation.
$("document").ready(function () {
// Wait...
alert('Click ok to init');
try {
FB.init({
appId: '###', // App ID
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
}
catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.message + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
FB.Event.subscribe('auth.statusChange', OnLogin);
});
j'ai eu le même problème et j'ai trouvé la cause.
j'ai de l'avast! antivirus installé dans mon ordinateur, et il m'a demandé d'installer la mise à jour pour le plugin chrome. La nouvelle avast! plugin for chrome
a la fonctionnalité de bloquer les annonces et le suivi, et, par défaut, il bloque l'accès facebook. J'ai résolu mon problème en permettant simplement facebook dans l'avast! plugin chrome pour le site dont j'avais besoin.
comme cette question est très ancienne, je pense que certaines personnes pourraient avoir la même parce que comme moi, le nouvel avast! chrome plugin.
Il y a la solution pour vous :)
vous devez exécuter votre script après avoir chargé la fenêtre
si vous utilisez jQuery, vous pouvez utiliser la manière simple:
<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>
j'ai eu le même problème. Les solutions étaient d'utiliser core.js au lieu de débogage.core.js
Facebook préfère que vous chargiez leur SDK de façon asynchrone pour qu'il ne bloque pas d'Autres scripts dont vous avez besoin pour votre page mais à cause de iframe
il y a une chance que la console essaye d'appeler une méthode sur l'objet FB avant que L'objet FB ne soit complètement créé même si FB est seulement appelé dans le fbAsyncInit
fonction.
Essayez de charger le javascript de façon synchrone et vous ne devriez plus avoir l'erreur. Pour ce faire, vous pouvez copier et coller le code que Facebook fournit et de le placer en externe .js
le fichier puis de l'inclure .js
le fichier <script>
dans la balise <head>
de votre page. Si vous devez charger leur SDK de façon asynchrone, Vérifiez D'abord si FB est créé avant d'appeler le init
fonction.
j'ai eu un problème similaire et il s'est avéré être Adblocker Pro. Assurez-vous de vérifier que cette extension de blocage ou d'autres ont été désactivées. J'ai perdu environ 1 heure 30 minutes à cause de ça. Se sentir comme un noob ;)
avez-vous défini la propriété appId à votre ID d'application actuel?
si vous utilisez JQuery, essayez de mettre FB withing jQuery call
e.g.
$(document).ready(function(){
FB.Event.subscribe('auth.login', function(){
alert('logged in!');
});
});
qui a fonctionné pour moi