Blogger に「はてなブックマーク,はてなスター」ボタンを設置する

Google 様が運営しているのに、日本ではあまり人気がない Blogger 。ヘルプは英語のままだし、日本のユーザが少なくて、検索してもノウハウも他のブログより圧倒的に少ないという Blogger 。Blogger は、Web サービスの公式 Blog なんかでよく見かけますよね。私は、なんで使ってるのかわからないけど、とりあえず自分の持っているドメインで割りに簡単に使えたので、とりあえずそんなに不満なく使っていたりします。

さて、Blogger と言えども、はてなブックマークや はてなスターを利用したい、あるいはして欲しいなんていう僕は、はてなブックマークとスターを導入してみたりしてみたんですが、どうもうまく動いていない。スターをもらっても、はてなに送信されていないみたいで、自分のはてなスターの管理画面のブログの項目で「以下のコードをブログテンプレートのhead内に追記してください。うまく表示されない場合ははてなスターをブログに設置するにはをご参照ください。このメッセージは最初の☆が付けられた際に消えます。」と表示されているのです。もちろん、スターついたよメールも来ない。こりゃ直さないとだめだというわけで、今日は「Blogger で、はてなブックマークとはてなスターを使う」場合のメモを残して置きます。ちなみにはてなの公式ヘルプは古いので、参考にはなれど、このままやっても動きません。

テンプレートを変更する際には、まず Blogger で標準で用意されているツールを使って、テンプレートをバックアップしてください。その後レイアウトからHTMLの編集の画面に行きます。さらに「ウィジットのテンプレートを展開」にチェックするのを忘れないでください。

はてな Bookmark

はてなBookmarkをしてもらうボタンとブックマークしてもらったユーザの数を表示するためには、以下のようにテンプレートを変更します。

<div class='post-header-line-1'/>を探します。これは、<div class='post-header-line-1'/>のように標準では閉じてますが閉じないで以下のようにしてみます。

<div class='post-header-line-1'> <span class='hatena-entry hatena-append'> <a expr:href='"http://b.hatena.ne.jp/append?" + data:post.url'> <img align='absmiddle' alt='このエントリーをブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをブックマークに追加' width='16'/></a> <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'> <img align='absmiddle' alt='このエントリーを含むはてなブックマーク' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' style='border: none;' title='このエントリーを含むはてなブックマーク'/></a> </span> </div>

はてなスター

<h3 class='post-title entry-title'>を探して<h3 class='post-title'>に置換します。次に、head 要素内に、以下の内容を記述します。Hatena.Star.Tokenの値は自分のものを使用すること。

<script src='http://s.hatena.ne.jp/js/HatenaStar.js' type='text/javascript'/>
<script type='text/javascript'>
Hatena.Star.Token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
Hatena.Star.EntryLoader.headerTagAndClassName = ['h3','post-title'];
Hatena.Star.SiteConfig = {
entryNodes: {
'div.post': {
uri: 'h3 a',
title: 'h3',
container: 'h3'
}
}
};
</script>

これで行けるはずです。はまったのが、h3要素内にa要素が複数あるとうまくいかないので、h3要素の中には自分で改造したものを挿入するのは御法度です。うまく行けば、当 Blog のように表示されることになります。