• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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>

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

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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください