THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
jquery
favicon
ファビコン
javascript

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

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

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

APIを利用する方法

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

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

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

favicon API javascriptライブラリ [jQueryプラグイン] | jigelog

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();
});

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

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

FaviconのURLを生成して表示させる方法

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

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

指定した URL からそのサイトのファビコンを表示する jQuery Favicon プラグイン
ここからjsファイルをダウンロードしてきて、jQueryと一緒に読み込む。

<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

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

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