広告

posted by fanblog

ファンブログの人のコメントに画像を表示させるスクリプト

このエントリーをはてなブックマークに追加
前にファンブログで『自分のコメント』だけを目立たせるってのを書いたんですが、その時に思い付いたことがあります。それは、コメント投稿者のサムネイルとか表示できないのかな、って事です。
それが割と簡単だったので、今回実装してみました。

機能詳細


この機能は、残念ながらファンブログの人専用です。コメントした人のホームページのアドレスがファンブログである場合に限り、その人のプロフィールの画像を名前の左に表示する、と言う物になります。
どんな感じなのか、ってのは上にある画像の様な感じです。
表示される画像は横幅だけ指定しているため、縦に長い画像を使っている人はコメントの名前部分が縦に長ーくなってしまいますが、ファンブログの『あし跡』に表示される画像と同じ大きさです。

実装方法


以下のjava scriptのコードを1記事のhtmlのどこかにコピペすれば良いだけです。</body>のすぐ上、とかが良いかと思います。
ですが、このスクリプトにはjQueryというjava scriptのライブラリを使っているため、ブログにjQueryを設置する方法に書いてあるように、jQueryを使う為にコードを数行追加しないと使えませんのでご注意下さい。ただ、一番簡単な方法は1行追加するだけですので、簡単かとは思いますが。
<script type="text/javascript">
jQuery("#commentForm div.posted2 a[href*='http://fanblogs.jp/']").each(function() {
var cadress = this.href;
var cadresscut = cadress.match(/[\w-]+/g);
var imgadress = "http" + "://fanblogs.jp/" + cadresscut[3] + "/file/profile";
jQuery(this).prepend('<img src="' + imgadress + '" width="40">').find("img").css("padding", "2px 6px 0");
});
</script>

最後に


割と面白いこと思い付いたと自分では思っているんですが、あまり使われないですかね。
jQueryを含め、コードを貼るだけですが、それでもハードル高いと感じる人もいるし、それ以前に使いたいと思う人がいるかどうか、って感じですが。
それ以前にこの記事を読む人がどれだけいるのか、って話もありますが。。w

ま、それでも「ファンブログハック」と言う名に恥じぬ様、どんどんハックしていきたいな、と思います。

追記


思っていたより利用者が多く、コードの改変等も行われ、多くの方に広めてもらえているので、そういう方々を少しだけですがまとめてみました。初期のコードのカスタマイズについても少し書いています。
サムネのスクリプトの改変利用例

2012-02-25追記


アドレスに-(ハイフン)が含まれている方の画像が正しく表示されていないと言う不具合がありましたので、訂正しておきました。

このブログの更新情報は TwitterRSS でチェック出来ます。是非、フォロー、またはRSSの購読をよろしくお願いします。
「RSSの購読って何?」って人は、 ブラウザ毎のRSS購読方法の簡単なまとめ を読んでみて下さい。

このエントリーをはてなブックマークに追加
人気記事

PAGE TOP

×

この広告は30日以上新しい記事の更新がないブログに表示されております。