忍者ツールズでソーシャルボタンのコードを取得する
現在はSNS全盛ですから、FacebookのいいねボタンやGoogleの＋1のボタンなどでブログを紹介されるとうれしいものです。
しかしBloggerが標準装備しているソーシャルボタンは以下のような感じ。
小さくて、クリック数もカウントしてくれないのでいまいちです。
これに代わる見栄えのするソーシャルボタンを忍者おまとめボタンを利用して設置してみます。
忍者ツールズ｜ホームページ ブログ アクセス解析 カウンター メールフォーム
まずは忍者ツールズユーザアカウントを取得します。次にトップページから忍者おまとめボタンをクリック。その後設置するWEBサイトをクリックし
ボタンをカスタマイズします。今回は自分でカスタマイズを選択。自分で好みのボタンを作っていきます。Feedlyがあればよかったのですがまだできてないようです。こんな感じで選択し、最後にプレビュー＆コードを取得するボタンをクリック。
こんな感じでコードを取得できます。
忍者おまとめボタンは一度作ってしまえば、以下のような管理画面からボタンのクリック状況の解析や、新たなボタンの追加等をコードをいじらずにできます。優れものです！
コードをテンプレートに追加する
ここからは少し難しいので、丁寧に進めていきます。テンプレートのコードを編集していきますので、最初にバックアップをとっておいた方が良いでしょう。
テンプレートの画面右上のバックアップ／復元をクリックすることで.XMLファイルを任意のフォルダに保存できます。
次に先ほど取得したコードを使用しているテンプレートに追加します。同じくテンプレートの画面で「HTMLの編集」をクリック。
するとテンプレートのコードが現れますので、このコードの中で記事の本文を示すコード「
data:post.body」を探します。方法はまず枠内をクリックし、Cntl+fで検索窓を出します。そこにdata:post.bodyを打ち込みリターンキーをたたくと検索されます。複数検索がヒットする場合は再度リターンキーをたたくと次の場所に移動します。
このブログで使用しているテンプレートではdata:post.bodyは３つあり、その２つめがPC用のページの記事本文になるようです。そこでこの下に忍者ツールズで取得したコードを挿入します。
テンプレートをプレビューし、ボタンが出現していることを確認し、テンプレートを保存します。結果下のような感じになります。
とても良い感じです。このようなコードの編集作業をする場合、失敗してテンプレートが保存できなかったり、プレビューができないかったりすることが結構ありますので、上に書いたように作業の始めにテンプレートのバックアップは必須です。またテンプレートの保存を頻繁に行い、失敗したら「変更を元に戻す」ボタンを使用して、なるべく手作業を避けるのが無難です。手作業で元に戻そうとするとどうしてもミスしがちです。
タイトル下（記事上）にソーシャルボタンを設置したい場合
上と同じ要領で可能です。今度は「div class='post-header-line-1'」を目安にします。上とおなじように検索すると、このブログのテンプレートでは２つヒットします。このうち2つ目がPCサイトのタイトル（の下？）を表しているようなので、この下に先ほどのコードを挿入します。
結果こんな感じになります。
この忍者おまとめボタンですが、欠点は表示が遅くなることです。便利なのでしょうがないですがあまり表示が遅いのも痛いので、このブログでは記事下だけにしておこうと思います。
他のソーシャルボタン設置サービス
他にはShareThisを利用する方法があります。
Homepage | ShareThis.com
こちらは上で紹介した方法のようにコードを編集する必要がないので簡単に設置できます。ただし、記事下にしか設置できないようです。
http://mnt02.blogspot.com/2013/09/bloggertwitterfacebook.html[Blogger]TwitterやFacebook、はてブ等のソーシャルボタンを設置する
