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

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

Делаем кнопку добавить в избранное

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

Наше решение будет подсказывать браузеру что сайт хотят добавить в избранное, а тем браузерам, которые этого не смогут понять, будет выводиться сообщение типа : Нажмите 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;
}

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>

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

Кнопка должна быть именно с такими параметрами, как на примере выше, но вы можете добавить ей класс, чтобы ее стилизировать.

Вот в принципе и все. Как видите все не так сложно.
Если у вас есть какие-нибудь вопросы, пишите в комментарии, я обязательно вам отвечу

Чтобы не пропустить выход новых статей, подписывайтесь на наш telegram-канал

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

Делаем кнопку добавить в избранное

Плавное увеличение изображения при наведении на чистом CSS3

Анимированное появление блоков для Landing Page

Как сделать плавающий sidebar (сайдбар) на сайте

2 comments

Оставьте ответ Cancel Reply

Делаем кнопку добавить в избранное

Поделиться

Похожие посты

2 comments

Оставьте ответ Cancel Reply