[Blogger]はてなブックマークボタンの設置手順

追記：2012/3/13　トラッキング問題終結？

はてなブックマークボタンから収集した行動情報の第三者提供をやめます - はてなの日記
ってことで次の段落消しました。

追記：2012/3/12　トラッキング問題への対応
遅ればせながら、当ブログのはてブボタンを行動情報取得しないオプトアウト版に差し替えました。

はてなブックマークボタンのトラッキング問題で高木浩光先生が決別ツイートをするに至った経緯まとめ - NAVER まとめ

しっかし、どうせオプトアウト版っての作るなら、従来のものは従来のまま（行動情報取得しない）にしといて、トラッキング機能付き版の方を「新たに追加しました」ってすべきだよな。ここにも資本原理主義者が…

本題

訳あって巣ごもり暮らしを送っている黄金週間、日本で人気の3大ソーシャルサービスのボタンを設置してみました。以下が完成品の画像です（何故か実物は記事本文に設置できなかったので。凡ミスだと思うけど面倒だから究明は放置）。

ちなみに実物は記事フッタ（投稿日時とかコメントとか）エリアにいます。

設置手順の解説などは、既に先人達により溢れかえっていますが、自分なりに歩んだ設置手順や補足などをここに記します。
まずは「はてなブックマーク」ボタンです。
それ以外のボタンの設置手順は以下参照。

１．HTMLタグの作成

まず以下ページにアクセス。

はてなブックマークボタン
※2012/3/12追記：上記は行動情報を取得しないオプトアウト版です。
従来のボタン作成ページのURLは以下（リンクはしません）。
http://b.hatena.ne.jp/guide/bbutton

ページの手順に従ってHTMLコードを作成するわけですが、「①ページ情報」には以下の値を入力しておくと、後の作業が多少楽になります。

URL：data:post.url
タイトル：data:post.title

「②タイプ」で『スタンダード』を選択した場合、以下のようなコードとなる筈。

<a
 href="http://b.hatena.ne.jp/entry/data:post.url"
 class="hatena-bookmark-button"
 data-hatena-bookmark-title="data:post.title"
 data-hatena-bookmark-layout="standard"
 title="このエントリーをはてなブックマークに追加">
<img
 src="http://b.st-hatena.com/images/entry-button/button-only.gif"
 alt="このエントリーをはてなブックマークに追加"
 width="20"
 height="20"
 style="border: none;" />
</a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

このままだと、ブクマ対象のURL・タイトルは固定値となってしまい、一つ一つの記事にボタン配置したところで、その記事をブクマするということができません。（というか上記入力値だとそもそもURLとして不正だけど）。なので、URL・タイトルに記事毎の値がセットされるように、タグを少し修正します。

２．「href」「data-hatena-bookmark-title」属性の左に「expr:」と記述

以下のように。

href="http://b.hatena.ne.jp/entry/data:post.url"
→expr:href="http://b.hatena.ne.jp/entry/data:post.url"
data-hatena-bookmark-title="data:post.title"
→expr:data-hatena-bookmark-title="data:post.title"

３．変数「data:post.url」「data:post.title」を「"」の外に出す

記事にアクセスした際、この「変数」の部分が記事毎のURL・タイトルに置き換わります。ただし、「"」で囲むとそのまま「data:post.url」「data:post.title」と出力されてしまうので、「'」で囲むようにします。また、「href」の「http://b.hatena.ne.jp/entry/」はこのまま出力する必要があるので、ここの部分は「"」で囲みます。
文章による説明だとややこしいので、百聞は一見にしかず↓

expr:href="http://b.hatena.ne.jp/entry/data:post.url"
→expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'
expr:data-hatena-bookmark-title="data:post.title"
→expr:data-hatena-bookmark-title='data:post.title'

※実は「expr:data-hatena-bookmark-title」の部分の修正は必要ありません。後述のテンプレートにタグ貼り付けて保存する際、属性値を囲っている「"」は「'」に変換されるので。

４．完成したタグをテンプレートに記述

ここまでの手順でタグは以下のようになっている筈です。

<a
 href='"http://b.hatena.ne.jp/entry/" + data:post.url'
 class="hatena-bookmark-button"
 data-hatena-bookmark-title='data:post.title';
 data-hatena-bookmark-layout="standard"
 title="このエントリーをはてなブックマークに追加">
<img
 src="http://b.st-hatena.com/images/entry-button/button-only.gif"
 alt="このエントリーをはてなブックマークに追加"
 width="20"
 height="20"
 style="border: none;" />
</a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

「デザイン」→「HTMLの編集」のページで「ウィジェットのテンプレートを展開」にチェックを入れ、テンプレートファイルを表示し、お好みの場所に貼り付けてください。
お薦めは記事本文の後ろとか、当ブログと同じく記事フッタ辺りですかね。

（例）記事本文の後ろ

「<data:post.body/>」ってのが記事本文に置き換わる部分です。

（例）記事フッタ

「<div class='post-footer'>」で囲まれた箇所が記事フッタです。

右揃えにしたけりゃ

<div>タグで囲むなどしてください。

僕らはみんな歪ている

2011年5月5日木曜日