javascript - ¿Cómo agrego un botón o un enlace "Agregar a Favoritos" en mi sitio web?

jquery html

Question

Estoy construyendo un sitio web usando Drupal. En el encabezado de cada página quiero tener una sola imagen (personalizada diseñada por mí) que actuaría como un botón personalizado "Agregar a favoritos". Al hacer clic en la imagen, se debe agregar la URL del sitio web a los favoritos del navegador del usuario (marcadores). Esto debería funcionar para todos los navegadores, IE7 +, FF, Opera, Chrome. No pude encontrar mucha información para esto en línea. Supongo que javascript debería hacer el trabajo, pero no tengo mucha experiencia en Javascript :) ¡así que necesito tu ayuda!

Answer 1

Este código es la versión corregida de la respuesta 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>

Answer 2

He enfrentado algunos problemas con rel = "sidebar". cuando lo agregue en marcadores de etiquetas de enlace funcionará en FF pero dejará de funcionar en otro navegador. así que lo soluciono agregando rel = "sidebar" dynamic por código:

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.'');

    }
});

Answer 3

Versión 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>

Answer 4

Gracias a @Gert Grenander , @Alaa.Kh , y Ross Shanon

Tratando de hacer un poco de orden:

todo funciona, excepto la función de marcadores de Firefox. por alguna razón, ''window.sidebar.addPanel'' no es una función para el depurador, aunque funciona bien.

El problema es que toma sus valores de la etiqueta de llamada <a ..> : título como el nombre de marcador y href como la dirección de marcador. así que este es mi código:

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>

En Internet Explorer hay una diferencia entre ''addFavorite'': <a href="javascript:window.external.addFavorite(''http://tiny.cc/snir'',''snir-site'')">..</a> y ''AddFavorite'': <span onclick="window.external.AddFavorite(location.href, document.title);">..</span> .

ejemplo aquí: http://www.yourhtmlsource.com/javascript/addtofavorites.html

Importante, en Chrome no podemos agregar marcadores utilizando js ( aspnet-i ): http://www.codeproject.com/Questions/452899/How-to-add-bookmark-in-Google-Chrome-Opera-and-Saf

Answer 5

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

Agrega el marcador, pero en la barra lateral.