Добавить в избранное



Влад Мержевич

Одно время на сайтах была популярна ссылка «Добавить сайт в избранное», при нажатии на которую адрес сайта заносился в закладки браузера. Впрочем, почему была? Периодически на сайтах подобная ссылка встречается до сих пор. Беда в том, что используемый для этой цели скрипт не работает во многих браузерах, поэтому его ценность близка к нулю. В HTML5 расширились возможности атрибута rel тега <a> и теперь с его помощью можно легко добавлять в избранное любые сайты и отдельные страницы.

Достаточно к ссылке добавить rel="sidebar" и при нажатии на нее откроется специальная панель в браузере для создания новой закладки. Пока значение sidebar поддерживают два браузера — Firefox и Opera, остальные игнорируют атрибут rel и переходят по указанной ссылке как обычно.

Чтобы расширить количество браузеров и добавить к ним IE, к ссылке также можно подключить небольшой скрипт. В итоге получится, что Firefox, Opera, Internet Explorer вызовут специальную панель, остальные браузеры перейдут по ссылке (пример 1).

Пример 1. Добавление в избранное

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Добавить в избранное</title>
<script>
function addBookmark() {
if (document.all) window.external.addFavorite('http://htmlbook.ru', 'Сайт htmlbook.ru');
}
</script>
</head>
<body>
<p><a href="http://htmlbook.ru" rel="sidebar" 
   onclick="addBookmark()">Добавить в избранное</a></p>
</body>
</html>

Как в итоге выглядит применение rel="sidebar"? Результат зависит от браузера. Firefox к примеру открывает такое окно (рис. 1).

Добавление в избранное в Firefox

Рис. 1. Добавление в избранное в Firefox

В Opere вид несколько другой, но смысл аналогичный (рис. 2).

Добавление в избранное в браузере Opera

Рис. 2. Добавление в избранное в браузере Opera

У Internet Explorer самый лаконичный интерфейс (рис. 3).

Добавление в избранное в браузере Internet Explorer

Рис. 3. Добавление в избранное в браузере Internet Explorer

Пока использование атрибута rel непривычно из-за его слабой поддержки браузерами, но потенциал у него огромный, а число значений постепенно расширяется. Так что включать в ссылки его надо.

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.