いいねボタンを非同期読み込みでスピードアップする

facebook like button

WordPressで「いいね!」や「つぶやき」をGoogle Analytics計測する方法で使っているGoogle Analytics Social Engagement Tracking Codeを改造していて、Facebook SDKの読み込み方法を選べることに気がついたのでメモ。非同期・同期が選べるみたいね。

SDKを非同期読み込みする場合は、Google Analytics Social Tracking DemoのソースのようにFBのJDKの初期化処理を入れた以下の様な形で動いた。

https://gist.github.com/daipresents/6111173f20e2a666c7d9d9a050c0938a.js?file=gistfile1.txt

Loading and Initializationを読む限り、SDKがロードされたらすぐにwindow.fbAsyncInitが呼ばれるそうなので、ここにトラッキングの仕掛けを入れたりするとよさそう。channelファイルもAdding a Channel Fileを参考に以下のようなPHPファイルを作っておいた。

https://gist.github.com/daipresents/6111173f20e2a666c7d9d9a050c0938a.js?file=gistfile2.txt

「Adding a Channel File greatly improves the performance of the JS SDK(パフォーマンス上がるよ!)」とか「FB.init() is optional, but strongly recommended(オプションだけど強く推奨だよ!)」ってあるので、いいねボタンとかを入れる場合は入れたほうがよさそう。

また、「If you do not specify a channelUrl, you should remove page views containing fb_xd_bust or fb_xd_fragment parameters」ってあるので、fb_xd_fragmentがついたアクセスが大量に来てしまう問題の本対策にもなるらしい。

FacebookのLikeボタンを作るページから取得したいいねボタンのコードだと、「async = true」がないので同期読み込みになるのかしら。Loading and Initializationにも「async = true」はないんだけど、一応入れてます。

広告