Como traduzir textos do seu site usando a API AJAX de Idiomas do Google

Como traduzir textos do seu site usando a API AJAX de Idiomas do Google

Aqui vai uma boa idéia para quem gostaria de disponibilizar seus artigos, textos e páginas em outros idiomas mas não quer ter que criar uma outra versão do seu site para isso. O Google disponibiliza uma API do seu sistema de tradução que usa apenas JavaScript e é extremamente fácil de usar em qualquer página. A seguir um exemplo de como utilizá-la.

Infelizmente, a API de traduções v1.0 foi descontinuada pelo Google. Segundo a empresa, a decisão de encerrar o suporte a ela foi causada por excessivos abusos no seu uso por parte de alguns usuàrios. Como alternativa, a companhia encoraja o uso do Google Website Translator

Importando a API

A API de Idiomas oferecida pelo Google é muito fácil de usar e pode ser importada diretamente dos servidores da empresa, o que permite que você a utilize sem precisar copiar nenhum arquivo para o seu próprio servidor. Além disso, importar a API diretamente do Google garante que você estará sempre usando a sua versão mais atualizada. Para incluí-la na sua página basta incluir a chamada para o endereço de APIs do Google e então carregar a API de Idiomas:


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

</script>

Criando a função

A função que criaremos para fazer a tradução utilizará duas das funções fornecidas pela API de Idiomas. A primeira, google.language.detect, detecta o idioma original de um bloco de texto e a segunda, google.language.translate, traduz um bloco de texto do seu idioma original para outro. Nossa função então tem 3 passos principais:

1Detecta o idioma do texto que queremos traduzir;
2Traduz o texto para o idioma que desejamos;
3Insere a tradução na página ou substitui o texto original;

O código completo da função:


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

function traduzir(original, traduzida, idioma) {

	var text = document.getElementById(original).innerHTML; //div com o texto original
	var translated = document.getElementById(traduzida); //div que receberá o texto traduzido

	google.language.detect(text, function(result) { //detecta o idioma do texto original
	if (!result.error && result.language) {
	google.language.translate(text, result.language, idioma, //traduz o texto
	function(result) {
	if (result.translation) {
	translated.innerHTML = result.translation; //insere o txt traduzido na div escolhida
	} else {
	translated.innerHTML = "Não foi possível fazer a tradução"; //Caso haja erro na tradução
	}
	});
	} else {
	translated.innerHTML = "Não foi possível fazer a tradução"; //Caso haja erro na detecção
	}
	});

}

</script>

Perceba que a função tem três argumentos:
1° – original – Id da <div> que contémo texto a ser traduzido;
2° – traduzida – Id da <div> que receberá a tradução;
3° – idioma – Código do idioma para qual o texto será traduzido. Veja a lista aqui.

O HTML

Tudo o que você precisa no seu código HTML é que o texto esteja dentro de uma <div> com um id específico e um botão que execute a função de tradução. Ou seja, se o seu HTML já está pronto, basta colocar uma <div> envolvendo o texto que vai ser traduzido e atribuir um id a ela. Veja abaixo o código para este exemplo:

<div id="texto_original">
<h3>Design</h3>
<p>JavaScript é uma linguagem de programação criada pela Netscape em 1995, que em princípio se chamava LiveScript, a Netscape após o sucesso inicial desta linguagem, recebe uma colaboração considerável da Sun, após esta colaboração, podemos dizer que o JavaScript é uma linguagem compatível com a linguagem Java, por esta razão, a semelhança dos nomes "JavaScript".</p>
<p>Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore (como um documento HTML), foi criado a partir desta linguagem um padrão ECMA, o ECMA-262, também conhecido como ECMAScript. Este padrão é seguido, por exemplo, pela linguagem ActionScript da Adobe.</p>
<p>Além de uso em navegadores processando páginas HTML dinâmicas, o JavaScript é hoje usado também na construção do navegador Mozilla, o qual oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em sua versão normal como navegador, sem a necessidade de nenhum software adicional), que incluem (e não apenas) um interpretador de Javascript, um comunicador Javascript  C++ e um interpretador de XUL, linguagem criada para definir a interface gráfica de aplicações.</p>
</div>
<p><a onClick="traduzir('texto_original','texto_original','en');" href="#" id="botao_traduzir">Traduzir o texto</a></p>

Considerações finais

Pronto, como você vê é muito simples e fácil de usar. Dê uma olhada na demonstração e baixe os arquivos desse exemplo para estudar e testar as suas próprias alterações. No exemplo você encontrará também algumas linhas CSS que usei para estilizar este exemplo mas que não são necessárias para o funcionamento da API, então se quiser pode retirá-las sem nenhum problema.

É importante saber que esta API ainda está em desenvolvimento, então muitas coisas novas ainda devem aparecer, assim como um pouco de instabilidade. Também é bom ter em mente que existe um limite da quantidade de texto que pode ser traduzida de cada vez. O Google promete aumentar este limite constantemente, hoje ele é de 5000 caracteres. No entanto, nos meus testes o máximo que consegui foram 1200 caracteres.

É claro que se você tem um site que fornece informações que dependem de traduções precisas, como documentos oficias ou jurídicos, onde uma simples palavra pode fazer toda a diferença, o ideal é fazer a tradução manualmente e criar uma versão separada do texto. Mas se tudo o que você precisa é fornecer uma versão minimamente inteligível do seu texto esta é uma ótima solução.

Infelizmente, a API de traduções v1.0 foi descontinuada pelo Google. Segundo a empresa, a decisão de encerrar o suporte a ela foi causada por excessivos abusos no seu uso por parte de alguns usuàrios. Como alternativa, a companhia encoraja o uso do Google Website Translator


Você gostou deste post?

  • http://Seuwebsite sara

    que legal

  • http://www.principaisdownloads.blogspot.com/ BR

    oi eu quero um codigo de html de tradução para eu coloca na minha barra de ferramentar que eu criei para traduzir qualquer pagina que não tiver em português ser tiver postar ai blz

  • http://www.iolardemartini.com.br Iolar Demartini

    Parabéns pelo tutorial esta solução e perfeita, ate hoje não avia achado uma solução bacana como esta.

    Abração.

  • Alexjunior Nogueira Alves

    Parabéns cara, excelente tutorial, consegui de prima implantar em minha aplicação.

    Abraço meu velho.

  • Alexjunior Nogueira Alves

    Parabéns cara, excelente tutorial, consegui de prima implantar em minha aplicação.

    Abraço meu velho.

  • Leandro Torneri

    Muito bacana a dica, nota 10. Parabéns pela ótima página!
    Abração,

  • Paixao Allan

    Olá Domênico! Parabéns pelo post, muito útil, bem explicado. Só não entendi como a div tem id “texto_original” e na função tem “(original)”. Você pode me explicar isso? obrigado!

  • http://www.facebook.com/profile.php?id=100000593890287 Stanley Gomes da Silva

    Parou de funcionar. :(