2013-02-22 4 views
8

Facebookアプリで標準のFacebook Javascriptコードを使用していますが、これはHerokuのサンプルアプリに入っています。私はそれを本当に理解していませんが、慎重に私に役立ついくつかの基本的なことをするためにサンプルアプリケーションを変更することができました。Facebook Javascript SDKが非同期に読み込まれるのはなぜですか?

私の理解では、このコードはどうにかFacebook Javascript SDKを読み込むことになります。つまり、javascriptコードファイルをロードします。どのファイルが実際にロードされていますか?他のjavascriptコードファイルをロードするのと同じように、なぜロードできないのですか?たとえば:

<script type="text/javascript" src="/javascript/jquery-1.7.1.min.js"></script> 

は、この非常に複雑なアプローチの欠点は、私はそれの頭や尾を作ることができないということである、と私はそれを理解していないので、私はそれを使用する方法についての直感を持っていません。

ここでコード:

<script type="text/javascript"> 
    window.fbAsyncInit = function() { 
    FB.init({ 
     appId  : '<?php echo AppInfo::appID(); ?>', // App ID 
     channelUrl : '//<?php echo $_SERVER["HTTP_HOST"]; ?>/channel.html', // Channel File 
     status  : true, // check login status 
     cookie  : true, // enable cookies to allow the server to access the session 
     xfbml  : true // parse XFBML 
    }); 

    // Listen to the auth.login which will be called when the user logs in 
    // using the Login button 
    FB.Event.subscribe('auth.login', function(response) { 
     // We want to reload the page now so PHP can read the cookie that the 
     // Javascript SDK sat. But we don't want to use 
     // window.location.reload() because if this is in a canvas there was a 
     // post made to this page and a reload will trigger a message to the 
     // user asking if they want to send data again. 
     window.location = window.location; 
    }); 

    FB.Canvas.setAutoGrow(); 
    }; 

    // Load the SDK Asynchronously 
    (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/all.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
</script> 

答えて

4

それがFacebookサーバーからの応答を待つ必要がないので、それはより速くあなたのサイトの負荷になります。

window.fbAsyncInitはコールバックで、スクリプトがロードされると実行されます。 したがって、Facebookのサーバーが停止しているときは、この関数は呼び出されません。

APIが読み込まれると、APIのすべての機能が利用できます。単にドキュメントをチェックしてください。 http://developers.facebook.com/docs/reference/javascript/

これは明らかです。

+4

Facebook Javascript SDKが実際に他のJavascriptコードで使用されていない場合、なぜこのテクニックを使用する必要がありますか? –

+1

Facebookは何百万ものWebページに埋め込まれた大物の一員なので、パフォーマンスの問題にもっと注意を払う必要があります。その周りを見てみると、他の大手プレイヤーは通常、スクリプトを非同期に埋め込むことをおすすめします。 Google、Twitter、... – CBroe

+0

Facebookの場合、サーバーはしばらく時間がかかる可能性があります。好きなボタンがロードされたときには注意してください。通常わずかな遅延があります。 – Tom

関連する問題