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

Question

Je suis en train de construire un site web en utilisant Drupal. Sur l'en-tête de chaque page, je souhaite avoir une seule image (conçue par moi-même) qui servirait de bouton "Ajouter aux favoris" personnalisé. En cliquant sur l'image, l'URL du site web devrait être ajoutée 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 à ce sujet en ligne. Je suppose que Javascript devrait faire l'affaire mais je n'ai pas beaucoup d'expérience en Javascript :) donc j'ai besoin de votre aide!

Answer 1

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('Appuyez sur ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D pour mettre en signet cette page.');
    }
  });
});

Mettre en signet cette page

Answer 2

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

    $(function() {
        $("#bookmarkme").click(function() {
            // Firefox Bookmark de Mozilla
            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('Appuyez sur ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Commande/Cmd' : 'CTRL') + ' + D pour mettre en signet cette page.');
            }
        });
    });

Answer 3

  if (window.sidebar) { // Mozilla Firefox Marque-pages
     window.sidebar.addPanel(document.title,location.href,"");

Cela ajoute le marque-page mais dans la barre latérale.

Answer 4

J'ai rencontré des problèmes avec rel="sidebar". lorsque je l'ajoute dans la balise de lien, le signet fonctionnera sur FF mais s'arrêtera de fonctionner dans d'autres navigateurs. donc j'ai résolu cela en ajoutant rel="sidebar" dynamiquement par du code :

jQuery('.bookmarkMeLink').click(function() {
    if (window.sidebar && window.sidebar.addPanel) { 
        // Signet Mozilla Firefox
        window.sidebar.addPanel(document.title,window.location.href,'');
    }
    else if(window.sidebar && jQuery.browser.mozilla){
        //pour d'autres versions de FF ajoutez rel="sidebar" au lien comme ceci:
        //Marquer cette page
        jQuery(this).attr('rel', 'sidebar');
    }
    else if(window.external && ('AddFavorite' in window.external)) { 
        // Favori IE
        window.external.AddFavorite(location.href,document.title); 
    } else if(window.opera && window.print) { 
        // Liste de favoris Opera
        this.title=document.title;
        return true;
    } else { 
        // webkit - safari/chrome
        alert('Appuyez sur ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Commande/Cmd' : 'CTRL') + ' + D pour marquer cette page.');

    }
});

Answer 5

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

Essayer de mettre de l'ordre :

Tout fonctionne - sauf la fonction de signet de Firefox. pour une raison quelconque, 'window.sidebar.addPanel' n'est pas une fonction pour le débogueur, bien qu'elle fonctionne très bien.

Le problème est qu'il prend ses valeurs à partir de la balise d'appel : le titre en tant que nom du signet et href comme adresse du signet. voici donc mon code :

Javascript :

$("#bookmarkme").click(function () {
  var url = 'http://' + location.host; // je suis dans une sous-page et je signale la page d'accueil
  var name = "Page d'accueil de Snir";

  if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1){ //chrome
    alert("Pour ajouter un signet, allez sur la page d'accueil et appuyez sur " 
        + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 
            'Command/Cmd' : 'CTRL') + "+D.")
  } 
  else if (window.sidebar) { // Mozilla Firefox Bookmark
    //important pour firefox pour ajouter des signets - n'oubliez pas de cocher la case à cocher dans le popup
    $(this).attr('rel', 'sidebar');
    //configurez les attributs appropriés
    $(this).attr('href', url);
    $(this).attr('title', name);

    //ajouter un signet :
    //  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 :

[Signaler cette page](# "signaler cette page")

---

Dans internet explorer, il y a une différence entre 'addFavorite' : [..](javascript:window.external.addFavorite('http://tiny.cc/snir','site de snir')) et 'Ajouter aux favoris' : ...

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

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