Como realçar links externos e abri-los em uma nova janela

Você já reparou que na Wikipédia todos os links para outras páginas aparecem destacados? Em alguns sites, a exemplo do Facebook, esses links são abertos sempre em novas janelas. Nessa dica breve, você aprenderá como tratar os links externos dessa maneira no seu site.

Milan Aryal em seu blog mostra diversas maneiras de conseguir isso: HTML, JS, jQuery, CSS… aqui vou mostrar como fiz neste site.

Meu site utiliza jQuery e Bootstrap (veja o post sobre Bootstrap). Eu simplesmente adicionei as seguintes linhas de código ao arquivo JavaScript que é carregado em todas as páginas do site:

1
2
3
$('div.blog-post a').filter(function() {
    return (this.hostname && (this.hostname != location.hostname));
}).append(' <span class="glyphicon glyphicon-new-window"></span>').attr('target', '_blank')

O que esse código basicamente faz é:

1. Usando jQuery, ele seleciona todos os links da postagem (eu não trato links na barra lateral, por exemplo);
2. Filtra os links que apontam para sites diferentes do meu;
3. Adiciona ao final do link (imediatamente antes da tag </a>) esse ícone do Glyphicons, que acompanha o Bootstrap; e
4. Define o valor do atributo target para _blank, fazendo com que esses links sejam abertos em novas janelas (ou abas, a depender do navegador).

Se você utiliza os ícones da Font Awesome, o código é bem parecido, só muda a classe da tag <span>:

1
2
3
$('div.blog-post a').filter(function() {
    return (this.hostname && (this.hostname != location.hostname));
}).append(' <span class="fa fa-external-link"></span>').attr('target', '_blank')

Se você não utiliza Glyphicons nem Font Awesome, ainda assim pode usar jQuery, CSS e um pequeno ícone (uma imagem de 16 x 16, por exemplo, no Google você encontra várias) para conseguir o mesmo efeito.

Adicione a seguinte regra ao estilo do seu site (no exemplo, a imagem se chama link_externo.png):

1
2
3
4
a.externo {
    background: url("link_externo.png") no-repeat scroll right center transparent;
    padding-right: 20px;
}

Via jQuery, adicione a classe externo aos links externos:

1
2
3
$('div.blog-post a').filter(function() {
    return (this.hostname && (this.hostname != location.hostname));
}).addClass('externo').attr('target', '_blank')

Pronto! A partir de agora, a imagem link_externo.png deve ser exibida à direita dos seus links externos e esses devem ser abertos em uma nova janela (ou aba).

Não vou explorar aqui todas as possibilidades. Já expus o que eu fiz e mais duas alternativas. Se nenhuma delas atende às suas necessidades, você pode tentar alguma das várias apresentadas nesse post muito interessante do Milan Aryal ou nessa página do CSS-Tricks. Esse site tem outra página na qual ainda mais opções são apresentadas.

Pra não dizer que só falei de flores

Vale observar que, de acordo com a maioria dos especialistas em usabilidade, abrir links em uma nova janela (ou aba) do navegador não é considerada uma boa prática.

Evite abrir várias janelas do navegador, se possível — impedir que os usuários utilizem o botão “Voltar” pode tornar suas experiências tão difíceis que normalmente não compensa qualquer benefício que você tente oferecer. Uma teoria comum a favor de abrir uma segunda janela é evitar que os usuários deixem seu site, mas ironicamente isso pode ter justamente o efeito oposto impedindo-os de voltar quando eles querem.

Second browser windows, Seven tricks that Web users don’t know

Portanto, usemos com bom senso!