Autolinks - Автоматические ссылки для блога

link png html
С автоматическими ссылками многие пользователи знакомы по форумам. Это когда при написании топика вы кидаете тестовую ссылку, а движок её преобразовывает в активную, т.е. "на выходе" через полноценный тег a. Насколько я помню, в природе встречался плагин и для Wordpress с такими же функциями.

Сегодняшний гость обзора - скрипт jquery.autolink.js. Он разработан для создания кликабельных ссылок из обычных тестовых (определяет ссылки по заданным по символам) и даже умеет подсвечивать заданные слова.

Ну и конечно первая мысль: на кой чёрт это на блоге ставить?
Как у клиентского приложения, выдача скрипта (ссылки) не индексируются поисковиками, что позволяет строить целые списки и каталоги из кликабельных ссылок без всяких заморачиваний с noindex и nofollow.

Например, я составляю список Dofollow блогов. Там длинный перечень линков, который надо либо оставлять в некликабельном состоянии (то есть без каких-либо тегов), либо закрывать его от поисковиков, что создаст негативный эффект при ранжировании. Тогда как куда проще обязать скрипт "обработать" ссылки, а для поисковых машин он останется обычным тестом.
Есть ещё разные варианты использования, но я думаю, догадаетесь о них сами.

Демо:


http://yandex.ru - Яша (Яндекс)
http://google.ru - Гоша (Гугл)
mail@mail.com - типа почтовый ящик
Кто такой Платон Щукин?

А вот так выглядит исходник этого демо:

<div id="autol">
http://yandex.ru - Яша (Яндекс)
http://google.ru - Гоша (Гугл)
mail@mail.com - типа почтовый ящик
Кто такой Платон Щукин?
</div>

То есть, как мы видим, скрипт исправно обрабатывает ссылки (пример с Гошей и Яшей), ссылки на почту (mail to) и подсветил слово "Платон". Всё это добро я поместил в контейнер с id autol, и в его пределах будет обрабатываться любой тестовый линк. Из статьи "Массовое приминение атрибутов rel и target к ссылкам в Blogger" я дёргнул строчку:
$('#autol a').attr('target','blank');, чтобы ссылкам автоматически присвоился атрибут target="blank" (не хорошо, если пользователь, кликнув по ссылке, покинет страницу).

Установка

1) jQuery
2) Ставим в голову шаблона (область <head></head>) скрипт jquery.autolink.js:
<script src="jquery.autolink.js" type="text/javascript">
</script>
Его нужно скачать и положить на хостинг. К примеру, на Dropbox.
3)Туда же и скрипт с настройками:
<script type="text/javascript">
$(function(){
    $("#autol").autolink();
    $("#autol").mailto();
    $("#autol").highlight("Платон", '<span style="background-color:#FFFF7F;">$1</span>');
    $('#autol a').attr('target','blank');
 
})
</script>
Где:
  • autolink - отслеживает текстовые ссылки
  • mailto - отслеживает ссылки на email
  • highlight - подсвечивает указанное слово (Платон) и с цветом заднего фона #FFFF7F

4)Html код, который следует использовать непосредственно на странице/в топике/посте, я привёл выше (смотри под демо исходник).

Разработчик.

Кстати, если вы не знаете, какую поисковую форму установить в блог, то советую присмотреться к сервису Яндекса, про который я писал в заметке "Яндекс Поиск для сайта. Установка в Blogger".

9 комментариев:

  1. Редко пишу дифирамбы, но в данном случае, aldous - респект! Во первых, "женщины блогеры" получили кликабельные ссылки! Во вторых, я это дело "приварил" к комментариям! Отныне с ссылочным "жлобством", на моем блоге, покончено! А вообще, этот скрипт, мощнейшее средство управления исходящей ссылочной массой. Кстати, Шакин тоже отказался от ссылок в комментариях!

    ОтветитьУдалить
  2. Всё правильно, от лишних ссылок лучше избавляться. Большое кол-во открытых ссылок делает блог спамным. Большое количество закрытых сслылок тоже негативно влияет на отношение поисковиков к блогу.

    ОтветитьУдалить
  3. Justus посоветовал обратить внимание на эту статью и думаю не зря.
    Осталось прикрутить сие чудо себе на блог. Спасибо за интересное решение.

    ОтветитьУдалить
  4. Ни хрена не получается. Беда прям.
    Пробовал и отсюда брать и с исходника, даже сложил всё в одну папку на denver'e и пробовал оживить простейший html файлик с id и подключенным скриптом. Не фурычит.
    Что не так?

    ОтветитьУдалить
  5. Всё разобрался. Первый раз скачал библиотеку jquery и куда-то её спрятал :), а сейчас забыл про неё (ссылочка бледненькая). Кстати, в исходнике предлагается значительно более лёгкий вариант библиотеки.

    ОтветитьУдалить
  6. =).
    Кому надо, пример в html-файлике. На кодировку не обращайте внимание.

    ОтветитьУдалить
  7. Столкнулся с ещё одной приятной неожиданностью: из нескольких комментариев с текстовой ссылкой только у первого она становится активной...
    Возможно это зависит от последавательности выполнения php кода и скрипта?

    ОтветитьУдалить
  8. Я не знаю, а причём здесь php?
    Тестил только на блоггере. Скрипт отлично обрабатывает содержимое контейнера.

    ОтветитьУдалить
  9. @Legionn
    Потому что id на страницы должен быть один, поменяй на class все

    ОтветитьУдалить