Blogger：ソーシャル(SNS)ボタンをつける(忍者おまとめボタンを利用)

各ソーシャル(SNS)ボタンについてまとめてわかりやすく解説してくれているサイトをみつけました。
しかし、それぞれのサービスにアクセスしてボタンを一つずつ作成するのは難しそうだったので、まとめて貼り付けてくれる「忍者おまとめボタン」を利用しました。

ものすごくいっぱいあるソーシャル(SNS)ボタン

【今日のボタン】『mixiチェックボタン・mixiイイネ!ボタン』『Twitterツイートするボタン』『Facebookいいね!ボタン』『LINEで送るボタン』『Googleプラス1ボタン』等を設置する方法。まとめ -フォロワー数を表示・ボタンの幅変更等- YABURE KABURE / やぶれかぶれ by Rising Suns Studios / ライジングサンズスタジオ

この記事を書いている時点で17種のボタンが紹介されています。











いくつ知っていました？

私は、mixi、Facebook、LINE、はてな、Evernote、Twitter、Googleしか知りませんでした。

mixiは会員登録しないとボタンを設定できないのであきらめて、その他のボタンを一つずつ設定しようとしましたが、結構手間なのでまとめて設定できるツールのお世話になることにしました。

忍者おまとめボタンで簡単に複数ボタンを設置

ツイートボタン、いいねボタンなどをまとめて簡単設置｜忍者おまとめボタン

まず忍者ツールズのIDを作成する必要があります。

ログインすると設置するブログの選択画面が出てきます。


Bloggerを選択。


いろいろ選べます。


ページの下部で並べ替えなどができます。

決まったら右の「コードを取得する」ボタンをクリック。

そこでさらに縦に並べ替えなどもできます。

実際に設置してみるとmixiは会員登録していないせいかカウントが表示されませんでしたので削除しました。

忍者ボタンはいつでも簡単に編集してコードを再取得できる上にどのページのボタンが押されたのかがわかる集計機能までついています。

忍者おまとめボタンを真ん中に配置する方法

div class="ninja_onebutton">
というふうに始まっていると思います。
これにCSSの指定を加えます。つまり、以下のようになります。
<div class="ninja_onebutton" style="width:200px;margin:0 auto;">
横幅の指定「200px」は、ボタンの合計横幅くらいにしてください。
助太刀忍者 [忍者おまとめボタン]｜おまとめボタンの設置について

widthを入れないといけなかったのですね。

キャプチャーツールで作ったボタンの幅を測定してみると約450pxでしたのでwidth:450px;としたらうまくいきました。

モバイルでみるとツールバーがでてくるようになった

忍者おまとめボタンを設置後iPod touchでブログをみてみると画面の左上にがずっとくっついてくることに気づきました。

これをクリックするとこんなツールバーが現れます。


これを表示させないためには忍者おまとめボタンのボタン管理画面でスマホ設定を無効にします。

デフォルトでは「有効(左寄せ）になっていました。

マウスカーソルを持ってくると変更ボタンが現れますのでそこで無効にすればよいです。

参考にしたサイト

【今日のボタン】『mixiチェックボタン・mixiイイネ!ボタン』『Twitterツイートするボタン』『Facebookいいね!ボタン』『LINEで送るボタン』『Googleプラス1ボタン』等を設置する方法。まとめ -フォロワー数を表示・ボタンの幅変更等- YABURE KABURE / やぶれかぶれ by Rising Suns Studios / ライジングサンズスタジオ
一見ごちゃごちゃして見えるページですが、各ボタンの変遷から表示例まで掲載されていてとても充実したページです。

ツイートボタン、いいねボタンなどをまとめて簡単設置｜忍者おまとめボタン
複数のソーシャルボタンを手軽に設置できる便利なツールです。

助太刀忍者 [忍者おまとめボタン]｜おまとめボタンの設置について
真ん中に配置する方法。

次の関連記事:Blogger:[忍者おまとめボタン]アクセス解析のシェア数が一致しない？