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>
参考ページ