Facebook「いいね！」ボタンのasync設定【2012年の記録・説明訂正】
訂正・保存公開（2026年11月5日）：2012年7月のFacebookソーシャルプラグインに関する記録です。当初の「asyncを1行追加すれば高速化する」という説明は不正確だったため、本文と題名を訂正しました。旧SDKのコードは当時の記録であり、現在の設置手順として使わないでください。速度改善を確認した比較測定はありません。
訂正の根拠：HTML Standardのscript処理モデル（force asyncの初期値・async属性の処理、2026年11月5日確認）。
Facebook からブログ記事へのアクセスが増え続けています。当サイトでは、検索エンジンに次いで重要な読者流入元になっています。たぶん、各記事に設置してある「いいね！」ボタンや、Facebook Page がとても有効に働いてくれているんだと思います。
でも、Facebook のソーシャルプラグインって読み込みが遅いんだよな、と困っているブロガーさんも多いのでは。
当時はasync設定の追加で高速化できると紹介しましたが、次のコードはスクリプトを動的に追加しており、asyncを明示する前から通常は非同期で読み込まれます。追加した1行の効果は、この例からは示せません。
【方法】
Facebook ソーシャルプラグインのページからコードを取得して設置した場合、たいていは下記の Javascript 読み込みコードをヘッダーなどに設置してあると思います。
<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.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=XXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script’, 'facebook-jssdk’));</script>
そして、「いいね！」ボタンを設置したい場所に下記のコードを書き込んであると思います。
<div class="fb-like" data-send="false" data-layout="button_count" data-width="112″ data-show-faces="false"></div>
この例ではcreateElementで作ったscript要素をinsertBeforeで追加しています。HTML Standardでは、このようなscript要素は初期状態で非同期に扱われます。このコードが同期読み込みになるという当初の説明を訂正します。
次は、当時追記した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/all.js#xfbml=1&appId=XXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script’, 'facebook-jssdk’));</script>
この1行だけで「いいね！」ボタンが高速化するという当初の断定を取り消します。
asyncは非同期読み込み（asynchronous）の指定です。通信中にHTMLの解析を待たせないことと、スクリプトの実行や画面全体が軽くなることは別です。実行処理の負荷や読み込み先の応答時間も影響するため、実際のページでの測定が必要です。
以下は、当時同じSDKでコメント機能を設置した例です。Facebook関連の読み込みがすべて高速化するという説明も訂正します。
例えば、Facebook のコメント機能を使いたい場合は、下記のコードをコメント欄を表示させたい場所に書き込みます（Wordpressの場合）。
<fb:comments href="<?php the_permalink() ?>" numposts="10″ ></fb:comments>
当時はこのコードをコメント欄へ配置していました。現在のSDKでの動作や画面幅への対応は確認していません。
旧コードの保存記録として掲載しています。現行サイトへの導入時は、提供元の現行仕様と実際の読み込み時間を確認してください。