web-dev-qa-db-fra.com

Comment ajouter un bouton ou un lien "Ajouter aux favoris" sur mon site Web?

Je construis un site web en utilisant Drupal. Sur l'en-tête de chaque page, je souhaite créer une seule image (personnalisée, conçue par moi), qui servirait de bouton "Ajouter aux favoris" personnalisé. En cliquant sur l'image, vous devez ajouter l'URL du site Web aux favoris du navigateur de l'utilisateur (signets). Cela devrait fonctionner pour tous les navigateurs, IE7 +, FF, Opera, Chrome . Je n'ai pas pu trouver beaucoup d'informations pour cela en ligne. Je suppose que javascript devrait faire l'affaire mais je n'ai pas beaucoup d'expérience en Javascript :), j'ai donc besoin de votre aide!

javascriptjqueryhtmlbookmarks
46
webmaniacgr

version jQuery

$(function() {
  $('#bookmarkme').click(function() {
    if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
      window.sidebar.addPanel(document.title, window.location.href, '');
    } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite
      window.external.AddFavorite(location.href, document.title);
    } else if (window.opera && window.print) { // Opera Hotlist
      this.title = document.title;
      return true;
    } else { // webkit - safari/chrome
      alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>

85
iambriansreed

Ce code est la version corrigée de la réponse de iambriansreed:

<script type="text/javascript">
    $(function() {
        $("#bookmarkme").click(function() {
            // Mozilla Firefox Bookmark
            if ('sidebar' in window && 'addPanel' in window.sidebar) { 
                window.sidebar.addPanel(location.href,document.title,"");
            } else if( /*@cc_on!@*/false) { // IE Favorite
                window.external.AddFavorite(location.href,document.title); 
            } else { // webkit - safari/chrome
                alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
            }
        });
    });
</script>
21
PHPst

J'ai eu quelques problèmes avec rel = "sidebar". lorsque je l'ajoute dans un lien, les signets fonctionnent sur FF mais ne fonctionnent plus dans un autre navigateur. donc je résous cela en ajoutant rel = "sidebar" dynamic by code:

jQuery('.bookmarkMeLink').click(function() {
    if (window.sidebar && window.sidebar.addPanel) { 
        // Mozilla Firefox Bookmark
        window.sidebar.addPanel(document.title,window.location.href,'');
    }
    else if(window.sidebar && jQuery.browser.mozilla){
        //for other version of FF add rel="sidebar" to link like this:
        //<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>
        jQuery(this).attr('rel', 'sidebar');
    }
    else if(window.external && ('AddFavorite' in window.external)) { 
        // IE Favorite
        window.external.AddFavorite(location.href,document.title); 
    } else if(window.opera && window.print) { 
        // Opera Hotlist
        this.title=document.title;
        return true;
    } else { 
        // webkit - safari/chrome
        alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');

    }
});
1
Alaa.Kh
  if (window.sidebar) { // Mozilla Firefox Bookmark
     window.sidebar.addPanel(document.title,location.href,"");

Il ajoute le signet mais dans la barre latérale.

1
Dima

Crédit à @Gert Grenander , @ Alaa.Kh , et Ross Shanon

Essayer de faire un peu d'ordre:

tout fonctionne - tout sauf la fonction de bookmarking de firefox ... pour une raison quelconque, le "window.sidebar.addPanel" n'est pas une fonction pour le débogueur, bien qu'il fonctionne correctement.

Le problème est qu’il tire ses valeurs de la balise <a ..> appelante: title en tant que nom du signet et href en tant qu’adresse du signet . C’est donc mon code:

javascript:

$("#bookmarkme").click(function () {
  var url = 'http://' + location.Host; // i'm in a sub-page and bookmarking the home page
  var name = "Snir's Homepage";

  if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1){ //chrome
    alert("In order to bookmark go to the homepage and press " 
        + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 
            'Command/Cmd' : 'CTRL') + "+D.")
  } 
  else if (window.sidebar) { // Mozilla Firefox Bookmark
    //important for firefox to add bookmarks - remember to check out the checkbox on the popup
    $(this).attr('rel', 'sidebar');
    //set the appropriate attributes
    $(this).attr('href', url);
    $(this).attr('title', name);

    //add bookmark:
    //  window.sidebar.addPanel(name, url, '');
    //  window.sidebar.addPanel(url, name, '');
    window.sidebar.addPanel('', '', '');
  } 
  else if (window.external) { // IE Favorite
        window.external.addFavorite(url, name);
  } 
  return;
});

html:

  <a id="bookmarkme" href="#" title="bookmark this page">Bookmark This Page</a>

Dans Internet Explorer, il existe une différence entre 'addFavorite': <a href="javascript:window.external.addFavorite('http://tiny.cc/snir','snir-site')">..</a> Et 'AddFavorite': <span onclick="window.external.AddFavorite(location.href, document.title);">..</span>.

exemple ici: http://www.yourhtmlsource.com/javascript/addtofavorites.html

Important: en chrome, nous ne pouvons pas ajouter de signets avec js ( aspnet-i ): http://www.codeproject.com/Questions/452899/How-to-add-bookmark-in -Google-Chrome-Opera-and-Saf

0
snir