WPではてなブックマーク・livedoor clip・delicious・yahoo bookmark・twitterボタンと被ブックマーク数を表示する方法

私はいい記事や覚えておきたい記事を見かけると、ソーシャルブックマークサービスである「はてなブックマーク」、「Livedoor Clip」にブックマークをしています。と同時に記事によっては、twitterへのポストも同時にしたりもします。

いい記事に出会うと、既に多くのブックマークをされている記事などであれば、それぞれのブックマークコメントなども見るのが面白いのでいつも見るようにしています。

記事に出会った時、その記事が先に誰かにブックマークされていたりすると「お！」と興味をひかれることが多いので、自分のブログ記事にも、被ブックマーク数がわかるよう、今まで、はてなブックマークとlivedoor clipの被ブックマーク数とそれぞれのブックマークコメントが見られるURLへのリンク、そしてaddclipを使用していました。

ただ、addclipはやはりちょっとわかりにくいというか使いにくいように感じていたので、今回はaddclipをやめて、英語圏では圧倒的な人気を誇る「delicious」と、ちょっと使ってる人が限られているけれども一部では人気な「yahooボタン」、 そして、最近はよくブログでも見かけるようになった「twitterでつぶやく」ボタンをつけてみたのでその方法を書いておきます。

トップページと、各個別記事の最後に、このように表示しています。

はてなブックマーク数とlivedoor clipでの方法は色んなサイトに書かれていたのですが、deliciousがwordpress用には書かれていなくてちょっと困りました。

あと以外と被ブックマーク数を画像で表示する方法は書かれているのですが、その数字からコメントページに飛ぶことが出来なかったりしたので、sorariumの場合は、ボタンをクリックとブックマーク追加画面へ、数字画像をクリックするとコメント閲覧ページへ飛ぶように設定しています。

以下のコードを、index.phpとsingle.phpの任意の場所に追加します。

<!-- はてブ用 -->
<a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>" target="_blank"></a> <a href="http://b.hatena.ne.jp/entry/<?php echo get_permalink(); ?>" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink() ?>" style="border: none;" /></a>
<!-- Livedoor Clip -->
<a href="http://clip.livedoor.com/clip/add?link=<?php the_permalink() ?>&title=<?php the_title(); ?>&jump=ref" target="_blank"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" alt="このエントリをlivedoorクリップに登録" width="16" height="16"  style="border: none;" /></a> <a href="http://clip.livedoor.com/page/<?php echo get_permalink(); ?>" target="_blank"><img src="http://image.clip.livedoor.com/counter/small/<?php the_permalink() ?>" style="border: none;" /></a>
<!-- delicious-->
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('<?php the_permalink() ?>')+'&title='+encodeURIComponent('<?php the_title() ?>'),'delicious', 'toolbar=no,width=550,height=550'); return false;"></a> <a href="http://delicious.com/url?url=<?php echo get_permalink(); ?>" target="_blank"><img src="http://labs.creazy.net/sbm/delicious/textimg/<?php the_permalink() ?>" style="border: none;" /></a>
<!-- yahoo -->
<?php echo '<a href="http://bookmarks.yahoo.co.jp/action/bookmark?t='.urlencode(the_title('','',false)).'&u='.urlencode(get_permalink()).'" target="_blank"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" style="border:none;"></a>';?> <a href="http://bookmarks.yahoo.co.jp/url?url=<?php the_permalink();?>" target="_blank"><img src="http://num.bookmarks.yahoo.co.jp/image/small/<?php the_permalink();?>" style="border: none;" /></a>
<!-- twitter -->
<a href="http://twitter.com/home/?status=読んだ！+「<?php the_title(); ?>」+<?php the_permalink() ?>" target="_blank" title="Twitterに投稿する"><img src="twitterの画像を置いた場所" style="border:0" alt="twitterに投稿する" /></a> 
<!-- end -->

yahoo!ブックマークは、yahooのサイトにwordpress用のつけ方が書かれており、それを少し変更して使用しました。

twitterに投稿ボタンは、以下のmBlogさんのをそのまま使わせていただきました。非常にありがたかったです。ただ、twitterボタンだけは、画像パスは自分のサーバーに置いた場所へのパスを記述してください。

いかがでしょう？

例えばMinibufferを使って編集画面に移らずはてなブックマークに追加する方法（追記あり） – sorariumであれば、こんな感じで表示されます。

かなりわかりやすくなったかと。

こういうボタンをつけることで、ブックマークレットやアドオンなどを入れてない場合でも簡単につぶやいたりブックマークしてもらえたり、興味を持ってもらえたらいいな。

※ちなみにこのコードソースを記述するのにはwordpressのプラグインWordPress Plugins/JSeries ? Syntax Highlighter for WordPress (ソース整形表示)を使いましたが非常にいい感じです。　ただ、このソースコードを表示したエントリについては、twitter toolsがうまく動かないため、手動でtwitterへポストする必要がありそうです。

【参考にした記事】
Deliciousの被ブックマーク数を表示する方法 : WebとPCのメモ帳
WordPressに人数表示ブログパーツを設置する – Yahoo!ブックマーク　スタッフブログ
[SITE INFO] WordPress用の“Twitterに投稿”ボタンを設置しました – mBlog