複数のSNSボタンのJavascriptをスッキリまとめて高速化

Mon, 12 Mar 2018 21:03:38 +0900

Facebool、Twitter、Google+、はてなブックマーク、Pocket、LINEなどのSNSボタンをページに設置する際、SNSそれぞれのJavascriptコードが必要ですが、複数あるのでページのソースがごちゃごちゃになります。

それを簡潔なjavascriptコードでコンパクトにする方法を見つけたのでメモ。

コードをまとめることによって重複コードがなくなり、ソースの文字数が減るのでページ表示の高速化になるかと思います。

まとめた場合のコード

コードはページのどこに書いてもいいのですが、の直前に書くほうがページ表示の高速化につながります。

<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;s.async=true;if(f){s.id=f;}e.parentNode.insertBefore(s,e);}};
		a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
		a("//platform.twitter.com/widgets.js","twitter-wjs");
		a("https://apis.google.com/js/plusone.js");
		a("//b.st-hatena.com/js/bookmark_button.js");
		a("https://widgets.getpocket.com/v1/j/btn.js?v=1");
		a("//media.line.me/js/line-button.js?v=20140411");
	})(this, document);
</script>

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;
				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");
	//Facebook
	a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
	//Twitter
	a("//platform.twitter.com/widgets.js","twitter-wjs");
	//GooglePlus
	a("https://apis.google.com/js/platform.js");
	//Hatena
	a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
	//Pocket
	a("https://widgets.getpocket.com/v1/j/btn.js");
	//LINE
	a("//media.line.me/js/line-button.js?v=20140411");})(this,document);</script>

SNSボタンの表示部分

ソーシャルボタンを表示したい部分に書きます。だけは直下が望ましいです。

<div id="fb-root"></div>
<ul>
	<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><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count='vertical'>Tweet</a></li>
   <li><div class="g-plusone" data-size="tall" data-href="ページのURL" ></div></li>   <li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-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>
	<li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="ページのURL"></a></li>
	<li><span><div class="line-it-button" style="display: none;" data-type="share-a" data-lang="ja"></div>
		<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer"></script></span></li>
</ul>

参考ページ

https://log-file.net/wordpress/speedup-1190 https://log-file.net/wordpress/speedup-1190

http://requlog.com/self-branding/wordpress/facebook-fast-display/ http://requlog.com/self-branding/wordpress/facebook-fast-display/

http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/ http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/

ソース on qwerty.work

複数のSNSボタンのJavascriptをスッキリまとめて高速化

まとめた場合のコード

GoogleAnalyticsも含める場合

SNSボタンの表示部分

参考ページ