Favicons em links externos

Mostrando favicons em links externos

Depois de ver um artigo em CSS-tricks onde expõe basicamente isto, ou seja, de exibir favicons em links externos, mas com jQuery e para toda a página (causando problemas suficientes com logotipos, etc), a função foi "refeita" para que possa ser usada no blogger, apenas nos artigos.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.


Tutorial

Para usar este truque, e que ele seja compatível com todos os navegadores deverá substituir em Modelo > Editar HTML <div class='post-body hentry-content'> por <article class='post-body' ...>, e sua correspondente de fechamento </div> por </article>. Caso não queira se preocupar com a aparência em versões do IE anteriores ao 9, use um código alternativo que poderá encontrar abaixo (não há necessidade de fazer essa mudança).

Você já está  visualizando o efeito neste blog ou pode vê-lo em um Fiddle próprio.

Código

Você deve colá-lo entre tags <script></script>, e depois colocá-lo acima de </head> ou de </body>:

(function(){
   function getDomain(url) {
      return url.match(/:\/\/(.[^\/\?]+)/)[1];
   }
   function forEach( collection, fn ){
       for (var i = 0, len = collection.length; i &lt; 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 sem transformar em array(matriz)
           Array.prototype.push.apply(links,post.getElementsByTagName('a') )
       })
       forEach(links, function(link){
           href = link.href;
           // Vemos que é um link externo (se ele começa com http e não neste domínio), e se isso não é uma imagem
           if( /^(http|\/\/)/.test(href) &amp;&amp; ! notInThisHost.test(href) &amp;&amp; ! /\.(jpe?g|png|gif)/i.test(href) &amp;&amp; (link.firstChild &amp;&amp; link.firstChild.tagName !== "IMG" )){
               // Nós usamos o favicon como plano de fundo e adicionamos um padding para visibilidade
               link.style.background = "url(http://" + getDomain(href) + "/favicon.ico) no-repeat 1px center"
               link.style.paddingLeft = "18px"
               link.style.backgroundSize = "16px"
           }
       })
   }
   // Executar a função após a conclusão do carregamento da página para não consumir recursos desnecessários durante o carregamento
   window.addEventListener ? window.addEventListener('load',externalFavicon,false): window.attachEvent('onload',externalFavicon)
})()

Com isso, encontramos os links externos e adicionamos seu favicon à esquerda.

Código alternativo

Se está interessado ao máximo reduzir a quantidade de código e não se importa com esse recurso para IE 7, podemos selecionar itens com querySelectorAll para reduzir uma boa parte do código e evitar fazer a mudança no html do modelo.

(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" )
              ){
               //Nós usamos o favicon como plano de fundo e adicionamos um padding para visibilidade
               //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);
})()