Facebook Javascript SDK問題：“FB未定義”

Question

從這里的Facebook文檔中復制的以下代碼在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>

在Javascript控制台中，我得到：

Uncaught ReferenceError: FB is not defined

我在Firefox或Safari中沒有任何問題，只有Chrome。

Answer 1

我看到Chrome已經安裝了阻止Facebook腳本的WidgetBlock。 結果恰好是此錯誤消息。 確保禁用任何可能會干擾的擴展程序。

Answer 2

所以問題實際上是你沒有等待init完成。 這將導致隨機結果。 這是我使用的。

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));

這將確保一旦加載了所有內容，就可以使用並執行函數facebookInit。 這樣，每次要使用它時都不必復制init代碼。

function facebookInit() {
   // do what you would like here
}

Answer 3

如果在fbAsyncInit定義之后省略分號，也會出現此錯誤。

window.fbAsyncInit = function() {
    FB.init({
        appId: 'YOUR APP ID',
        status: true,
        cookie: true,
        xfbml: true
    });
    //do stuff
}; //<-- semicolon required!

如果沒有分號，情況與此較短的示例相同：

var x = function () {
    console.log('This is never called. Or is it?');
}

('bar');

該函數被調用，因為沒有分號（'bar'）部分被視為對剛剛定義的函數的調用。

Answer 4

我也遇到了這個問題，解決它的問題與Facebook無關，但我包含的先前腳本形式不好

<script type="text/javascript" src="js/my_script.js" />

我改成了

<script type="text/javascript" src="js/my_script.js"></script>

它有效......

Weew ...希望我的經驗可以幫助其他人堅持這幾乎幾乎所有事情，但仍然無法讓它工作......

哦，男孩...... ^^

Answer 5

嘗試異步加載： 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>

Answer 6

我有一個非常混亂的cody，通過AJAX加載facebook的javascript，我必須確保js文件已經完全加載，然后調用FB.init這似乎對我有用

    $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
      });

此代碼使用jquery加載javascript並執行函數回調onLoad的javascript。 為這個塊創建一個onLoad事件監視程序，它在IE6,7和8上最終無法正常工作

Answer 7

AdBlock阻止了facebook JS api腳本，因為它與facebook連接有關，這通常很煩人。

Answer 8

使用setTimeout，因為有時FB.init需要一些時間來聲明

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);

Answer 9

不確定你是否仍然遇到這個問題，但我遇到了同樣的問題，原來我有一個擴展運行，阻止Facebook來自所有不是Facebook的網站。 禁用它，工作！

Answer 10

為了測試Mattys關於FB沒有完成的建議，我在腳本中發出警告。 這導致我可以控制的延遲。 果然......這是一個時間問題。

    $("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);
    });

Answer 11

我有同樣的問題，我找到了原因。

我有avast！ 我的計算機上安裝了防病毒軟件，它要求我安裝chrome插件的更新。 新avast! plugin for chrome avast! plugin for chrome具有阻止廣告和跟蹤的功能，默認情況下，它會阻止Facebook訪問。 我已經解決了我的問題，只是在avast中允許facebook！ 我需要的網站的chrome插件。

由於這個問題很老，我認為有些人可能會和我一樣，新的avast！ chrome插件。

Answer 12

有你的解決方案:)

您必須在加載窗口后運行腳本

如果你使用jQuery，你可以使用簡單的方法：

<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>

Answer 13

嘗試在Head部分加載腳本。 此外，如果您在某些調用下定義腳本會更好： document.ready ，如果您在body部分中定義了這些腳本

Answer 14

我有同樣的問題，我找到的唯一解決方案是將所有使用FB語句的內容放在init腳本中，我也使用異步加載，因此回調函數是在需要FB的所有內容之后。 我有一個常見的頁面dinamycally加載PHP這么多的部分需要不同的Facebook功能由PHP控制如果語句使一切有點凌亂，但工作！ 如果我嘗試從加載腳本中取出任何FB聲明，則firefox會顯示“FB未定義”消息。 希望它有所幫助。

Answer 15

Facebook更喜歡你異步加載他們的SDK，這樣它就不會阻止你的頁面所需的任何其他腳本，但是由於iframe ，控制台有可能在FB對象完全被激活之前嘗試調用FB對象上的方法即使FB只在fbAsyncInit函數中調用， fbAsyncInit 。
嘗試同步加載JavaScript，你不應該再得到錯誤。 為此，您可以復制並粘貼Facebook提供的代碼並將其放在外部.js文件中，然后將該.js文件包含在頁面<head>中的<script>標記中。 如果必須異步加載SDK，則在調用init函數之前先檢查是否要創建FB。

Answer 16

我有一個類似的問題，結果是Adblocker Pro。 請務必檢查是否已禁用此阻止擴展程序或其他阻止擴展程序。 因此，我失去了大約1小時30分鍾。 感覺就像這樣的菜鳥;）

Answer 17

我有同樣的問題。 解決方案是使用core.js而不是debug.core.js

Answer 18

您是否已將appId屬性設置為當前的應用程序ID？

Answer 19

如果您正在使用JQuery，請嘗試使用Jquery調用FB

例如

$(document).ready(function(){
    FB.Event.subscribe('auth.login', function(){
        alert('logged in!');
    });
});

這對我有用