Facebool、Twitter、Google+、はてなブックマーク、Pocket、LINEなどのSNSボタンをページに設置する際、SNSそれぞれのJavascriptコードが必要ですが、複数あるのでページのソースがごちゃごちゃになります。
それを簡潔なjavascriptコードでコンパクトにする方法を見つけたのでメモ。
コードをまとめることによって重複コードがなくなり、ソースの文字数が減るのでページ表示の高速化になるかと思います。
まとめた場合のコード
コードはページのどこに書いてもいいのですが、</body>の直前に書くほうがページ表示の高速化につながります。
<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>だけは<body>直下が望ましいです。
<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>
参考ページ