Informe aos seus leitores quando um link é externo
Quinta-feira, 14 de Dezembro de 2006 - 23:13
Em todos os links do Tecnocracia que levam para um outro site vocês verão um ícone com uma setinha vermelha ao lado. Isso é para chamar a atenção do usuário quando um link é externo, não pertence ao próprio site e permite que o leitor opte em abrí-lo numa nova janela para continuar lendo o artigo.
Solução elegante
Existem algumas formas de fazer isso e eu vou dar as dicas de duas delas aqui.A primeira e mais cheia de estilo é utilizando CSS2, com seletor de atributos (condicionais). Dessa forma você pode fazer como o Henrique, no Revolução Etc que identifica links externos com o atributo rel. Dessa forma:
[a rel=”external” xhref=”http://siteexterno.com”]Clique[/a]
E na folha de estilos ele define o seguinte:
* [rel~=external] {
background:url(”external.gif”) right 2px no-repeat;
padding-right:13px;
}
O seletor de atributo com a condicional ~= faz uma comparação lógica, se o elemento contiver o parâmetro rel=”external”, atribua o estilo informado que no caso especifica o ícone como um background à direita e um padding para não o sobrepor com texto.
Você também pode fazer a condicional direto no parâmetro href, da seguinte maneira:
a[href ^=”http://”] {
background:url(”external.gif”) right 2px no-repeat;
padding-right:13px;
}
Dessa forma toda tag A que contiver o parâmetro HREF iniciado (^=) com http:// será considerado um link externo, independente de possuir ou não o parâmetro rel=”external”.
Solução limpa, elegante e funcional em quase todos os navegadores modernos. No IE6 não funciona. E como o famigerado browser da MS ainda é maioria no mercado, a segunda dica vai funcionar em qualquer navegador.
Utilizando classes CSS para identificar links externos
Ok, você já deve ter deduzido pelo próprio subtítulo e baseando-se na solução inicial, percebeu que o código CSS ficaria dessa maneira:
a.external {
background:url(”external.gif”) right 2px no-repeat;
padding-right:13px;
}
Simples e eficiente. Qualquer link externo será marcado com o parâmetro class=”external” e pronto.
Para não editar manualmente todos os links de seu blog, se você usa o Wordpress como gerenciador, eu sugiro o plugin Identify External Links com umas pequenas alterações para dar um ‘gás’.
Primeiro, edite-o para mudar o nome da classe de “extlink” para “external” caso queira utilizar o css de exemplo acima. Caso contrário, basta definir sua classe com nome de “extlink”.
Segundo. Edite as linhas 32 e 34 para efetuar as seguintes alterações:
32: Altere o comando que captura uma url, identificando se é um link interno ou externo para o seguinte:
preg_match(”/^(http:|https:|ftp:|ftps:)?(?:\/\/)?([^\/]+)/i”, $uri, $matches);
A linha original só captura links iniciados em http://, excluindo da regras os links seguros e de ftp. A linha acima é uma expressão regular, muito útil quando se precisa identificar padrões, formatos, separar partes de um todo, etc. Depois faço um artigo só sobre isso.
34: Altere o comando que captura o domínio, para fazê-lo entender os domínios brasileiros e subdominios:
preg_match(”/[^\.\/]+(?:\.[^\.\/]+){0,2}$/”, $host, $matches);
A função original deixava de fora os “.com.br” e tantos outros que possuem nível primário duplo.
Faça o upload e ative seu plugin. Se você já tiver definido o CSS em sua folha de estilos, começará a ver ícones enchendo seus artigos sem precisar alterar nenhum manualmente.
É isso! Bom proveito.
Compare preços de: MP3, iPod, celulares, notebooks, câmeras no Buscapé.
Textos Relacionados
Comentar
Feeds
TrackBack
Andre Viana
15 de Dezembro de 2006 - 14:04
legal seria usar o extarnal, com um gif, para todos os links externos do site, mais eu acho que fugiria uma pouco do layout de algumas paginas.