10
FB.initに渡されたChannelUrlパラメータが実際にfb js sdkによって使用されていることを知っていますか？私はそれが私たちのnginxログファイルにヒットしているのを見ることができ、それはIE8ユーザーからのようですが、私は手動で再作成するようです。私はファンページiframeのアプリを、ボタンとコメントプラグインと同じように持っています。実際にChannelUrlはいつ使用されますか？
A
答えて
19
この投稿が表示されます。それはよく説明されています。
https://developers.facebook.com/blog/post/2011/08/02/how-to--optimize-social-plugin-performance/
この記事のリンクは将来的に更新してもよいです。 FB開発者のブログから投稿全体をコピーして貼り付けて、著者に全面的な評価を与えています。
ハウツー：はAnkur Pansariによってソーシャルプラグインのパフォーマンス を最適化 - ウェブサイトの午前12:00
百万で2011年8月3日のソーシャルプラグインをレンダリングするためにXFBMLを使用しています。あなたのウェブサイトでこれらのパフォーマンスを向上させるためのベストプラクティスをいくつか紹介しました。具体的には、カスタムのchannelUrlと非同期の読み込みを使用して、読み込み時間を改善し、Facebookからの参照トラフィックの二重計算などのその他の問題を減らします。
カスタムチャネルURLは、channel.rlというFB.init関数のオプションパラメータです。あなたがJavaScriptライブラリを初期化すると、FB.init機能でchannelUrlパラメータを追加します。
<div id="fb-root"></div>
<script src="//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 server to access session,
xfbml: true, // enable XFBML and social plugins
oauth: true, // enable OAuth 2.0
channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
});
</script>
channelUrlポイントを使用すると、一部の古いブラウザでは、通信速度を向上させることができますローカルのディレクトリに追加したファイルに。 channelUrlがなければ、非公開のiframeにウェブページの2番目のコピーを読み込んでソーシャルプラグインを適切に読み込むなどの回避策を強制されます。この回避策は、負荷時間を増加させ、Facebookからの紹介トラフィックを膨らませます。
（http://www.yourdomain.com/channel.htmlにある）ファイルに次の行を追加し、channel.htmlファイルを作成するには：
<script src="//connect.facebook.net/en_US/all.js"></script>
あなたがPHPを実行する能力を持っている場合は、私たちは強く、長いキャッシュを設定する助言channelUrlファイルを使用して最適なパフォーマンスを確保します。ここでは、これを達成するサンプルPHPスクリプトです：
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: maxage=".$cache_expire);
header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
この場合には、あなたはまた、そのようなhttp://www.yourdomain.com/channel.phpとして完全修飾されたURLにchannelUrlファイルを設定する必要があります。
私たちのテストでは、カスタムchannelUrlを追加すると、Internet Explorerのパフォーマンスが向上するため、すべての開発者にこの機能を組み込むことをお勧めします。 Internet Explorerは、5つのXFBMLプラグインを使用したテストWebサイトの読み込み時間が1.10秒から0.43秒に改善された、パラメータを含めると、統計的に有意なパフォーマンス向上をもたらします。
非同期読み込みは、ページの他の要素の読み込みをブロックせずにページをすばやく読み込むための簡単な方法です。 JS SDKのロードに成功すると、window.fbAsyncInit関数が呼び出されます。 Facebook API呼び出しに依存するフロントエンドの機能はすべて、window.fbAsyncInitを介して分離して呼び出す必要があります。これにより、Facebookの機能がノンブロッキングの方法でロードされ、レンダリングが高速化され、SEOの利点が得られます。あなたのソーシャル機能を設計するときには、この考え方でアプローチする必要があります。例えば
：
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
/* All Facebook functions should be included
in this function, or at least initiated from here */
window.fbAsyncInit = function() {
FB.init({appId: 'your app id',
status: true,
cookie: true,
xfbml: true});
FB.api('/me', function(response) {
console.log(response.name);
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
<html>
私たちは、これらのオプションの重要性を反映するために、私たちのドキュメントを更新しchannelUrlが含まれるように、デフォルトのサンプルコードを変更しました。私たちは、オペレーションズ・デベロッパー・ラブの一環としてドキュメントを更新し、「How-To」ブログ・ポストでベスト・プラクティスを共有し続けています。
+0
あなたのリンクに感謝します。それは問題を解決しました:) –
+2
時間が経つにつれてリンクが消滅するかもしれないので、ここでもう少し背景を提供するのが最善でしょう。 –
+2
まあ...私は少し怠惰です！ :)あなたの提案に感謝します。次回はこの問題を覚えています。 –
ページロード中にネットワークトラフィックを調べると、FFやChromeでもロードされることがわかります。 **それがロードされると、私は分かりません。 – DMCS