Как добавить favicon сайтов к внешним ссылкам, ведущим на них

Я уже писал о том, как визуально выделить внешние ссылки – решение для современных браузеров и способ, работающий в старых версиях Internet Explorer. Хочу поделиться еще одним способом, являющимся кроссбраузерным и более гибким. В нем используются скрипты jQuery, и он удобен тем, что к ссылкам, ведущим на сайты, добавляется не стандартная иконка, а favicon этих сайтов. Таким образом ссылки получаются более узнаваемыми.

Убедитесь, что у вас подключена библиотека скриптов jQuery (Как подключить jQuery). После этого откройте файл header.php используемой вами темы, и добавьте в него код скрипта:

<

 extra="10">

jQuery(document).ready(function() {
	jQuery('a[href^="http://"]').filter(function() {
		return this.hostname && this.hostname !== location.hostname;
	}
	).each(function() {
		var link=jQuery(this);
		link.addClass("favicon_link");
		var faviconURL=link.attr("href").replace(/^(http://[^/]+).*$/,"$1")+"/favicon.ico";
		var faviconIMG=jQuery('<img class="favicon_image" src="https://n-wp.ru/files/external.png" alt="" width="12" height="12" style="vertical-align:middle;border:none;padding:2px" />')["appendTo"](link);
		var extImg=new Image();
		extImg.src=faviconURL;
		if(extImg.complete) {
			faviconIMG.attr("src",faviconURL);
		}
		else {
			extImg.onload=function() {
				faviconIMG.attr("src",faviconURL)
			}
		}
	})
});

Если у вас в тексте есть ссылка, указывающая на внешний сайт, то скрипт находит на этом сайте favicon, и выводит его после ссылки. Если же скрипт не находит favicon, то отображается стандартная иконка, указанная в строке 10. В той же строке кода вы можете в скрипте изменить размер иконки ссылки – <

 inline="yes">width="12" height="12"

.

Чтобы не загромождать код файла header.php, можно этот скрипт записать в отдельный файл. Вот сжатый код скрипта:

jQuery(document).ready(function(){jQuery('a[href^="http://"]').filter(function(){return this.hostname && this.hostname !== location.hostname;}).each(function(){var link=jQuery(this);link.addClass("favicon_link");var faviconURL=link.attr("href").replace(/^(http://[^/]+).*$/,"$1")+"/favicon.ico";var faviconIMG=jQuery('<img class="favicon_image" src="https://n-wp.ru/files/external.png" alt="" width="12" height="12" style="vertical-align:middle;border:none;padding:2px" />')["appendTo"](link);var extImg=new Image();extImg.src=faviconURL;if(extImg.complete){faviconIMG.attr("src",faviconURL);}else{extImg.onload=function(){faviconIMG.attr("src",faviconURL)}}})});

Создайте пустой текстовый файл jquery.favicons.js, и запишите в него этот код. После этого перепишите файл jquery.favicons.js в папку с используемой темой, например, в папку js. После этого вам остается только подключить скрипт одной строчкой, вставленной в файл header.php:

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

Не хотите ничего создавать и переписывать? Да нет проблем – качайте и подключайте!

Пользуйтесь с умом!