jQuery：URLからそのサイトのファビコンを表示してみる

2008/09/30

URLからそのサイトのファビコンを表示してみる

URLとかリンクの前に、サイトのファビコンが表示できたらなー
なんて思ってjQueryでできないか考えてみたけど、
なかなか難しい技術のようだってことはわかった。
自分でスクリプト作るのは難しいかな？

とりあえずプラグインなどをみつけたのでまとめておく。

URLからそのサイトのファビコンを表示してみる

一つは、favicon API javascriptライブラリを使う方法です。

faviconの取得をAPI側でしてもらい、それを表示するようだ。

これの使い方はプラグイン化されているので簡単。
ファイルをダウンロードしてきて、jQueryとともに読み込む。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.faviconapi.js"></script>

これに加えて、表示させたい範囲のaタグに適応されるように、
コードを指定しおけば表示されるようになる、

$(function(){
        $('a.favicon_s').faviconapi();
});

ちなみに、このスクリプトを今回エントリーで使わせてもらっている。

便利だけど、自分のサーバーでこれができたらなーと思うが、
技術もないけど、仕組みを考える頭もないや。
使いたいときはコレを使ってみるのがいいと思う。

URLからそのサイトのファビコンを表示してみる

これもjQueryのプラグイン化されていて、
簡単に言えば、リンクのURLからルートディレクトリのURLを抜き取り、
/favicon.icoを加えて、そこにあるfaviconを表示させるという方法だ。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.faviconapi.js"></script>

そして表示させる範囲のaタグに適応させる指定をする。

$(function($) {
  $('a').each(function(i, n) {
    $('<img />')
      .favicon(n.href)
      .insertBefore(n);
  });
});

これでfaviconが自動的に表示される。

ところがこのプラグインの問題は、ルートディレクトリにfaviconがない場合だ。

多くのサイトではルートディレクトリにfaviconをいれているが、
そうでないケースもある場合があるので、その時は表示されないので注意。

などと考えたけど、うまいこといくようなのが思い浮かばない。
JavaScriptだけだと限界があるのだろうか・・・
どなたか知っている方いたら、お教えくださいm(_ _)m

参考サイト・エントリー：