[JS]FacebookやTwitter、はてブなどのソーシャルボタンを非同期で読み込む方法

Javascript・jQuery

2013.03.16

Facebookの「いいね」やTwitterの「ツイート」、Google +1の「+1」などの各種ソーシャルボタンの読み込みを非同期にすることで、ページの表示速度を向上させる方法です。

Facebook、Twitter、Goolge +1の他にもGoogle Analytics、はてブなどを全部まとめて非同期にすることができます。

javascript のコードを設置

ページの作りにも依りますので、どちらがページ表示速度が速いか？は分かりませんが、</head>の前か</body>の前かに以下のコードを設置します。

<script type="text/javascript">
(function(w,d){
	w._gaq=[["_setAccount","UA-XXXXXXXX-X"],["_trackPageview"]];
	w.___gcfg={lang:"ja"};
	var s,e = d.getElementsByTagName("script")[0],
	a=function(u,f){if(!d.getElementById(f)){s=d.createElement("script");
	s.src=u;if(f){s.id=f;}e.parentNode.insertBefore(s,e);}};
	a(("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js","ga");
	a("https://apis.google.com/js/plusone.js");
	a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
	a("//platform.twitter.com/widgets.js","twitter-wjs");
	a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
})(this, document);
</script>

(function(w,d){

w._gaq=[["_setAccount","UA-XXXXXXXX-X"],["_trackPageview"]];

w.___gcfg={lang:"ja"};

var s,e = d.getElementsByTagName("script")[0],

a=function(u,f){if(!d.getElementById(f)){s=d.createElement("script");

s.src=u;if(f){s.id=f;}e.parentNode.insertBefore(s,e);}};

a(("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js","ga");

a("https://apis.google.com/js/plusone.js");

a("//b.st-hatena.com/js/bookmark_button_wo_al.js");

a("//platform.twitter.com/widgets.js","twitter-wjs");

a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");

})(this, document);

</script>

UA-XXXXXXXX-Xの箇所は、ご利用のGooogle Analyticsの環境に合わせて変更してください。

また、不要な項目は//　でコメントアウトするなど、適宜調整してください。

参考ページ
http://www.itti-c.com/web-staff/sns-button-sync.php