Tradução de idiomas usando a API Ajax de idioma do Google

É um serviço relativamente novo, pouco usado, mas muito interessante.

A ferramenta de idiomas do Google, acredito que todo mundo já conhece. Porém pouca gente sabe que o Google oferece uma API em ajax para tradução.

E pra facilitar ainda mais, existe também um plugin de jQuery chamado jquery-translate que interage com a API do google, aí fica bem simples:

copy of tidbitsPara traduzir um texto basta chamar o node do html pelo seletor do jQuery e chamar a função translate:

	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="js/jquery-translate-1.3.9.min.js"></script>
	$(document).ready(function(){
		$('button#traduzir').click(function(){
			$('div#texto').translate('en')
		});
	});

No exemplo acima, quando clicarem no botão traduzir, irá traduzir todo o conteúdo da div id=”texto” para o inglês, a API do Google detecta automaticamente o idioma original.

Veja um demo abaixo que eu fiz:

Clique em uma das bandeiras abaixo do texto para traduzir para o idioma selecionado:

Quem quiser entender, deixei o exemplo disponível pra download.

26 thoughts on “Tradução de idiomas usando a API Ajax de idioma do Google

  1. Opa! Muito interessante, como a maioria dos posts do blog! ;)

    P.S: Como frequentador do blog, estava sentindo falta de novos posts ;)

  2. Eaê, Danilo!!
    Um amigo me indicou seu blog, mais especificamente este post.

    Gostei do conteúdo do blog, Parabéns!!!

    Essa tradução é muito bacana e muito útil!!

    Valew pela dica.
    Abraço.

  3. Olá Danilo, ótimo o blog. Parabéns!

    Com relação ao post:
    Adicionei o script ao meu site, porem, não sei como fazer para manter o idioma selecionado como padrão para que quando a pessoa clicar em outro link ela possa continuar na mesma lingua!

    Se puder me ajudar…

    Fico no aguardo e um Grande abraço!

  4. Esqueci de mandar meu código:

    $(document).ready(function(){
    $(‘a#traduzir1’).click(function(){
    $(‘div#site’).translate(‘pt’)
    });
    $(‘a#traduzir2’).click(function(){
    $(‘div#site’).translate(‘en’)
    });
    $(‘a#traduzir3’).click(function(){
    $(‘div#site’).translate(‘es’)
    });
    });


      

      

  5. Olá Danilo,

    Deixei um comentário outro dia pedindo dicas de como aprimorar o script postado acima para as necessidades que eu tenho.

    Ficaria grato se você pudesse me ajudar! Caso não possa por favor envie uma mensagem informando que não pode.

    Pois estou na esperança de que você pode me ajudar a resolver o problema.

    Obrigado desde já.

  6. Danilo,

    Obrigado pela dica deu tudo certo!
    Aproveito para divulgar e indicar mais um plugin para jquery.

    jQuery Cookie
    http://plugins.jquery.com/project/Cookie

    A minha pergunta me aproveitando só mais um pouco da sua boa vontade é:

    Existe uma forma mais rápida de execução desse método de tradução?

    Pois ela leva cerca de 5 a 10 segundos para traduzir todo o texto do site.

    Obrigado pela força.

    Grande abraço!

    Att. Phelipp de Avila

  7. Muito obrigado pela ajuda danilo mas tenho uma pergunta e se você puder me responder muito obrigado.

    Não tenho grandes conhecimentos neste tipo de programação, sendo assim já consegui instalar este tradutor mas não consegui posicionar as bandeiras no topo do site como faço isso?

  8. Ola,gostaria de fazer o seguinte …tipo assim antes de entrar na home page havera uma abertura onde tera as bandeiras dos paises gostari de saber como faço qu ao clikar na bandeira ele traduza o site por completo….

    grato

  9. Danilo,
    muito bom cara! parabens!
    foi muito facil, mesmo!
    com relação ao erro na tradução em portugues deve-se trocar o pt por pt-PT em arrIdioma.push(new Array(‘pt-PT’,’Português’,’Traduzir para português’,’Traduzindo’,’Erro ao traduzir’));

    e tbm em div.idiomas a.translate_pt-PT{ background: url(‘../img/idioma/pt.gif’) no-repeat; }
    para carregar o CSS correto.

    Outra coisa, quando vc esta com texto em portugues e clica novamente para traduzir em portugues esta dando um erro, vou da uma olhada melhor e qualquer coisa te dou um retorno, mais um vez muito obrigado cara.

    Junior Oliveira

  10. Olá…
    muito bom isso Danilo, parabéns aeeew =D

    Estou precisando da mesma função que o Phelipp Avila pediu aí em cima, que é armazenar em cookie o idioma escolhido pelo visitante para que quando ele entrar no site novamente, esteja o mesmo idioma que ele havia escolhido.
    O problema é que não tenho mínima idéia de como faz isso, já até dei uma pesquisada, mas não consigo fazer essa parada.

    Preciso muito de ajuda!

  11. Olá. Procurei bastante por algo parecido e acho que vai ser útil, mas seria ainda melhor se houvesse forma de posicionar as bandeiras onde bem se quisesse, como no topo da página, ou em um menu. Há como modificar o script para mudar a localização das bandeiras? Obrigado e parabéns.

  12. Ou melhor ainda, se houvesse como reconhecer o idioma padrão do usuário ao carregar o script e então abrir a página já traduzida! Isso sim seria bom!

  13. Parabéns e contribuo com uma dica:
    Geralmente resolvo meus problemas com umas pitadas de php.
    Crie coloque via GET cada abreviação e depois recupere com php –>

    a href=’#.php?lingua=en’

    depois crie uma variavel –>

    $lingua = @$_GET[‘lingua’];

    atribua no script da função –>

    ?php echo “$lingua”; ?

  14. Ola,gostaria de fazer o seguinte …tipo assim antes de entrar na home page havera uma abertura onde tera as bandeiras dos paises gostari de saber como faço qu ao clikar na bandeira ele traduza o site por completo….

  15. Esta ferramenta também usa Tradução de Google através de API: https://poeditor.com/. Eu tenho usado há algum tempo e percebi que é uma das melhores ferramentas de tradução que já usei.

  16. Ola… Bom eu consegui rodar uma vez, mas não entendi porque ele só dá erro agora. poderia explicar o que fazer por favor…
    Abraços,

Leave a Reply

Your email address will not be published. Required fields are marked *