はてなブックマークのユーザー数を表示 [WordPress]

エントリー毎に、はてなブックマークのユーザー数を表示するようにしました。

applejuice.jp は WordPress で構築されていますが、今回、ブックマークユーザー数画像の取得でハマったので、その辺について（備忘録として）書きます。

今回編集したスクリプトは

index.php
single.php
archive.php

の3つです。

エントリーのループ内でパーマリンクを取得し、

<img src=”http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>” />

のようにimg要素を作ってあげればブックマークユーザー数画像が表示されるはずですが、何故か1ピクセルの画像

<img src=”http://b.st-hatena.com/images/users/gif/normal/00000.gif” alt=”http://b.st-hatena.com/images/users/gif/normal/00000.gif” />

が表示されてしまいます。

例えば、エントリー iPhoneのバッテリーを長持ちさせる10の設定のブックマークユーザー数画像を表示するために

http://b.hatena.ne.jp/entry/image/http://applejuice.jp/iphone/iphone%e3%81%ae%e3%83%90%e3%83%83%e3%83%86%e3%83%aa%e3%83%bc%e3%82%92%e9%95%b7%e6%8c%81%e3%81%a1%e3%81%95%e3%81%9b%e3%82%8b10%e3%81%ae%e8%a8%ad%e5%ae%9a/

を参照しても代替画像が表示されてしまいます。

いろいろ検証した結果、どうやら

WordPressの関数「the_permalink()（またはget_permalink()）」で取得したパーマリンクは、URLエンコードされた部分の文字列がすべて小文字である
はてなブックマークのブックマークユーザー数画像取得APIに渡すURLがエンコードされている場合は、すべて大文字にする必要がある

ということがわかりました（ただし、いずれも環境に依存するものと思われます）。

そこで、取得したパーマリンクでURLエンコードされた部分の文字列を、正規表現を使ってすべて大文字に変換することにしました。

src=”http://b.hatena.ne.jp/entry/image/<?php echo preg_replace(’/(%[\da-f]{2})/e’, “strtoupper(’$1′);”, get_permalink()); ?>”

先程の例では、変換後のURLは

http://b.hatena.ne.jp/entry/image/http://applejuice.jp/iphone/iphone%E3%81%AE%E3%83%90%E3%83%83%E3%83%86%E3%83%AA%E3%83%BC%E3%82%92%E9%95%B7%E6%8C%81%E3%81%A1%E3%81%95%E3%81%9B%E3%82%8B10%E3%81%AE%E8%A8%AD%E5%AE%9A/

となります。参照すると、ブックマークユーザー数画像が表示されます。

なお、はてなブックマークへのリンクを作成する部分では、特に上記の対応は必要ありませんでした。

参考までに、実装例をメモしておきます。

<!– Hatena Bookmarks –>
<div style=”text-align: right;”>
<a href=”http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>” title=”<?php the_title(); ?>” target=”_blank”>
<img src=”http://b.hatena.ne.jp/entry/image/<?php echo preg_replace(’/(%[\da-f]{2})/e’, “strtoupper(’$1′);”, get_permalink()); ?>” alt=”<?php the_title(); ? >” />
</a>
</div>
<!– /Hatena Bookmarks –>