Facebookの「いいね!」ボタンは非同期通信を有効化しよう

2015年02月25日

Sponsored Link

せっかくブログを書いているなら、アクセス数を増やすためにSNSシェアボタンを設置しないともったいないですね。

しかし、このSNSシェアボタンはページの読み込みスピードに悪影響を及ぼします。

Facebookの「いいね!」ボタンが重いと感じていませんか？シェア数を表示する設定にしていると特にページ読み込みが遅くなります。

読み込みが遅いのは非同期通信になっていないことが理由の一つとして上げられます。

非同期通信とは
ネットワークなどでつながれているコンピュータ間で、送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式。同期通信はデータ通信のリクエストを出してからレスポンスが来るまでほかの処理を行わずにレスポンスを待ち続けるが、非同期通信ではレスポンスを待っている間にほかの処理を行える。ほかの処理を行っている際に、レスポンスを受信すると受信処理を実行する。

＠IT リッチクライアント用語事典

非同期通信の設定方法

Facebookの「いいね!」ボタンは設定ページで取得したコードをそのまま使うと非同期通信が有効になっていません。

有効化するためには、設定ページで取得したコードのうち、JavaScript用Facebook SDKを下記のように書き換えてください。

”js.async = true;” を追加するだけです。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=●●●●●●●●●●●●&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>