Do not speak Spanish? Read this post in English.

Jueves, 09 d abril d 2009.

Como crear un bookmarklet

Un Bookmarklet es un marcador del navegador (elemento de Favoritos en si usas Internet Explorer) que en vez de contener una dirección de internet contiene una llamada javascript.

Lo que hacemos con esta técnica es forzar que el navegador ejecute un codigo javascript que nosotros le indicamos cada vez que el usuario clicka en ese marcador.

Esto puede ser usado de forma personal para todo: cambiar el DOM, los estilos de la web, buscar dentro del documento, etc... pero para lo que más nos sirve, como desarrolladores web es para ofrecer la posibilidad de enviar a nuestra página la url o datos de lo que está viendo el usuario.

Esta técnica es muy usada por agregadores o redes de marcadores sociales para facilitar la vida al usuario capturando la página que está viendo y enviandola directamente a la url del site que debe recogerla.

La forma de hacer este tipo de bookmarklets es muy sencilla:

javascript:(
  function(){
    // Capturamos la url que está viendo el usuario
    url = window.location.href;
    // Y dirigimos al usuario a nuestro dominio enviando la url
    window.location = "http://www.midominio.com/?url=" + url;
  }
)()

Esto como tenemos que ponerlo en un link, y debe ocupar una única linea, quedará...

javascript:(function(){window.location = "http://www.midominio.com/?url=" + window.location.href;})()

El problema, a partir de aquí, es ofrecer este link a los usuarios ya que no podemos esperar que creen manualmente un marcador con un código javascript incrustado.

Para ello la solución más usada es incluir un link en tu página que contenga el bookmarklet e indicar al usuario que lo arrastre hasta su barra de navegación. Esto será interpretado por la mayoría de los navegadores como que el usuario quiere crear un marcador con el destino de ese link y el bookmarklet se creará.

<p>Arrastra este link hasta tu barra de navegación...</p>
<p>
  <a href="javascript:(function(){window.location = "http://www.midominio.com/?urlToSubmit=" + window.location.href;})()">Enviar Url a midominio.com</a>
</p>

Temas Relacionados: jquery tutoriales

Autor:

Anímate y deja tu comentario

Esto son experimentos, no preguntes ;) prueba metadescription Prueba title