遅ればせながら、気分だけでもWeb 2.0気取りということで、このブログにもブックマークボタンを設置してみました。まぁご覧の通り、ブックマーカーの皆さんにクリップして貰えるような創造的なエントリは皆無なので、ちょっとした装飾の一環です。

国内の著名なソーシャルブックマークサービスの中から、

・はてなブックマーク
・livedoor クリップ
・Buzzurl

の3つをチョイスしました。「はてなブックマーク」だけで事足りるケースが大半だと思いますが、補助要員として「livedoor クリップ」「Buzzurl」も取り付ければなお完璧、必要充分な感じです。

ボタンはメインページとエントリー・アーカイブの各エントリーフッター部分に設置しました。通常表示されるのはブックマークへの追加ボタンで、エントリーがブックマークされた場合は、その被ブックマーク数が確認出来ます。

方法は以下のページを参照。「O.Z.K.」で実際に使用しているソースを例示しています。

はてなブックマーク

・あなたのブログに「このエントリーを含むはてなブックマーク」ボタンを表示させる
・自分のブログに被ブックマーク数を表示する

<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink valid_html="1"$>">
<img src="画像のURL" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" style="border: 0;margin: 0;padding: 0;vertical-align: middle;" /></a>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink valid_html="1"$>">
<img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink valid_html="1"$>" style="border: 0;margin: 0;padding: 0;vertical-align: middle;" /></a>

livedoor クリップ

・ブログに「clip!」ボタンを設定しよう！
・クリップ数を画像で取得する API

<a href="http://clip.livedoor.com/redirect?link=<$MTEntryPermalink valid_html="1"$>&title=<$MTBlogName encode_html="1"$>%20-%20<$MTEntryTitle encode_html="1"$>" class="ldclip-redirect" title="この記事をクリップ！">
<img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_12_b.gif" width="16" height="12" alt="この記事をクリップ！" style="border: 0;margin: 0;padding: 0;vertical-align: middle;" /></a>
<a href="http://clip.livedoor.com/page/<$MTEntryPermalink valid_html="1"$>">
<img src="http://image.clip.livedoor.com/counter/<$MTEntryPermalink valid_html="1"$>" style="border: 0;margin: 0;padding: 0;vertical-align: middle;" /></a>

Buzzurl

・ブックマークアイコンの取り付け方

<a href="http://buzzurl.jp/entry/<$MTEntryPermalink valid_html="1"$>" title="Buzzurlにブックマーク" target="_blank">
<img src="http://buzzurl.jp/static/image/api/icon/add_icon_mini_10.gif" alt="Buzzurlにブックマーク" style="border: 0;margin: 0;padding: 0;vertical-align: middle;" /></a>
<a href="http://buzzurl.jp/entry/<$MTEntryPermalink valid_html="1"$>" title="Buzzurlにブックマーク" target="_blank">
<img src="http://api.buzzurl.jp/api/counter/<$MTEntryPermalink valid_html="1"$>" alt="Buzzurlにブックマーク" style="border: 0;margin: 0;padding: 0;vertical-align: middle;" /></a>

CSSの指定で表示が崩れてしまう場合があるので、「O.Z.K.」では画像を表示する<img>タグに

style="border: 0;margin: 0;padding: 0;vertical-align: middle;"

を追加しました。