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

Как добавить favicon сайтов к внешним ссылкам, ведущим на них | n-wp.ru
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

Как добавить 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">

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

Скачать jquery.favicons.js

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

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. Баф

    Спасибо большое!

    Для тех кто предпочитает, чтобы favicon выводился ПЕРЕД ссылкой — нужно заменить

    ["appendTo"]

    на

    ["prependTo"]
    Ответить
    1. Баф

      Подпишусь…

      Ответить
  2. Баф

    Наверное, с помощью jquery можно творить офигенные вещи…

    Ответить
  3. Баф

    Интересно, а можно ли для определённых ссылок и/или доменов не использовать эту процедуру?

    Ответить
  4. Баф

    Скрипт, конечно бы желательно модицифировать.

    Т.к. при ссылке даже на такого сайто держателя, как Microsoft есть большой шанс favicon не получить.

    К примеру вот: пример
    ссылка на favicon:

    <link rel="shortcut icon" type="image/ico" href="/themes/wireframe/favicon.ico" />

    Может получится что-то сделать?

    Ответить
  5. Баф

    + в расхваленном IE9 при открытии этой страницы ссылка на блог WordPress не получает соответствующую иконку, а в FF — получает…

    Ответить
    1. Не устраивайте холивар, в IE9 этот скрипт работает корректно.

      Ответить
  6. Баф

    Ненавижу холивары.
    Но попробовав открыть эту страницу в двух браузерах IE 9 (дома и на работе Win 7 x64 и Win 7 x32) я вижу одну и ту же картину
    [img]http://bafff.ru/blog/wp-content/uploads/2011/09/holywar.png[/img]

    В отмеченном месте должен быть значок WordPress… А у вас всё корректно?

    Ответить
  7. Баф

    А можете добавить максимальное время выполнения скрипта? А то если сервер с которого пытается получиться favicon недоступен — можно натолкнуться на различные глюки. К примеру долгое время не передаётся управление синтакс хайлайтеру, из-за чего код выглядит не так, как нужно…

    Ответить