Blogなどではありがちな Comment(6) | TrackBack(2) のようなインライン表示をはてブのブックマーク数でも行ってしまうスクリプトです。
尚IFRAMEは使っていません。JavaScriptとCGI(Perlスクリプト)で実現しています。
一般にはクロスサイト・ドメイン制約の問題がありますが、近頃流行りそうな(?)CGIからJavaScriptオブジェクトやデータを生成して引き渡すことで回避しています。
従ってBlogに限らず、(JavaScriptを書けるのであれば)どんなページにも貼り付けられます。
① CGI(Perl)で動作しますので、CGIの動くサーバーが必要です。
またCGIやSOAP::Liteパッケージがインストールされている必要があります。
SOAP::LiteはSOAP::Lite for Perl サイトからダウンロードして下さい。
以下のファイルをサーバーへアップロードして動作可能なように権限などを設定します。
hatebuCounter.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 = ($q->param('url'));
my $result = XMLRPC::Lite->proxy('http://b.hatena.ne.jp/xmlrpc')->call('bookmark.getCount', @targetURLs)->result;
my $cnt;
if($result) {
$cnt = $result->{@targetURLs[0]};
} else {
$cnt = '?';
};
print "(function(){\r\n";
print "function o() {document.writeln(\"<a href='http://b.hatena.ne.jp/entry/@targetURLs[0]' 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/@targetURLs[0]' target='_blank'>($cnt)</a>\");}\r\n";
print "o();\r\n";
print "})()\r\n";
*因みにはてなブックマーク件数取得APIを使用しています。
ところで、このページのサンプルは素人には分かり難いぜっ。PerlではResultから明示的に返り値をどう取り出したらいいのか全然分かんなかった・・(ぼやきここまで)
② ブックマーク数を表示したいHTMLページの箇所に、以下のようなJavaScriptを埋め込みます。
<script type="text/javascript">
<!--
var l = location.href;
document.writeln('<script type="text/javascript" src="http://サーバー/hatebuCounter.cgi?url='+l+'"></script>');
// -->
</script>
サーバー名は適切に変更して下さい。
以上でWebページを開くと例のようなインライン表示でブックマーク数が表示されると思います。
あまり1ページで複数置いてしまうと読み込みが遅くなるかも知れません。
「デザインが気に入らない！」って場合には変更はどうぞご自由に。
Blogに限らず他の静的ページなどでも試してみて下さい。
Let’s Enjoy to Try!