Gadget Google tradutor para blog ou sites

Mostrarei o script do Google tradutor que não simplesmente traduz uma página, mas, mais importante que isso, ele detecta o idioma do navegador do visitante e se a página de seu blog/site for em outro idioma ele abre um "banner" no topo oferecendo a tradução, e a tradução é instantânea, sem recarregar a pagina.
O banner de tradução é igual à imagem abaixo, e, eu uso o script aqui no blog, mas para quem tem o navegador em português não verá ele, não tem necessidade, por isso criei umas páginas com conteúdo em inglês, e você pode ver o script do google tradutor funcionando aqui


Clique para aumentar

A meu ver existe uma boa diferença entre utilizar este novo script do google para traduzir um site ou blog e aquele antigo onde na verdade o visitante era direcionado para uma página do google tradutor, apesar de ficar claro que está sendo traduzido por um serviço de terceiro, esse novo não muda a barra de endereços, e nem fica o iframe no topo da página.

No script o idioma de sua página deve se usado com uma abreviação(ou sigla) do idioma, no caso do português, pt, mas, tem uma opção de auto, no caso, detectaria o idioma do conteúdo e traduz(ou pergunta) a página para o idioma do navegador do visitante, a opção auto pode ser

pouco recomendada

, pois uma palavra "errada" pode fazer com que o google tradutor sugira tradução da página, tanto é que, na data deste post, o google retirou a opção auto da página onde gera/pega o código, mesmo assim ela funciona, mas só seria interessante para páginas onde muitas pessoas de vários países interagem, como chats, fóruns, etc.

Trecho do código referente ao idioma para página português:

pageLanguage: 'pt'
Para que traduza baseado no conteúdo, a linha acima deveria ser assim:
pageLanguage: 'auto'

Você pode ver uma página de exemplo de pageLanguage: 'auto' aqui, e verá que ela irá oferecer tradução mesmo estando em seu idioma(pt).
Um exemplo de página com script idioma(en) aqui, e como impedir a tradução de uma frase.

Além das configurações de linguagem, também tem a opção de mostrar ou não o gadget dentro da página(aquele que mostra as opções de linguagens)

Você pode obter o código do Google translate aqui ou aqui(veja qual tem mais/melhores opções) e, se escolher a opção Always(em linha) será exibido o gadget, se escolher a opção automatico ele não será exibido, mas de qualquer forma sua página terá a opção de traduzir quando um visitante com navegador em outro idioma acessar seu blog/site.

Script Google tradutor sem o gadget

O que acontecerá se escolher a opção automatic é a div google_translate_element usar um estilo Css display:none e isso faz com que o gadget fique oculto, se você observar o código abaixo, perceberá que deixei essa mesma linha do código em vermelho, é porque não é necessário para a tradução funcionar, um exemplo funcionando pode ser visto aqui, na minha opinião, se não está em uso, para que adicionar? São apenas mais alguns bytes inúteis na página.

Exemplo código para tradução sem o gadget

<!-- Google Translate Element -->
<div id="google_translate_element" style="display:none"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'pt',
gaTrack: true
}, 'google_translate_element');
};
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

, gaTrack: true é para estatística com google analytics, pode ser uma boa você saber quantas pessoas víram suas páginas em outro idioma.

Páginas com o gadget incluído

Tanto esse código abaixo quanto aquele apresentado acima vão mostrar o banner no topo quando detectado um navegador de idioma diferente de seu blog ou site, porém, este abaixo vai incluir o gadget dentro da página(imagem ao lado), a diferença do código abaixo é que ele tem o estilo Css display:block que faz ele ser exibido...

Exemplo código para tradução sem o gadget

<!-- Google Translate Element -->
<div id="google_translate_element" style="display:block"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'pt', gaTrack: true
}, 'google_translate_element');
};
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Colocar o google tradutor em site ou blog

O script vai no corpo do Html, isso é após <body> para quem faz suas páginas em Html, e, para quem usa o blogger, o local apropriado que é blogger.com >Design, >Elementos da página e >HTML/JavaScript(mais detalhes clique)

Você pode copiar e usar o código acima, nesta data ele está atualizado, mas é bom dar uma olhada no código fornecido pelo google tradutor para ver se o código apresentado lá não tem algo de novo.

Dicas e detalhes

Eu acabei me empolgando e criei varias páginas de exemplo, três delas, cujo endereço está aqui(final da página), são cópias de uma mesma página, com o script e sem ele, estas três páginas usei para testar o tempo de carregamento e, com o script do google tradutor a página não chegou a ficar nem um décimo de segundo mais lenta(para conexão discada), claro que isso não inclui o tempo de tradução, mas a tradução é rápida.

Outra coisa interessante é que a primeira vez que a pessoa acessa a página o banner para tradução pergunta se deseja traduzir e, se sim, ele memoriza a decisão do usuário para na próxima página começar a tradução instantaneamente.

Na data que postei o gadget google translate não funciona no Mozilla Firefox, nem no blog do translate. Pode ser um bug temporário do firefox ou do gadget, provavelmente vai ser resolvido.


Para quem entende um pouco de Html, dentro do Html da página o script pode ser colocado em local separado da div, se observar o código acima, perceberá que a div está em vermelho, a finalidade, e fica aqui uma dica, sempre que possível, colocar os scripts no final do Html, no caso de blogger, nos gadgets do rodapé, assim o conteúdo da página aparece mais rapidamente.

• Escolher um idioma para seu blog do blogger
• Enquete para blogs ou site
• Sites para criar formulário de contato grátis
• Logotipo online animado e grátis
• Colocar gadget do blogger no seu BlogSpot
• Gadget para blogs ou site