2013年9月1日日曜日

[Blogger]TwitterやFacebook、はてブ等のソーシャルボタンを設置する

忍者ツールズでソーシャルボタンのコードを取得する

現在はSNS全盛ですから、FacebookのいいねボタンやGoogleの+1のボタンなどでブログを紹介されるとうれしいものです。

しかしBloggerが標準装備しているソーシャルボタンは以下のような感じ。



小さくて、クリック数もカウントしてくれないのでいまいちです。

これに代わる見栄えのするソーシャルボタンを忍者おまとめボタンを利用して設置してみます。

忍者ツールズ|ホームページ ブログ アクセス解析 カウンター メールフォーム

まずは忍者ツールズユーザアカウントを取得します。次にトップページから忍者おまとめボタンをクリック。その後設置するWEBサイトをクリックし



ボタンをカスタマイズします。今回は自分でカスタマイズを選択。自分で好みのボタンを作っていきます。Feedlyがあればよかったのですがまだできてないようです。こんな感じで選択し、最後にプレビュー&コードを取得するボタンをクリック。


こんな感じでコードを取得できます。



 忍者おまとめボタンは一度作ってしまえば、以下のような管理画面からボタンのクリック状況の解析や、新たなボタンの追加等をコードをいじらずにできます。優れものです!




コードをテンプレートに追加する

ここからは少し難しいので、丁寧に進めていきます。テンプレートのコードを編集していきますので、最初にバックアップをとっておいた方が良いでしょう。

テンプレートの画面右上のバックアップ/復元をクリックすることで.XMLファイルを任意のフォルダに保存できます。



次に先ほど取得したコードを使用しているテンプレートに追加します。同じくテンプレートの画面で「HTMLの編集」をクリック。




するとテンプレートのコードが現れますので、このコードの中で記事の本文を示すコード「data:post.body」を探します。方法はまず枠内をクリックし、Cntl+fで検索窓を出します。そこにdata:post.bodyを打ち込みリターンキーをたたくと検索されます。複数検索がヒットする場合は再度リターンキーをたたくと次の場所に移動します。


このブログで使用しているテンプレートではdata:post.bodyは3つあり、その2つめがPC用のページの記事本文になるようです。そこでこの下に忍者ツールズで取得したコードを挿入します。


テンプレートをプレビューし、ボタンが出現していることを確認し、テンプレートを保存します。結果下のような感じになります。



とても良い感じです。このようなコードの編集作業をする場合、失敗してテンプレートが保存できなかったり、プレビューができないかったりすることが結構ありますので、上に書いたように作業の始めにテンプレートのバックアップは必須です。またテンプレートの保存を頻繁に行い、失敗したら「変更を元に戻す」ボタンを使用して、なるべく手作業を避けるのが無難です。手作業で元に戻そうとするとどうしてもミスしがちです。







タイトル下(記事上)にソーシャルボタンを設置したい場合

上と同じ要領で可能です。今度は「div class='post-header-line-1'」を目安にします。上とおなじように検索すると、このブログのテンプレートでは2つヒットします。このうち2つ目がPCサイトのタイトル(の下?)を表しているようなので、この下に先ほどのコードを挿入します。



結果こんな感じになります。



この忍者おまとめボタンですが、欠点は表示が遅くなることです。便利なのでしょうがないですがあまり表示が遅いのも痛いので、このブログでは記事下だけにしておこうと思います。





他のソーシャルボタン設置サービス

他にはShareThisを利用する方法があります。

Homepage | ShareThis.com

こちらは上で紹介した方法のようにコードを編集する必要がないので簡単に設置できます。ただし、記事下にしか設置できないようです。



0 件のコメント:

コメントを投稿