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

2015年02月25日
follow us in feedly

アイキャッチ

せっかくブログを書いているなら、アクセス数を増やすために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>

■さいごに

ページの表示速度はアクセスしてくれたユーザーのためだけでなく、SEOのためにも大切な要素です。

Facebookの「いいね!」ボタンが同期通信のままの方は簡単に設定できますので、コードに追記してみてください。

また、最近では、表示速度改善のために公式のボタンを使用せず、オリジナルデザインのボタンを設置しているブログを見かけるようになりました。

やり方については以下の記事を参考にどうぞ。
 SNSボタンをオリジナルデザインにする方法 | Creator Clip
 SNSボタンをオリジナルデザインに!設置方法&シェア数の取得方法まとめ | Design Color

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ