なぜか、FB.login()が実行できなかった時の話

今、友達の頼みでWebサイトを制作をしているのですが、Facebookとの連携をとるためにFacebookSDKを導入し、色々と試していたところ、エラーの沼にハマってしまったので、備忘録も兼ねて同じエラーが出ている方の助けになればなと思います。

エラー名ははっきりとは覚えていないのですが、「FB.login() ～ undefiend ～」的なエラーだったと思います。JavaScriptのエラーでよく見かけますね。

要するに、関数が見つからないよと言う意味です。

それでは、どのように解決したかを順を追って説明します。

SDKファイルが読み込まれていない！？#

FacebookのDevelopperサイトから、以下のコードをコピペします。

App.vue

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{your-app-id}',
      cookie     : true,
      xfbml      : true,
      version    : '{api-version}'
    });
      
    FB.AppEvents.logPageView();   
      
  };

  (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 = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

ただ、このままではFacebookのログイン機能、APIを取得などの関数を実行することはできません。

なぜなら、、、、

SDKファイルを読み込めていないのです！！！

実際に、Chromeの開発者ツールの「Element」を見て下さい。

index.html

<script src="https://connect.facebook.net/ja_JP/sdk.js/#xfbml=1&version=v9.0&appId=～&autoLogAppEvents=1"

このようなSDKファイルが読み込まれていないと思います。

なので、これを読み込めるようにしましょう！！

createdで関数の実行#

先ほどの関数をmethods内にて定義し、createdで実行します。

App.vue

<script>
methods: {
   async initFacebook() {
      //init初期化
      window.fbAsyncInit = function() {
        window.FB.init({
          appId: "MY_APP_ID", //アプリID
          status: true,
          cookie: true,
          xfbml: true,
          version: "v9.0",
        });
      };
    },
   async loadFacebookSDK(d, s, id) {
      //sdkの取得(引数を指定して実行、一番最初に実行)
      //document, "script", "facebook-jssdk"
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.crossorigin = "anonymous";
      js.src =
        "https://connect.facebook.net/ja_JP/sdk.js/#xfbml=1&version=v9.0&appId=ご自身のAppIDを入れてください&autoLogAppEvents=1";
      js.nonce = "ToRaB4ll";
      fjs.parentNode.insertBefore(js, fjs);
    },
}
created() {
      await this.loadFacebookSDK(document, "script", "facebook-jssdk"); 
      //sdkファイルの読み込み。これを最初に実行しないとFBが使えない
      await this.initFacebook();  
      //initの初期化
}
</script>

これで、無事ログイン機能を実装することができました！！

※ちなみに、SDKファイルの実行は一番最初に実行してください！（絶対）

また、App.vueで実行してしまうと、毎回実行され、すべてのページでロードが行われるのであまりおススメはしないです。。。

なので、Facebookとの連携を行うページだけロードしてください。

何回も実行する場合は、僕の書いた何回も使う関数を、いつでもどこでも呼び出したい。。。の記事を参考にして頂くと良いかと！！

以上、「FB.login()のエラー解決方法」でした！！！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading