トピックス

トピックス Facebookを非同期通信で読み込む

種別

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等でもよく知られている非同期通信。よいことばかりのように思えますが、合わせて付加情報も送信する必要があるため、データ量が増え、同期通信に比べて伝送効率は低下すると言われています。

List

関連記事(※当記事と関連性が高いと思われる記事)

Facebookページ

2012/02/23
Facebook Page
スコア:28 ※スコアの数値が大きいほど、関連性の高い記事です。 当サイト用のFacebookページを作成しました。まだ、ほとんど何もできていない状態ですが、とりあえず、当サイトで配信している記事とフィードをポストしてFacebook... 続きを読む...

Facebookページのタイムライン

2012/03/06
Facebookページのタイムライン
スコア:27 ※スコアの数値が大きいほど、関連性の高い記事です。 2012年3月より、Facebookページにもタイムラインが導入されました。3月30日まではプレビュー期間として、Facebookページを見ているユーザーには公開せずに... 続きを読む...

WordPressのFacebook用OGP出力テンプレート

2012/06/02
WordPressのFacebook用OGP出力テンプレート
スコア:27 ※スコアの数値が大きいほど、関連性の高い記事です。 2012.6.2現在でのFacebookの仕様で作成しています。※新たな仕様変更が発生することもありますので、その点ご了承ください。 以下の手順で説明していきます。※テ... 続きを読む...

FacebookのOGPの記事を更新

2012/06/02
FacebookのOGPの記事を更新
スコア:26 ※スコアの数値が大きいほど、関連性の高い記事です。 以前掲載していた「FacebookのOGP」の記事を一部更新しました。 Facebookの仕様変更もあり、内容が多少古くなっていたためです。 以下よりご覧いただけますの... 続きを読む...

Facebookの写真サイズ

2012/05/03
Facebookの写真サイズ
スコア:26 ※スコアの数値が大きいほど、関連性の高い記事です。 2012年4月26日からFacebookのプロフィール写真の表示サイズが変わりました。125×125px表示だったのが、160×160px表示に変わりましたよね(27日... 続きを読む...

おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)

ページの先頭へ