Добавление папок и файлов в Избранное в Windows. Добавить в избранные закладки для всех браузеров Сделать домашней добавить в избранное
С
егодня я вам расскажу об одной полезной функции на сайте - это ссылка, ну или кнопка «Добавить в закладки (избранное)». Эта функция позволяет пользователям добавить понравившуюся страницу вашего сайта в закладки браузера, чтобы в нужный момент быстро и легко получить доступ к ней.
Многие из вас скажут: – «Зачем дублировать функцию браузера, ведь эта кнопка есть в адресной строке?».
Да есть, но она там, во-первых, не очень заметна, во-вторых, некоторые пользователи вообще не знают о ней.
Для улучшения UI (юзер интерфейса), лучше продублировать эту функцию и расположить ссылку/кнопку «Добавить в закладки (избранное)
» на видном месте. Например, если у вас интернет-магазин, то ее лучше вставить на карточку товара, если у вас блог, то – под или над статьей. Расположение все равно нужно тестировать. А так же ее можно разместить в шапке сайта на всех страницах.
В
интернете представлено много разных способов реализовать эту функцию, но большинство из них работают не во всех браузерах, то не работает в старых, то в новых, то в IE, то еще где-то.
Поэтому пришлось, самому выбрать среди них самый лучший и немного дописать его. И сегодня я поделюсь этим способом с вами и предоставлю пошаговую инструкцию по установке ссылки/кнопки «Добавить в закладки (избранное)» на ваш сайт.
Для того чтобы сделать кнопку «добавить в закладки» для сайта нам нужно выполнить 3 простых шага:
Создание JS-файла
Если у вас на сайте есть javascript – файл подключающийся на всех страницах сайта, то используйте его и переходите к следующему шагу. Если у вас нет такого файла, нужно его создать. Для этого создадим папку с названием «js» в корневой папке сайта, а в ней уже файл и назовем его «functions.js».
Ниже приведен JavaScript-код, который нужно вставить в выбранный/созданный вами файл и сохранить его:
Function addFavorite(a) {
var title = document.title;
var 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" || window.sidebar) {
a.rel="sidebar";
a.title=title;
a.url=url;
a.href=url;
return true;
}
else {
// Unknown
alert("Нажмите Ctrl-D чтобы добавить страницу в закладки");
}
}
}
return false;
}
Добавление ссылки/кнопки на сайт
Теперь нам осталось выбрать место на сайте и вставить туда следующую HTML-код:
Добавьте страницу в избранное!
Вот и все! Как это всё работает — Вы можете видеть (и попробовать) чуть ниже, а так же в сайдбаре этого сайта.
P.S. Хотелось бы добавить: Данный способ работает в следующих браузерах:
Opera
Mozilla FireFox
Google Chrome / Safari – будет выводиться надпись «Нажмите Ctrl-D чтобы добавить страницу в закладки», в этих браузерах эта функция выключена из соображений безопасности.
Напишите пожалуйста Html код чтобы при открытии сайта на экран автоматически выводилось предложение добавить сайт в избранное или закладки браузера. если сайт добавлен в закладки браузера или избранное то предложение не должно появляться. Заранее благодарен. Константин
Написать то можно такую конструкцию, только получится сложная конструкция.
1) Необходимо вставить всплывающее окно. (Поисковики недолюбливают такие страницы, да и посетители не долюбливают.
2) Каким то образом авторизовать посетителя, ставил он закладку или нет? Для этого надо ставить куки для этого браузера. (Со временем пользователь прочистит компьютер и удалит все куки, я к примеру делаю это 1 раз в 2 недели.)
3) Написать или использовать код который будет работать и вызывать окно для сохранения закладки. (То, что работает в браузере Мозила или Firefox, не работает в Opera, или IE, или наоборот!)
4) Дополнительный большой код который должен будет установленный на странице ради того, чтобы посетитель добавил вас в закладки. (Увеличивается время загрузки страницы. Google страшно не любит страницы которые долго грузятся, исключает из поиска такие сайты, Яндекс не любит всё, что всплывает: Popap Popover.)
ВЫВОД: Такое на сайт такое ставить не стоит. На сайт лучше установить небольшой код для добавления в закладки, и предложить посетителю самому выбирать, нужен ваш сайт ему в закладках. Всплывающие окна использовать для более полезного дела, скажем подписки посетителя.
Нашёл в сети код и доработал его, чтобы работал во всех популярных браузерах.
Вод простенький html код:
КОД:
Добавить в закладки браузера.
function addBookmark() if (document.all) window.external.addFavorite("http://infopodsolnux.ru/", "Сайт infopodsolnux.ru");
Добавить в избранное
Используя данный код вы получаете только текстовую ссылку на вашем сайте: Добавить в избранное
Здесь в этом коде вам нужно прописать ссылки на свой сайт и изменить описание вашего сайта в теге
.
Вставляете данный код в то место, где хотите вывести ваше предложение. (Лучше в верхней части сайта.)
При нажатии посетителю выдаётся окно для сохранения закладки в браузере.
Interner Exploer
На своём сайте я пошёл немного дальше и создал
маленький блок с пояснением посетителю.
Вот примеры:
Вот код в html который использовал:
КОД: ВЫДЕЛИТЬ ВСЕ
function addBookmark() if (document.all) window.external.addFavorite("http://infopodsolnux.ru/", "Сайт http://infopodsolnux.ru");
Внимание!
Если Вам понравился
наш сайт, то вы можете добавить его в закладку вашего браузера.
width="139">
В этом коде как и в предыдущем меняем ссылки на ваш сайт и описания.
В стороке:
, можете менять толщину и цвет рамки, отступы внутри таблицы, ширину таблицы, её выравнивание и фоновый цвет самого блока.
border: 1px solid #ff1919″
/* Рамка в 1 пиксель, цвет=#ff1919 стоит красный */ cellpadding=»5″
/* Отступ от края таблица, чтобы текст не прилипал к рамке */ width=»160″
/* Ширина таблицы в пикселях */ align=»center»
/* Выравнивание таблицы по средине */ bgcolor=»#ffffff
/* Цвет фона в таблице цвет=#ffffff стоит белый */
В коде также нужно поменять и ссылку на вашу кнопку:
Абсолютная ссылка на изображение кнопки и её размеры.
Просмотреть примеры работы кнопки добавления в избранное или в закладки можно на этом сайте на страницах с описаниями видеокурсов и на сайте Байк Шоу: http://showsbike.narod.ru/
Да чуть не забыл, в своих блоках я использовал кнопки с названиями: Создать Закладку
Сделать такую кнопочку можно на сервисе кнопок: http://cooltext.com/Buttons
(Сайт правда на английском языке но разобраться не трудно, а если вы мой подписчик на видеоуроки по созданию сайта на Яндекс Народе, то вы получали ссылку на урок по созданию кнопок в этом сервисе.)
Как вставить данный html код на сайте сделанном в конструкторе на Яндекс Народе, для этого используем модуль вставка произвольного кода на сайт < >.
В любом из современных браузеров есть функция добавления сайтов в список избранного. Таким образом, пользователь может сохранить любимые сайты и держать их всегда под рукой, чтобы иметь к ним быстрый доступ. Но долгое время была популярна кнопка для сайта "Добавить в избранное". Эта функция несколько упрощает процесс добавления сайта в закладки и позволяет лишний раз напомнить пользователю о том, что неплохо было бы добавить сайт в избранное.
Здесь работает психология. Дело в том, что видя на сайте предложение о добавлении в избранное, пользователь задумывается нужно ли ему это. И если он решит, что сайт, действительно, полезен, то добавит его в список закладок. А если предложения не поступит, то пользователь и не задумается над этим вопросом. Именно поэтому нужно предлагать: кто стучится - тому открывают.
Конечно, большинство посетителей добавляют страницы в закладки не потому, что планируют возвращаться на сайт каждый день, а "на всякий случай, вдруг понадобится", и, как правило, не возвращаются. Но некоторые пользователи возвращаются регулярно и формируют костяк посетителей. Так или иначе, если люди будут возвращаться на сайт, это значит, что ваш сайт полезен, и это положительно скажется на поведенческих факторах вашего ресурса, что позволит поисковым системам относиться к нему с большим доверием.
Размещать кнопку "Добавить в избранное" на сайте нужно на видном месте, но не слишком навязчиво. Лучшее место для такой кнопки - шапка, либо боковая часть сайта.
Не нужно делать кнопку огромной или слишком маленькой. Помните, что кнопка должна вписываться в общий дизайн сайта, и не быть слишком навязчивой или слишком малозаметной.
Код кнопки "Добавить сайт в избранное"
Большинство современных браузеров, с приходом стандарта HTML5, поддерживают атрибут rel="sidebar"
.
Добавление сайта в избранное - "Нубекс"
function addSite() {
if (document.all) window.external.addFavorite("http://сайт", "Конструктор сайтов "Нубекс"");
}
Не забудьте добавить наш сайт в закладки! (Для браузера Google Chrome нажмите Ctrl+D)
Добавить сайт в избранное
Но помните, что в браузере Google Chrome невозможно добавить сайт в закладки с помощью кнопки на сайте. Для этого есть специальная комбинация клавиш: Ctrl+D
, поэтому не забудьте сообщить пользователю об этом.
Отслеживать количество пользователей, добавивших ваш сайт в закладки, можно, например, с помощью сервиса Яндекс.Метрика ("Посещаемость" - "Конверсии").
Покопавшись, в итоге наашел красивое решение, работает во всех браузерах.
Добавить в избранное - скрипт для всех браузеров Добавить в избранное
Меняем Название Сайта и URL в 2х местах! Работает везде без ошибок)
Сделать стартовой - скрипт для IE Сделать стартовой
Меняем URL в 2х местах! Работает только в IE
JavaScript Ссылка "Добавить в избранное" для всех браузеров
Скрипт найден в google и доработан с учетом нынешних реалий, а именно - наличия уже 8й версии IE и браузера Chrome (который в оригинальном виде скриптом определялся как Netscape и ни каких действий в результате не производилось). Если браузер не поддерживает добавление в закладки через скрипт - пользователю будет показано сообщение о том что добавить в закладки можно нажатием 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;
}
Одно время на сайтах была популярна ссылка «Добавить сайт в избранное», при нажатии на которую адрес сайта заносился в закладки браузера. Впрочем, почему была? Периодически на сайтах подобная ссылка встречается до сих пор. Беда в том, что используемый для этой цели скрипт не работает во многих браузерах, поэтому его ценность близка к нулю. В HTML5 расширились возможности атрибута rel
тега
и теперь с его помощью можно легко добавлять в избранное любые сайты и отдельные страницы.
Достаточно к ссылке добавить rel="sidebar"
и при нажатии на нее откроется специальная панель в браузере для создания новой закладки. Пока значение sidebar
поддерживают два браузера - Firefox и Opera, остальные игнорируют атрибут rel
и переходят по указанной ссылке как обычно.
Чтобы расширить количество браузеров и добавить к ним IE, к ссылке также можно подключить небольшой скрипт. В итоге получится, что Firefox, Opera, Internet Explorer вызовут специальную панель, остальные браузеры перейдут по ссылке (пример 1).
Пример 1. Добавление в избранное
HTML5
IE
Cr
Op
Sa
Fx
Добавить в избранное
function addBookmark() {
if (document.all) window.external..ru");
}
Добавить в избранное
Как в итоге выглядит применение rel="sidebar"
? Результат зависит от браузера. Firefox к примеру открывает такое окно (рис. 1).
Рис. 1. Добавление в избранное в Firefox
В Opere вид несколько другой, но смысл аналогичный (рис. 2).
Рис. 2. Добавление в избранное в браузере Opera
У Internet Explorer самый лаконичный интерфейс (рис. 3).
Рис. 3. Добавление в избранное в браузере Internet Explorer
Пока использование атрибута rel
непривычно из-за его слабой поддержки браузерами, но потенциал у него огромный, а число значений постепенно расширяется. Так что включать в ссылки его надо.
Вот и все! Как это всё работает — Вы можете видеть (и попробовать) чуть ниже, а так же в сайдбаре этого сайта.
width="139">
