何かはまちちゃんのところとか、はてブのブックマーク数をBlogに表示させるのが流行っているみたいなので、便乗してみます。
# 前にもらったし、トラックバック返しておきますね。
というか、以前にはてブのブックマーク数を任意のページにインライン表示してみるで一度紹介していますが、あの方法ではBlogの記事ページのようにとある1ページのブックマーク数を一つだけしか表示できませんでした。
今回はBlogトップページのように複数のコンテンツがある場合にそれぞれのコンテンツにブックマーク数をインライン表示(シール?)させる方法を紹介してみます。
但し、前回のように単にJavaScriptでwriteするだけだとそこで表示が止まってしまいますし、また毎回APIにアクセスすると全体表示が非常に遅くなってしまうため、CGI経由で複数のブックマーク数をまとめて取得しておいて、後からJavaScriptでインライン表示してみます。
また前回と同じくCGIからJavaScriptオブジェクトやデータを生成して引き渡しますので、クロスサイト・ドメインの制限にはかかりません。
例えばレンタルのBlogサーバーでも別のサーバーのCGIからブックマーク数を取得して表示可能になっています。
①BlogのHTMLに細工をします。
まずHEADに以下を追加してください。例によってprototype.jsのライブラリです。ダウンロードしてサーバーにアップしておいて下さい。
<script type="text/javascript" src="http://サーバー/prototype.js"></script>
次にブックマーク数を表示したいところに以下のようなHTMLを挿入しておきます。
<span class="hBCounter" title="各エントリーのパーマネント・リンクURL"></span>
ここは各Blogで設定が変わるところだと思いますが、エントリーのパーマネント・リンクがtitleの引数として指定できるようにHTMLを修正して下さい。
例えばSeesaaであれば次のようになります。
<span class="hBCounter" title="<% article.page_url %>"></span>
MTであれば$MTEntryPermalink変数で指定すればよいと思われます。
他のBlogは・・・よく分かりません(^^; この指定がHTMLを変更して出来ないと、今回の方法は使えません。あしからず。
②同じBlogのHTMLに以下のJavaScriptを追加して下さい。
出来る限りHTMLの最後の方に追加するようにして下さい。
<script type="text/javascript">
<!--
var hbElm;
window.onload = function () {
o();
}
hbElm = document.getElementsByClassName('hBCounter');
var params = '';
for(var i=0; i<hbElm.length; i++) {
params += hbElm[i].title + ',';
}
document.write('<script type="text/javascript" src="http://サーバー/hatebuCounterV2.cgi?url=' + params + '"></script>');
function o() {
for(var i=0; i<hbElm.length; i++) {
if(hbElm[i] != null) {
hbElm[i].innerHTML='| ' + resultHTMLs[hbElm[i].title] + ' ';
}
}
}
// -->
</script>
http://サーバー/hatebuCounterV2.cgi は次に説明するPerlスクリプトへのパスです。
②次のPerlスクリプトをサーバーにアップして権限などを設定しておいて下さい。
XML-RPCモジュールを使用します。
hatebuCounterV2.cgi
#!/usr/bin/perl
use strict;
use lib qw(../lib);#←ライブラリは適当に変更して下さい。
use XMLRPC::Transport::HTTP;
use CGI;
print "Content-Type: text/html\r\n\r\n";
my $q = new CGI;
my @targetURLs = split( /,/, $q->param('url'));
my $result = XMLRPC::Lite->proxy('http://b.hatena.ne.jp/xmlrpc')->call('bookmark.getCount', @targetURLs)->result;
print "var resultHTMLs = new Array();\r\n";
foreach my $n ( @targetURLs ) {
my $cnt = $result->{$n};
print "resultHTMLs[\"$n\"] = \"<a href='http://b.hatena.ne.jp/entry/$n' target='_blank'><img src='http://d.hatena.ne.jp/images/b_entry.gif' alt='このエントリーを含むはてなブックマーク' title='このエントリーを含むはてなブックマーク' width='16' height='12' style='vertical-align: middle; border-style: none;' /></a> <a href='http://b.hatena.ne.jp/entry/$n' target='_blank'>($cnt)</a>\";\r\n";
}
以上で、こんな感じでインラインにはてブのブックマーク数を表示できるようになります。
# よくよく考えると、可能なのならばはまちちゃんがやっているように画像化してしまった方が面倒が無い気もするなぁ。ここまで書いておいて何ですが。
ま、いいか！