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);
})()

Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Favicons em links externos
Favicons em links externos
Mostrando favicons em links externos
Bloggermin
https://www.bloggermin.cashmore.com.br/2013/01/favicons-em-links-externos.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2013/01/favicons-em-links-externos.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar