1. ホーム
  2. javascript

[解決済み] facebookのFB.initが完了したことを検出する方法

2022-09-16 09:26:37

質問

古いJS SDKには、FB.ensureInitという関数がありました。新しいSDKにはそのような関数がないようです。完全に開始されるまでapiコールを行わないようにするにはどうしたらよいでしょうか。

私はこれをすべてのページのトップに含めています。

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '<?php echo $conf['fb']['appid']; ?>',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
    FB.Canvas.setAutoResize();
  };

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

どのように解決するのですか?

2012年1月4日更新

FB依存のメソッドを呼び出すだけではダメなようです(例えば FB.getAuthResponse() の直後で FB.init() として、前と同じように FB.init() は非同期であるように見えます。コードを FB.getLoginStatus() レスポンスにラップすることで、APIの準備が完全に整ったことを検出するトリックを行うことができるようです。

window.fbAsyncInit = function() {
    FB.init({
        //...
    });

    FB.getLoginStatus(function(response){
        runFbInitCriticalCode(); 
    });

};  

を使用する場合、または fbEnsureInit() を実装している場合は、以下のようになります。

window.fbAsyncInit = function() {
    FB.init({
        //...
    });

    FB.getLoginStatus(function(response){
        fbApiInit = true;
    });

};  


元記事です。

FBが初期化されたときにスクリプトを実行したい場合は、コールバック関数を fbAsyncInit :

  window.fbAsyncInit = function() {
    FB.init({
      appId  : '<?php echo $conf['fb']['appid']; ?>',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
    FB.Canvas.setAutoResize();

    runFbInitCriticalCode(); //function that contains FB init critical code
  };

もしFB.ensureInitを完全に置き換えたいのであれば、公式の置き換えは存在しないので、自分で何か書かなければなりません(大きな間違いだと思いますが)。以下は私が使っているものです。

  window.fbAsyncInit = function() {
    FB.init({
      appId  : '<?php echo $conf['fb']['appid']; ?>',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
    FB.Canvas.setAutoResize();

    fbApiInit = true; //init flag
  };

  function fbEnsureInit(callback) {
        if(!window.fbApiInit) {
            setTimeout(function() {fbEnsureInit(callback);}, 50);
        } else {
            if(callback) {
                callback();
            }
        }
    }

使用方法

fbEnsureInit(function() {
    console.log("this will be run once FB is initialized");
});