Internet

Informe aos seus leitores quando um link é externo

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.

Subscribe
Notify of
guest
1 Comentário
Newest
Oldest Most Voted
Inline Feedbacks
View all comments