Blogger に twitter の 「ツイート」、facebook の 「いいね」、google の 「+1」、はてなブックマーク の 「B!」、Pocket の 「Pocket」 ボタン 等、 俗に言う ソーシャルボタン を まとめて 一気 に設置する方法をここでは載せます。 いろいろと方法はあるかと思いますが･･･ここでは、 Blogger の テンプレート を編集して実現する方法です。
([2015/03/15] 本記事ではそれぞれのSNS提供モジュールを利用しています。オリジナルデザインにしたい場合、"Blooger に オリジナルデザイン の ソーシャルボタン を設置する方法" をご参照ください。)
ソーシャルボタン 設置手順
-
メニュー から [テンプレート] を選択し、 [HTML の編集] を開きます。
-
id が shareButtons の
b:includableタグ の 兄弟 に、以下の タグ を コピペ します。挿入場所
ソースコード
<b:includable id='shareButtons2' var='post'> <!-- twitter --> <span class='goog-inline-block sharebutton_twitter'> <a class='twitter-share-button' data-lang='ja' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>ツイート</a> </span> <!-- facebook --> <span class='goog-inline-block sharebutton_facebook'> <div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='450' expr:data-href='data:post.url'/> </span> <!-- google +1 --> <span class='goog-inline-block sharebutton_plusone'> <div class='g-plusone' data-size='medium' expr:data-href='data:post.url' expr:data-title='data:post.title'/> </span> <!-- hatena blog --> <span class='goog-inline-block sharebutton_hatebu'> <a class='hatena-bookmark-button' data-hatena-bookmark-lang='ja' data-hatena-bookmark-layout='standard-balloon' expr:href='data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only@2x.png' style='border: none;' width='20'/></a> </span> <!-- pocket --> <span class='goog-inline-block sharebutton_pocket'> <a class='pocket-btn' data-lang='en' data-pocket-count='horizontal' data-pocket-label='pocket'/> </span> </b:includable> -
headタグ の 任意の位置 に、以下の タグ を コピペ します。挿入場所
ソースコード
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
-
bodyタグ の 末尾ギリギリ に、以下の タグ（コード） を コピペ します。
※ このソースコード は 元の ソースコード に対して少し修正を加えています。うまく動かない場合、コメント いただけると嬉しいです。挿入場所
ソースコード
<!-- twitter --> <script type='text/javascript'> $(document).ready(function () {!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');}); </script> <!-- facebook --> <div id='fb-root'/> <script type='text/javascript'> $(document).ready(function () { (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }); </script> <!-- google +1 --> <script type='text/javascript'> $(document).ready(function () { window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); }); </script> <!-- hatena bookmark --> <script type='text/javascript'> $(document).ready(function(){ // modify url. var hatenaurl = 'http://b.hatena.ne.jp/entry/'; var anc = document.body.getElementsByTagName('a'); for (var i = anc.length; i--;) { if ((anc[i].className || '').indexOf('hatena-bookmark-button') >= 0) { anc[i].href = hatenaurl + anc[i].href; } } // load api script !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://b.st-hatena.com/js/bookmark_button.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'hatebu-wjs'); }); </script> <!-- pocket --> <script type='text/javascript'> $(document).ready(function () { !function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js"); }); </script> -
ソーシャルボタン を 表示したい位置 に、以下の コード を コピペ します。
挿入場所
ソースコード
<b:include data='post' name='shareButtons2'/>
以上で作業は完了です。 実際に プレビュー または ブログページ を開いて確認してください。 おそらく、ちゃんと表示できているはずです。 （･･･この ブログ で使っている コード そのままなので、動く ハズ。。）
解説
ソーシャルボタン の 元サイト で書かれていることに対して少し手を加えた部分に関する説明です。
やりたかったことは「ブログの表示をできるだけ速くしたい」につきます。 ポイントは「スクリプトの遅延実行」です。 具体的には、次の2点を行っています。
- 実行するスクリプトを できるだけ HTML の後ろへ配置
$(document).ready()で ドキュメント描画 後にスクリプト処理
まぁ、微々たる効果かもしれませんが･･･ facebook がたまに遅いので、そんなときは効果がハッキリと出たりします。
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！