最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた

ひょんなことから normalize.css のページを覗いていたら、Google Analytics、Google +1、Twitter、Facebook の各 JavaScript をまとめて非同期で読み込んでいるスクリプトが使われているのを見つけました。

CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議」 でも書きましたが、スクリプトの非同期読み込みは、Google Analytics のコードスニペット で一応の決着を見た感じで (実は、標準化を巡って第2ラウンドが始まってはいますが…)、今や Google+1 はもちろん、Facebook も同様の手法を推奨しています。

調べてみたら、「それなら Twitter のスクリプトだって同じように読めばいいじゃないか」 という感じでどんどん まとめスクリプト の改良が進んできたようです。

我が日本としてはこれに 「はてな」 を加えるしかない!、ということで作ってみましたので、公開したいと思います。

背景と経緯

事の発端は、冒頭の normalize.css の作者であり HTML5 Boilerplate の開発者でもある Nicolas Gallagher が2011年6月 Gist に投稿した 次のスクリプト です。

(function (d, e) {
	var u = [
	('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', // Google Analytics
	'https://apis.google.com/js/plusone.js', // Google +1 Button
	'//connect.facebook.net/en_US/all.js' // Facebook JS SDK
	],
		f = d.createDocumentFragment(),
		s = d.createElement(e),
		t = d.getElementsByTagName(e)[0],
		i = u.length,
		z;

	while (i--) {
		z = s.cloneNode(true);
		z.src = u[i];
		z.async = 1;
		f.appendChild(z);
	}

	t.parentNode.insertBefore(f, t);
}(document, 'script'));

その日のうちに、同じく HTML5 Boilerplate 開発メンバーでもある Mathias Bynens が乱入し、コードが洗練されていきました。彼は、2010年4月のブログ記事 「Optimizing the asynchronous Google Analytics snippet」 で、Google Analytics のコードスニペットに関して、これでもかというぐらいに無駄なコードをそぎ落とす記事を書いていますので、この手のスクリプトにかけては造詣が深いのです。

ただこの時点ではまだ、Google Analytics、Google +1、Facebook の3つだけが非同期読み込みの対象でした。

一方、Object-Oriented JavaScript の著者である Stoyan Stefanov は、2011年9月にブログ記事 「Social button BFFs」 で類似のスクリプトを発表しました。おもしろいことに彼は、Google Analytics は対象とせず、Facebook、Google +1、Twitter を対象としています。

そこに先の Mathias が乱入し、再び Gallagher にフィードバックされ、2011年10月に出来上がったのが次のスクリプトです。Google Analytics はもちろん、Facebook、Google +1、Twitter の4つが統合されました。

/*
 * Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
 * Better handling of scripts without supplied ids.
 *
 * N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
 */ (function (doc, script) {
	var js,
	fjs = doc.getElementsByTagName(script)[0],
		add = function (url, id) {
			if (doc.getElementById(id)) {
				return;
			}
			js = doc.createElement(script);
			js.src = url;
			id && (js.id = id);
			fjs.parentNode.insertBefore(js, fjs);
		};

	// Google Analytics
	add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
	// Google+ button
	add('https://apis.google.com/js/plusone.js');
	// Facebook SDK
	add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
	// Twitter SDK
	add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));

上記以外にも、似たような時期に類似の話題が出ていたのを拾ってみました。興味があれば読んでみて下さい (2012年3月25日 追記:約1ヶ月前にさらに効率的なコードに更新されていましたので、追従しました)。

「はてな」を加えたスクリプト

先のスクリプトを元に、Google +1 への日本語設定と、はてなブックマークボタンを加え、またコード自体も Clusure Compiler を通して最適化した後、jsfiddleJSLint が通る程度には整形してみました。

<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, i) {
			if (!d.getElementById(i)) {
				s = d.createElement("script");
				s.src = u;
				if (i) {s.id = i;}
				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 の部分は、トラッキングコードの ID を設定します。他の箇所にトラッキングコードを仕掛けている場合には、この行は削除し従来の設定を使用します。また、スクリプト以外の構成要素は、次のサンプルを参照してください。

まとめて非同期読み込み(Social+Analytics) – jsdo.it – share JavaScript, HTML5 and CSS

各ソーシャルサービスとも複数の実装方法を提供しているため、従来はページの中が乱雑になりがちでしたが、これで少しはすっきりとするのではないでしょうか?

また、公式サイトの設置方法通りでは得られない、このスクリプトのメリットは次の2つとなります。

  • Twitter が非同期読み込みになる 公式ページのサンプルは、既に非同期化されています
  • はてなでは HTML5 対応のブラウザのみ非同期読み込みになっているが、IE8 以下でも速度向上が期待できる

おまけ:ソーシャルボタンの公式サイト設置方法まとめ

今回の記事を作成するに当たり、参考とした公式サイトの解説ページをまとめておきます。各ボタンとも、幾つかのオプションがありますので、参考にしてください。

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた」への17件のフィードバック

  1. 髭爺

    こんにちは。自分の環境でだけかもしれませんが、Firefox22で見ると、「各ソーシャルサービスとも複数の実装方法を提供しているため、従来はページの中が乱雑になりがちでしたが、これで少しはすっきりとするのではないでしょうか? 」のところの文字が重なって見えます。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

海外からの投稿は受け付けていません