Facebookを非同期通信で読み込む
トピックス
FacebookのLikeボタンやLikeボックスをサイトに設置している方は多いと思います。
その際、bodyタグのすぐ後にFacebookのJavaScript SDKを配置しますが、デフォルトでは非同期通信で読み込むようになっていません。非同期通信で読み込むことで、LikeボタンやLikeボックスの表示スピードを早くすることができます。
FacebookのLikeボタンやLikeボックスを非同期通信で読み込むのはとても簡単!
JavaScript SDKを配置時に”js.async = true;”を追記するだけです。
Likeボタンの場合は以下ページへアクセスしてコードを取得してください。
⇒ Like Button -Facebook開発者-
Likeボックスの場合は以下ページへアクセスしてコードを取得してください。
⇒ Like Box -Facebox開発者-
すると以下のようなJavaScript SDKが表示されます。
JavaScript SDK
<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/all.js#xfbml=1&appId=○○○○○○○○○○○○"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
補足
8行目の”js.src~”の上に反転表示されている”js.async = true;”を追記します。
8行目の”○○○○○○○○○○○○”にはApplication IDを入力します。
これだけで、LikeボタンやLikeボックスをサイト内に非同期通信で読み込むことができるようになります。
非同期通信って何でしょう?
また、そのメリット・デメリットは?
非同期通信とは?
データ通信時、送信側と受信側で送受信のタイミングを合わすことなく通信する方式で、送信者・受信者が両方オンラインでなくても片方が接続しているだけで通信できます。
分りやすい例をあげると、電子メール。電子メールは、相手がオンラインであろうがオフラインであろうが関係なく送信できますよね。
同期通信では、リクエストを出してからレスポンスが返ってくるまで他の処理を行わず待っているの対して、非同期通信は、リクエストを出してからレスポンスが返ってくるまで他の処理を行い、レスポンスを受信すると処理を実行するといった違いがあります。
その結果、処理速度が速く、表示スピードが速く感じるわけです。
非同期通信のデメリット
Ajax等でもよく知られている非同期通信。よいことばかりのように思えますが、合わせて付加情報も送信する必要があるため、データ量が増え、同期通信に比べて伝送効率は低下すると言われています。
関連記事(※当記事と関連性が高いと思われる記事)
Facebookページ
2012/02/23Facebookページのタイムライン
2012/03/06WordPressのFacebook用OGP出力テンプレート
2012/06/02FacebookのOGPの記事を更新
2012/06/02Facebookの写真サイズ
2012/05/03おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)