複数のソーシャルボタンのjavascriptをまとめてコードをスッキリさせ更に高速化を図る

2014年06月30日（Mon）

高速化対策

ソーシャルボタンをコツコツ増やしていたら、気が付くと「javascript」のコードがゴチャゴチャになっていました。
「これ以上、増えると更に悪化するなぁ」と思い「javascript」のコードをまとめるには、何が最適なのか調べてみたら、まさに求めている方法を発見しました。

複数のソーシャルボタンをを１つのjavascriptにまとめる方法

下記のコードは、ソーシャルボタンの「Google+」、「はてなブックマーク」、「Twitter」、「Facebook」、「Pocket」に加えて「GoogleAnalytics」もまとめたスクリプトです。しかも、非同期化されているのでページ表示速度の向上も見込めるとの事です。「UA-xxxxxxx-x」の箇所に「GoogleAnalytics」のトラッキングIDを入力します。

「GoogleAnalytics」が有りバージョン

<script type="text/javascript">
(function (w, d) {
	w._gaq = [["_setAccount", "UA-xxxxxxx-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;
			//GoogleAnalyticsも非同期を宣言
			s.async = 1;
			if (i) {s.id = i;}
			e.parentNode.insertBefore(s, e);
		}
	};
 	//GoogleAnalytics
	a(("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js","ga");
	//GooglePlus
	a("https://apis.google.com/js/platform.js");
	//Hatena
	a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
	//Twitter
	a("//platform.twitter.com/widgets.js","twitter-wjs");
	//Facebook
	a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
	//Pocket
	a("https://widgets.getpocket.com/v1/j/btn.js");
})(this,document);
</script>

外部スクリプトファイルにした方がスッキリ

上記のコードを<head>内に設置しても良いのですが、折角まとめてあるので、外部スクリプトファイルにした方がよりスッキリします。

外部スクリプトファイルの指定

<!-- WordPressのテーマ内に保存した場合 -->
<script src="<?php bloginfo('template_directory'); ?>/スクリプトファイル名.js" charset="UTF-8"></script>

ソーシャルボタンの設置

下記のコードは、ボックス型のソーシャルボタンをWordPressで使用した例です。以前は、前後にあったスクリプトが無いのでスッキリしてます。上から、「Pocket」、「Twitter」、「Facebook」、「Google+」、「はてなブックマーク」の順です。（順番に意味はありません）

ソーシャルボタンのコード

<ul>
	<li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink(); ?>"></a></li>
	<li><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count='vertical'>Tweet</a></li>
	<li><div class="fb-like" expr:data-href="data:blog.url" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"/></div></li>
	<li><div class="g-plusone" data-size="tall" data-href="<?php the_permalink(); ?>" ></div></li>
	<li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
</ul>

ソーシャルボタンの表示例：

非同期処理とは…

非同期処理とは、同期処理と違って読み込む順番を待たずに複数の処理を並行して行う事の様です。
ソーシャルボタンが複数ある場合に、１つ目の処理が遅くても待たずに２つ目以降のが表示が可能になります。

GoogleAnalyticsの無いバージョン

「GoogleAnalytics」を他のプラグインや直接設置しているという場合は、試していないのですが「GoogleAnalytics」の無いバージョンでソーシャルボタンをまとめたスクリプトも紹介されていました。

「GoogleAnalytics」が無しバージョン

<script type="text/javascript">
(function(w,d){
        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("//b.st-hatena.com/js/bookmark_button.js");
        a("//platform.twitter.com/widgets.js","twitter-wjs");
        a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
        a("https://widgets.getpocket.com/v1/j/btn.js?v=1");
        a("https://apis.google.com/js/plusone.js");
})(this, document);
</script>

【参考Webサイト】

コメント（0件）

複数のソーシャルボタンのjavascriptをまとめてコードをスッキリさせ更に高速化を図るに対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。お気軽にコメントしてください。

WEB帳
複数のソーシャルボタンのjavascriptをまとめてコードをスッキリさせ更に高速化を図る