[blogger]忍者おまとめボタン「も」利用して、記事の下にソーシャルボタンを付ける！

記事フッターにあるソーシャルボタンを見直しました。
今までは、

zenbackを使って、ソーシャルボタンも表示させていたのですが、zenbackは結構長さが出るので、記事自体の下が少し長い印象になるのと、Adblockなどで、広告非表示をするとzenbackは表示されない事が多いので、記事下のソーシャルボタンがなくなってしまうのが理由です。

実際には、blogger付属の「共有ボタン」でgoogle+1あたりは付けることが出来ますが、これは使わないだろうって機能（メール添付とか）があって、なんとなくあれな気分なので、この際並べてしまうことにしました。

コード！

あくまで自分流ってことで少し変則的です。

HTML

<div class='post-footer-line post-footer-line-1'>

これが、投稿記事フッターの場所なので、HTMLの編集から探して、このコードの下に、

<div class='social-footer'>
  <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='ツイッターのIDが入る部分' expr:data-url='data:post.url' href='http://twitter.com/share'/>
  <div class='plusonefooter'><div class='g-plusone' data-size='medium' expr:href='data:post.url'/></div>
  <div class='like-footer'><div class='fb-like' data-layout='button_count' data-send='true' data-show-faces='false' data-width='130' expr:href='data:post.url'/></div>
  <div class='ninja_button'> 
  <script src='http://omt.shinobi.jp/b/忍者側の設定によって変わる部分' type='text/javascript'/>
  <span class='ninja_onebutton_hidden' style='display:none;'><data:post.url/></span><span class='ninja_onebutton_hidden' style='display:none;'><data:post.title/></span></div>
</div>

上から、

「ツイートボタン」
「google+1ボタン」
「facebookいいねボタン」
「忍者おまとめボタン」

になっています。
これは表示用コードだけで、スクリプトがありませんので、これだけだと表示されません。忍者おまとめボタンだけは表示されますけどね。
また、コードの初めに「＜div class='social-footer'＞」終わりに[＜/div＞」を入れて、1つの箱にまとめています。

私は、

[blogger]ソーシャルボタンのスクリプト非同期コードを使って、整理する。 - sunabox

サイトでは、海外で作られた「twitter」「facebook」「google+1」「Analitycs」の非同期スクリプトに、「はてな」を加えた ...

にて、４つのスクリプト呼び出しの非同期コードをすでに「</head>」直上に挿入しています。
おまとめは便利だと思うんですが、これを使わない場合は、

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>

<script type="text/javascript">
  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>

<div id="fb-root"></div>
<script>(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>

このスクリプト用のを「</head>直上か</body>直上」に入れて下さい。

「google+1」は日本語。
「いいねボタン」も日本語、そして、HTML5版を使う場合です。

忍者おまとめボタン

フッターに忍者おまとめボタンを使う理由は、

フッターには、livedoorクリップやYahooブックマークなども欲しかったんですが、一つ一つ置くと煩雑になる。おまとめボタンはすでにトップページで使っていてアカウントもあるので、楽。そして、あとから変更も楽。

全てをおまとめボタンにしなかった理由は

並びが綺麗にならない！

これに尽きますｗ
どうしても、横に余白が出来る部分ができたんですよね・・。

整える
こうして並べたボタンをCSSで調整します。

カスタムCSS

.twitter-share-button {float:left;width: 83px !important;}
.plusonefooter{width:65px; float:left;}
.like-footer{float:left;}
.ninja_button{float:right;}
.social-footer{width:auto;height:20px;margin:20px 12px 12px 12px;padding:8px;background-color:#fff1cf;border:dashed 1px #aaa;}

上から、