WordPressにオリジナルデザインのはてなブックマークボタンを設置する方法メモ

ボタンの表示例はこちら。

これをクリックすると、次のような、ブックマークをする画面が表示されます。従来のはてブボタンと同じですね。

このボタンは、次のコードで出力しています。次のコードを記事のテーマ（多くはsingle.php）の表示したい位置に追加すればOKです。

<?php
	$page_url=get_permalink();
	$page_title=trim(wp_title( '', false));
	$page_url_encoded=urlencode(mb_convert_encoding($page_url, "UTF-8"));
	$page_title_encoded=urlencode(mb_convert_encoding($page_title, "UTF-8"));
?>
<div class="entry-buttons">
	<a class="button-hatebu" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $page_url_encoded ?>&title=<?php echo $page_title_encoded ?>" target="_blank"><img src="（オリジナル画像のURLをここに書く）" alt="はてなブックマークする" width="240" height="70" /></a>
</div>

Tweetボタンのときよりコードは短めですが、こちらはURLエンコーディングしています。タイトルを取得するところでTrimを利用している理由は、ツイートボタンを設置したときと同じ理由です。

ホームページにtwitter・はてブのオリジナルボタンを設置する方法 at ホームページ作成のハルリのブログ

Tweetボタンの時と同様、今回もここを参考にしました。タイトルの取得方法がちょっと違います。当ブログではHeadSpaceプラグインを使ってページタイトルを変更しているため、HeadSpaceの変更が反映されているwp_titleのほうを使っています（ここに関しては事実誤認があるかもしれません^^;）

現在のWordPressのバージョンは3.3.1です。