WordPress Popular PostsにjQueryではてブ数を表示する

hatebu人気記事をウィジェットエリアに表示するプラグイン「Wordpress Popular Posts」に「はてなブックマーク」のブクマ数を表示させたいと思います。画像なので色やフォント変更はできませんが手軽に導入できます。

ブクマ数ははてなのAPIで取得します。Popular Postsはかなり自由にカスタマイズが出来ますが、記事アドレスを挿入できない為、カスタマイズでは対応できません。

よってプラグイン本体の改造もしくはJavaSciptで追加する事になるのですが、プラグインの改造で対応するとバージョンアップでリセットされてしまうため今回はjQueryで対応します。

スポンサーリンク

 

はてなブックマークを取得するAPI

はてなブックマーク数は画像としてAPIを呼び出すことでIMGタグ一つで表示できます。 仮にブックマーク数を調べたいURLが http://www.yahoo.co.jp/ なら、

<img src="http://b.hatena.ne.jp/entry/image/http://www.yahoo.co.jp/" border="0" style="vertical-align: middle;">

これだけでブックマーク数を取得できます。

あとは「はてな」へのリンクを追加して使用します。

<a href="http://b.hatena.ne.jp/entry/http://www.yahoo.co.jp/" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/http://www.yahoo.co.jp/" border="0" style="vertical-align: middle;"></a>

 

jQueryでAPIを挿入する

Popular Postsで出力されたテキストリンクの最後に、上のリンクとIMGをjQueryで挿入します。

<script type="text/javascript">
jQuery(function() {
    jQuery('a.wpp-post-title').each(function(){
        var href = jQuery(this).attr('href');
        jQuery(this).append(' <a href="http://b.hatena.ne.jp/entry/'+href+'" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/'+href+'" border="0" style="vertical-align: middle;"></a>');
    });
});
</script>

ワードプレスに標準で読み込まれるjQueryを使う場合は、$は使えないのでjQueryと記述します。

コードを挿入する場所に決まりはありませんが、ページ速度に影響が少ないようにfooter.phpのbodyを閉じる直前に記述するのが良いでしょう。

13/03/27追記
Popular Postsのバージョンによっては動作しない可能性があったのを修正しました。メシオプレスブログさんにトラックバックにて知らせて頂きました。ありがとうございます!

 

 

スポンサーリンク