URLリンクの先頭に自動でfavicon画像を追加する

auto favicon

URLを引用する際に、横に小さなアイコンを添えることで理解を補助します。

(例)
http://google.comhttp://google.com
http://yahoo.co.jphttp://yahoo.co.jp
http://twitter.comhttp://twitter.com

アイコンはfaviconで

画像は自前で用意せず、そのサイトのfavicon.icoを直接読み込んでしまうのがお手軽です。
faviconはGoogleのURL形式で取得できます。


http://www.google.com/s2/favicons?domain=<!-- ここにURL -->

jQueryで自動化

jQueryに以下を追加しておけば、投稿内のリンクに自動でfaviconが付くようになります。


/* 引用URLにfavicon付加 */
$(".entry-content a[href^='http']")	//faviconを付けたい要素
	.not(".more-link,.no-favicon,a:has(img)")	//付けたくない要素
	.each(function(){
	$(this).css({background:"url(//www.google.com/s2/favicons?domain="+this.href+") no-repeat",backgroundSize:"contain",marginLeft:3,paddingLeft:20});
	});
簡単なjQueryで自動的にURLの横に小さなアイコンを添える方法です。

" }

COMMENTS

RELATED