Кнопка добавить в закладки

Кнопка добавить в закладки

Кнопка добавить в закладки для сайта

Сегодня я вам расскажу об одной полезной функции на сайте — это ссылка, ну или кнопка «Добавить в закладки (избранное)». Эта функция позволяет пользователям добавить понравившуюся страницу вашего сайта в закладки браузера, чтобы в нужный момент быстро и легко получить доступ к ней.
Многие из вас скажут: – «Зачем дублировать функцию браузера, ведь эта кнопка есть в адресной строке?».

Да есть, но она там, во-первых, не очень заметна, во-вторых, некоторые пользователи вообще не знают о ней.

Для улучшения UI (юзер интерфейса), лучше продублировать эту функцию и расположить ссылку/кнопку «Добавить в закладки (избранное)» на видном месте. Например, если у вас интернет-магазин, то ее лучше вставить на карточку товара, если у вас блог, то – под или над статьей. Расположение все равно нужно тестировать. А так же ее можно разместить в шапке сайта на всех страницах.

В интернете представлено много разных способов реализовать эту функцию, но большинство из них работают не во всех браузерах, то не работает в старых, то в новых, то в IE, то еще где-то.

Поэтому пришлось, самому выбрать среди них самый лучший и немного дописать его. И сегодня я поделюсь этим способом с вами и предоставлю пошаговую инструкцию по установке ссылки/кнопки «Добавить в закладки (избранное)» на ваш сайт.

Для того чтобы сделать кнопку «добавить в закладки» для сайта нам нужно выполнить 3 простых шага:

Скрипт кнопка Добавить в закладки избранное для всех браузеров

Когда начинаешь искать решение для воплощения задуманного, а именно кнопки добавить в закладки, то упираешься в проблему. Суть проблемы в том, что на сегодняшний день до сих пор нет единого решения как это сделать во всех браузерах. А если углубится, то окажется что нет и разных решений, потому как некоторые браузеры вообще игнорируют любые попытки сделать это. Сегодня, четко и с минимальными трудозатратами это делает только браузер Firefox.

Что же делать с остальными браузерами, создатели которых не особо напрягаются по этому поводу? Поможет небольшой скрипт, который поможет браузерам что от них хотят, а тем которые вовсе не могут это сделать будет показано сообщение:

Нажмите CTRL-D, чтобы добавить страницу в закладки

Чтобы все это сделать, нам нужно для начала подключить скрипт. Добавьте его в отдельный файл и подключите в подвале или в шапке или же просто вставьте заключив в Ява-теги в той же шапке или подвале.

function getBrowserInfo() { var t,v = undefined; if (window.chrome) t = ‘Chrome’; else if (window.opera) t = ‘Opera’; else if (document.all) { t = ‘IE’; var nv = navigator.appVersion; var s = nv.indexOf(‘MSIE’)+5; v = nv.substring(s,s+1); } else if (navigator.appName) t = ‘Netscape’; return {type:t,version:v}; } function bookmark(a){ var url = window.document.location; var title = window.document.title; var b = getBrowserInfo(); if (b.type == ‘IE’ && 8 >= b.version && b.version >= 4) window.external.AddFavorite(url,title); else if (b.type == ‘Opera’) { a.href = url; a.rel = «sidebar»; a.title = url+’,’+title; return true; } else if (b.type == «Netscape») window.sidebar.addPanel(title,url,»»); else alert(«Нажмите CTRL-D, чтобы добавить страницу в закладки.»); return false; }

Теперь выведем в нужном Вам месте саму кнопку. Там где хотите ее видеть добавьте следующую ссылку с параметрами и событиями.

<a class=»add_fav» rel=»sidebar» href=»» onclick=»return bookmark(this);»>Добавить в закладки</a>

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

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

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

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

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

<!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).

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

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

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

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

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

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

Кнопка «добавить сайт в избранное» на javascript

В этой статье вы узнаете, как дать возможность неопытному посетителю не потерять ваш сайт, если он ему понравился и дать возможность читателю вернуться к вам еще раз.

Возможности интернета каждый осваивает с разной скоростью. Кто-то уже давно знает, как искать необходимую информацию и знает, что делать, чтобы ее не потерять. А кто-то все еще теряется при виде разных мигающих кнопок, реклам и баннеров, и с удовольствием пришел бы на сайт еще раз, но, увы, не знает, как это делать.

Не теряйте таких посетителей! Если ваш сайт его заинтересовал, вполне вероятно, что какое-то время он может быть «постоянным посетителем». Дайте ему возможность не упустить вас из виду!

Для этого установите на сайте маленький скрипт, написанный на javascript. С помощью этого скрипта вы сможете помочь посетителю быстро добавить в закладки ваш проект.
Можно вывести кнопку, можно вывести картинку или текст с намеком о том, что он может на нее нажать.

Ближе к делу. Вот такой результат будет, если вы установите скрипт, который я вам предлагаю:

добавить страницу в закладки!

Создаем предложение добавить сайт в избранное или в закладку.

Добавьте этот код к себе на сайт перед тегом </body>, где хотите, чтобы отображался код:

<script>; // Добавить в Избранное function bookmark2(a) { title=document.title; url=document.location; try { // Internet Explorer window.external.AddFavorite(url, title); } catch (e) { try { // Mozilla window.sidebar.addPanel(title, url, «»); } catch (e) { // Opera if (typeof(opera)==»object») { a.rel=»sidebar»; a.title=title; a.url=url; return true; } else { alert(‘Ваш браузер не поддерживает автоматическое добавление закладок. Нажмите Ctrl+D чтобы добавить страницу в закладки.’); } } } return false; } </script> <a href=»javascript:void(0)» onclick=»return bookmark2(this)»>добавить страницу в закладки!</a>

так как в Google Chrome это не работает, появится подсказка «Ваш браузер не поддерживает автоматическое добавление закладок. Нажмите Ctrl+D чтобы добавить страницу в закладки», а на остальных браузерах должно работать.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

  1. Wal

    Давно хотел поставить такую штуку себе на сайт. Спасибо, всё работает. В Хроме вылетает окно с предупреждением, а в IE нормально добавляется.

    Ответить

  2. Тамара Полякова

    Привет Степан! Спасибо за полезную статью. Я установила твой код в виджите в сайдбаре.У меня получилась просто запись (добавить страницу в закладки!) бесцветная и не кнопка. Что не так?

    Ответить

    Степан => автор блога отвечает:
    06.11.2015 в 10:48

    Здравствуйте, Тамара. Ссылка и должна выводиться с текстом “добавить страницу в закладки!”. Если хотите вставить кнопку, вместо текста в коде вставьте вот это:

    <img src=»knopka.jpg»>

    knopka.jpg – это картинка кнопки.

    Ответить

  3. Wal

    Скрипт хороший, но работает только в IE.
    Проверил в Опере, Хроме, FireFox – выдаёт предупреждение, что надо руками добавлять.
    А есть более универсальное решение?

    Ответить

    Степан => автор блога отвечает:
    06.11.2015 в 10:37

    Скрипт должен работать Опере, FireFox, IE.
    Предупреждение должно выдавать только в Хроме – “Ваш браузер не поддерживает автоматическое добавление закладок. Нажмите Ctrl+D чтобы добавить страницу в закладки.”

    Ответить

    Wal отвечает:
    07.11.2015 в 23:01

    Опера v33, FireFox v42 – скрипт не работает. И в Хроме тоже.
    Работает только в IE!!!
    Два раза проверял.

    Ответить

Здравствуйте. Поговорим о том, как сделать ссылку или кнопку для добавления в избранное (закладки) для всех браузеров: Chrome, Firefox, Opera, Internet Explorer, Safari — кроссбраузерно, чтобы пользователь при клике на неё смог отложить на будущее и запомнить вашу страницу. Естественно, позаботьтесь о том, чтобы содержание было интересным, иначе никто не будет сохранять её к себе в закладки 🙂
Итак, поехали.

Как избежать отображения ссылки для избранного в планшетах и мобильных браузерах

Конечно, нет смысла показывать ссылку для добавления в избранное на мобильных девайсах, она там не будет работать. Поэтому нужно отфильтровать их.
Для этого можно, например, генерировать ссылку с помощью javascript, а в нём уже фильтровать всё как надо

// Функция для определения «мобильности» браузера function MobileDetect() { var UA = navigator.userAgent.toLowerCase(); return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry|windows phone|opera mobi|opera mini/i .test(UA)) ? true : false ; } // Если браузер НЕ мобильный, отображаем ссылку if ( !MobileDetect() ){ document.getElementById(‘MyID’).innerHTML = ‘Тут HTML код ссылки (см.выше)’; }

Немного разберём его

  • var UA = navigator.userAgent.toLowerCase(); — записывает в переменную заголовки браузера, переведя их в нижний регистр. По её содержимому мы будем определять «мобильность» браузера.
  • return (/Регулярное выражение/.test(UA) ? true : false) — фильтр. В регулярном выражении записываются фрагментры, которые могут находиться в заголовках мобильных браузеров. Вы можете добавить свои значения, разделяя их |.

    Фильтр чувствителен к регистру. Поэтому, если будете вносить свои значения в фильтр, обязательно записывайте их в нижнем регистре (маленькими буквами).

  • document.getElementById(‘MyID’).innerHTML = ‘Тут HTML код ссылки’; — ищет в коде тег с id=»MyID» и записывает вместо него нашу ссылку. Чтобы сработало, нужно предварительно в место, где отобразить ссылку, записать <span id=»MyID»></span>

Пример готового скрипта и страницы

Подытожу, как в итоге может выглядеть код html

<span id=»AddFavViaSheens»>&nbsp;</span> <script> // Функция для определения «мобильности» браузера function MobileDetect() { var UA = navigator.userAgent.toLowerCase(); return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry|windows phone|opera mobi|opera mini/i .test(UA)) ? true : false; } // Если браузер НЕ мобильный, отображаем ссылку if (!MobileDetect()) { document.getElementById( ‘AddFavViaSheens’ ).innerHTML = ‘<a class=»link» href=»» rel=»sidebar» id=»fav»>Добавить в закладки</a>’; } // Функция для добавления в закладки избранного | https://sheensay.ru?p=710 document.getElementById( ‘AddFavViaSheens’ ).onclick = function () { var title = document.title, url = document.location, UA = navigator.userAgent.toLowerCase(), isFF = UA.indexOf(‘firefox’) != -1, isMac = UA.indexOf(‘mac’) != -1, isWebkit = UA.indexOf(‘webkit’) != -1, isIE = UA.indexOf(‘.net’) != -1; if ((isIE || isFF) && window.external) { // IE, Firefox window.external.AddFavorite(url, title); return false; } if (isMac || isWebkit) { // Webkit (Chrome, Opera), Mac document.getElementById(‘AddFavViaSheens’).innerHTML = ‘Нажмите «‘ + (isMac ? ‘Command/Cmd’ : ‘Ctrl’) + ‘ + D» для добавления страницы в закладки’; return false; } } </script>

Как сделать кнопку «Добавить в избранное»

В любом из современных браузеров есть функция добавления сайтов в список избранного. Таким образом, пользователь может сохранить любимые сайты и держать их всегда под рукой, чтобы иметь к ним быстрый доступ. Но долгое время была популярна кнопка для сайта «Добавить в избранное». Эта функция несколько упрощает процесс добавления сайта в закладки и позволяет лишний раз напомнить пользователю о том, что неплохо было бы добавить сайт в избранное.

Здесь работает психология. Дело в том, что видя на сайте предложение о добавлении в избранное, пользователь задумывается нужно ли ему это. И если он решит, что сайт, действительно, полезен, то добавит его в список закладок. А если предложения не поступит, то пользователь и не задумается над этим вопросом. Именно поэтому нужно предлагать: кто стучится — тому открывают.

Конечно, большинство посетителей добавляют страницы в закладки не потому, что планируют возвращаться на сайт каждый день, а «на всякий случай, вдруг понадобится», и, как правило, не возвращаются. Но некоторые пользователи возвращаются регулярно и формируют костяк посетителей. Так или иначе, если люди будут возвращаться на сайт, это значит, что ваш сайт полезен, и это положительно скажется на поведенческих факторах вашего ресурса, что позволит поисковым системам относиться к нему с большим доверием.

Размещать кнопку «Добавить в избранное» на сайте нужно на видном месте, но не слишком навязчиво. Лучшее место для такой кнопки — шапка, либо боковая часть сайта.

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


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *