Кнопка Добавить в закладки браузера
Небольшой обзор по размещению кнопки «Добавить в закладки», которую можно наблюдать в виде ссылки или жёлтой звёздочки в одном ряду с социальными виджетами. Приводимый пример кода можно вставить в шаблон любого сайта, в том числе воспользовавшись встроенным редактором WordPress или текстовым виджетом из ряда стандартных.
Примечание! Код обрабатывается большинством современных интернет-браузеров (Internet Explorer, Mozilla Firefox, Opera), но не является универсальным. В ряде устаревших версий программ некорректно или полностью не работает!
В виде ссылки
Первый исходный код «Добавить в закладки» представляет собой текстовую ссылку:
<a rel="sidebar" href="" onclick="this.title=document.title;this.href=document.URL;if(window.external && (!document.createTextNode || (typeof(window.external.AddFavorite)=='unknown'))){window.external.AddFavorite(document.URL, document.title);return false}">Добавить в закладки...</a>
текст «Добавить в закладки…» можно изменить на свой («В избранное» или другое).
В виде картинки
Второй вариант предполагает отображение графического файла, например, вот такой звездочки распространённой среди веб-сайтов.
<a rel="sidebar" href="" onclick="this.title=document.title;this.href=document.URL;if(window.external && (!document.createTextNode || (typeof(window.external.AddFavorite)=='unknown'))){window.external.AddFavorite(document.URL, document.title);return false}">
<img src="https://wd-x.ru/wp-content/uploads/2014/10/star.png" alt="Добавить в закладки" title="Добавить в закладки..." width="22" height="22" />
</a>
Здесь достаточно изменить ссылку на изображение на вашем сайте, и если требуется отредактировать теги «alt» — альтернативный текст, «title» — заголовок (всплывающая надпись).
Вместо послесловия
Вот и всё, никаких дополнительных изменений в шаблон сайта вносить не требуется. Создать индивидуальный стиль для кнопки Вы сможете самостоятельно, добавив его в файл «style.css» или обернув код в теги <div> (может потребоваться при позиционировании или добавлении эффектов).
Не работает эта функция у Вас в Chrom-е… Что можно сделать? Спасибо…
Здравствуйте!
Спасибо за замечание! В коде были синтаксические ошибки, которые успешно исправлены. Вариант в виде ссылки был проверен на данном сайте.
Приношу свои извинения!
Не, с кавычками то понятно… Я их еще и в первый раз исправил. Просто Вы в каком браузере проверяли работоспособность вашего скрипта? В Mozilla все работает отлично, а вот в Chrome — скрипт не работает как и прежде… Не могли бы Вы проверить и/или подсказать, как в Chromе заставить работать данный скрипт! Спасибо за Вашу работу…
Работа кода проверялась в браузерах: Mozilla Firefox, Internet Explorer и Яндекс. В последнем, видимо также как и в Chrome, ссылка не работает — происходит обновление страницы. Увы, поиск нового или доработку кода забросил по причине отказа от неё многими блогерами.
В своё время отказался в пользу кнопки в панели Pluso, как наиболее кроссплатформенный вариант.
Понятно. Но все равно спасибо за быстрые ответы, а на счет Pluso, как по мне — удобнее пользоваться сервисом — AddThis.
Ну сейчас есть из чего выбрать, так что всё зависит от требований вебмастера к сервису. Можно найти и со счётчиками, и статистикой по кликам, и другими опциями. Я отталкивался лишь от скорости загрузки скрипта на странице.
Вот именно, поэтому я и искал кнопки без сторонних скриптов…
А что Pluso скрипт работает быстрее AddThis?
Чисто визуально появление панели кнопок Pluso быстрее, при одинаковых условиях. Сам скрипт подгружается из footer,а вызов находится в single. Ну это конечно, субъективный результат, так как зависит от хостинга и от шаблона…
/* */
Даю правильный код с красивой кнопкой. Установлен на моем сайте.