Tras ver una entrada en CSS-tricks donde se exponía básicamente esto, pero con jQuery y para toda la página (lo que causa bastantes problemas con logos,etc), he “rehecho” la función para que se pueda usar viablemente en blogger sólo en los artículos.

Para usar este truco y que sea compatible con todos los navegadores tendréis que reemplazar en Diseño > Edición de HTML <div class='post-body hentry-content'> con <article class='post-body' ...>, y su correspondiente cierre </div> por </article>. Si no queréis molestaros por cómo se ve en versiones de IE anteriores a la 9 usad un código alternativo que podréis encontrar más abajo (no hace falta realizar este cambio).

El efecto lo podéis ver en un Fiddle propio, o en este mismo blog haciendo click aquí

Actualización: Lo estoy usando ahora mismo experimentalmente. Si por alguna razón lo dejo de usar, podéis seguir haciendo click en el enlace para ver el efecto.

Actualización 10/09/2012: Sigo usándolo en el blog, pero si dejo de usarlo y queréis verlo no funcionará el botón. Usad el fiddle.

El código

Tenéis que pegarlo entre etiquetas <script></script>, bien sea encima de </head> o encima de </body>:

(function(){
   function getDomain(url) {
      return url.match(/:\/\/(.[^\/\?]+)/)[1];
   }
   function forEach( collection, fn ){
       for (var i = 0, len = collection.length; i < len ; i++){
          fn.call( null, collection[i], i)
       }
   }
   function externalFavicon(){
      var posts = document.getElementsByTagName('article'),
          links = [],
          notInThisHost = new RegExp(window.location.hostname),
          href;
       forEach(posts,function(post){
           // Concatenar (imposible usar [].slice.call por IE)
           forEach(post.getElementsByTagName('a'), function(link){links.push(link)})
       })
       // Ejecutamos la "magia"
       forEach(links, function(link){
           href = link.href;
           // Comprobamos que es un link externo (si empieza por http y no está en este dominio), y si no tiene o apunta a una imagen
           if( /^(http|\/\/)/.test(href) 
               && ! notInThisHost.test(href) 
               && ! /\.(jpe?g|png|gif)/i.test(href) 
               && (link.firstChild 
                   && link.firstChild.tagName !== "IMG" )
              ){
               // Usamos el favicon como fondo y añadimos un padding para visibilidad
               //link.style.background = "url(http://" + getDomain(href) +
               //    "/favicon.ico) no-repeat 1px center";
               link.style.background = "url(http://www.google.com/s2/favicons?domain=" +
                   getDomain(href) +
               ") no-repeat 1px center";
               link.style.backgroundSize = "16px"
               link.style.paddingLeft = "18px"
           }
       })
   }
   // Ejecutamos la función tras terminar la carga de la página para que no consuma recursos innecesarios durante la carga
   window.addEventListener ? 
      window.addEventListener('load',externalFavicon,false): 
      window.attachEvent('onload',externalFavicon)
})()

Con esto hallamos los links externos que no lleven a imágenes, y añadimos su favicon a la izquierda.

Código alternativo

Si os interesa al máximo reducir vuestra cantidad de código y no os importa esta característica para IE 7, podemos seleccionar los elementos con querySelectorAll para reducir un buen pedazo de código y evitar hacer el cambio en el html de la plantilla:

(function(){
   if( ! document.querySelectorAll ){return;}
   function getDomain(url) {
      return url.match(/:\/\/(.[^\/\?]+)/)[1];
   }
   function forEach( collection, fn ){
       for (var i = 0, len = collection.length; i < len ; i++){
          fn.call( null, collection[i], i)
       }
   }
   function externalFavicon(){
      var links = document.querySelectorAll('.post-body a'),
          notInThisHost = new RegExp(window.location.hostname),
          href;
       forEach(links, function(link){
           href = link.href;
           if( /^(http|\/\/)/.test(href) 
               && ! notInThisHost.test(href) 
               && ! /\.(jpe?g|png|gif)/i.test(href) 
               && (link.firstChild 
                   && link.firstChild.tagName !== "IMG" )
              ){
               // Usamos el favicon como fondo y añadimos un padding para visibilidad
               //link.style.background = "url(http://" + getDomain(href) +
               //    "/favicon.ico) no-repeat 1px center";
               link.style.background = "url(http://www.google.com/s2/favicons?domain=" +
                   getDomain(href) +
               ") no-repeat 1px center";
               link.style.backgroundSize = "16px"
               link.style.paddingLeft = "18px"
           }
       })
   }
   window.addEventListener('load',externalFavicon,false);
})()

5 pensamientos en “Favicons en los links externos

  1. Imagen de Renzo el dijo:

    Hola Emilio, espero te encuentres muy bien. Resulta que al guardar el código alternativo me tira un error y el símbolo a que hace mención es: “<" que esta entre i y Len.

    for (var i = 0, len = collection.length; i < len ; i++){

    Que solucion tendria este codigo para no tirar error al momento de guardar. Y ¿Como se usa? Es tan igual que escribir una palabra y ponerle link desde desde el editor de entradas o hay que hacerlo manual.

    Saludos y gracias por todo, sigue escribiendo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.