web-dev-qa-db-ja.com

Facebook Javascript SDK問題：「FBが定義されていません」

Facebookのドキュメント here からコピーした次のコードは、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のSDKでは問題ありません。Chromeだけです。

javascriptgoogle-chromefacebookfacebook-javascript-sdk
39
Alex Miller

ChromeがFacebookスクリプトをブロックしているWidgetBlockをインストールした場合を見ました。結果はまさにこのエラーメッセージでした。干渉する可能性のある拡張機能を無効にしてください。

51
pbz

したがって、問題は実際には、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関数が使用可能になり実行されるようになります。そうすれば、使用するたびに初期化コードを複製する必要がなくなります。

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

このエラーは、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'）部分は定義されたばかりの関数の呼び出しと見なされるため、関数が呼び出されます。

24
Todd Kamin

私もこの問題に遭遇し、それを解決したのはFacebookとは関係ありませんが、私が含めた以前のスクリプトは悪い形でした

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

に変更しました

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

そしてそれは動作します...

Weew ...うまくいけば、私の経験が他の人がこれにこだわって助けてくれることを願っています。

ああボーイ... ^^

5
Woppi

AJAX=を介してfacebookのjavascriptをロードする非常に厄介なコードがあり、FB.initを呼び出す前にjsファイルが完全にロードされていることを確認する必要がありました。

    $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をロードし、javascriptの関数コールバックonLoadを実行します。最終的にIE6、7、および8でうまく機能しなかったブロックのonLoadイベントリスナーを作成するよりもはるかに面倒です

4
Nick Lim

非同期ロードを試す： 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>
4
beshkenadze

AdBlockは、FacebookのJS APIスクリプトをブロックします。これは、多くの場合うっとうしいFacebookの接続に関連しているためです。

3
eggie5

あなたがまだこの問題を抱えているかどうかはわかりませんが、私はちょうど同じ問題を抱えていたので、FacebookではないすべてのウェブサイトからFacebookをブロックする拡張機能を実行していました。それを無効にして、働いた！

2
Hosh Sadiq

FB.initが宣言されるまでに時間がかかることがあるため、setTimeoutを使用します。

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);
2
Allan Juliani

FBが終了していないというMattysの提案をテストするために、スクリプトにアラートを入れました。これにより、制御可能な遅延が発生します。案の定...それはタイミングの問題でした。

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

私は同じ問題を抱えていて、見つけた唯一の解決策は、FBスクリプトを使用するすべてをinitスクリプト内に配置することでした。私はPHPで動的にロードされた共通ページを持っているので、多くの部分はPHP ifによって制御される異なるfacebook関数を必要とします。これはすべてが少し面倒ですが、動作しています！ロードスクリプトからFB宣言を削除しようとすると、firefoxは「FBが定義されていません」というメッセージを表示します。それが何かに役立つことを願っています。

1
Juan

あなたのための解決策があります:)

ウィンドウが読み込まれた後にスクリプトを実行する必要があります

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

私は同じ問題を抱えていて、原因を見つけました。

アバストがあります！アンチウイルスがコンピュータにインストールされ、chromeプラグイン。新しいavast! plugin for chromeには広告と追跡をブロックする機能があり、デフォルトではFacebookアクセスをブロックします。私はavast！でFacebookを許可するだけで問題を解決しました。 chrome必要なWebサイトのプラグイン。

この質問は非常に古いため、一部の人々は私と同じ原因、新しいavast！を持っているかもしれないと思います。 chromeプラグイン。

1
Diego Malone

Headセクションでスクリプトをロードしてみてください。さらに、次のような呼び出しでスクリプトを定義する方が良いでしょう：document.ready、これらのスクリプトをbodyセクションで定義した場合

1
Stoic

同様の問題があり、Adblocker Proであることが判明しました。このブロック拡張機能または他のブロック拡張機能が無効になっていることを確認してください。これにより、約1時間30分失われました。そのような初心者のように感じます;）

0
rupi

同じ問題がありました。解決策は、debug.core.jsの代わりにcore.jsを使用することでした

0
Mangirdas

Facebookは、ページに必要な他のスクリプトをブロックしないようにSDKを非同期にロードすることを好みますが、iframeにより、コンソールがFBオブジェクトのメソッドを呼び出そうとする可能性がありますFBはfbAsyncInit関数でのみ呼び出されますが、FBオブジェクトは完全に作成されます。
javascriptを同期的にロードしてみてください。エラーは表示されなくなります。これを行うには、Facebookが提供するコードをコピーして貼り付け、外部.jsファイルを作成してから、その.jsファイルの<script>タグの<head>ページの。 SDKを非同期で読み込む必要がある場合は、init関数を呼び出す前に、FBが最初に作成されることを確認してください。

0
Trevino Jarrett