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 tidbits Para 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.

Você pode se interessar também por:

16 Responses to “Tradução de idiomas usando a API Ajax de idioma do Google”

1
Evandro Says:
August 18th, 2009 at 6:56 pm
Opa! Muito interessante, como a maioria dos posts do blog!

P.S: Como frequentador do blog, estava sentindo falta de novos posts
2
jardel correa * css Says:
August 19th, 2009 at 1:07 am
muito bom ! esse blog é meu dicionario de ideias!!
3
Kroska Says:
August 19th, 2009 at 2:22 am
boa Danilo, essa eu não tinha visto..

abraço
4
Chris Benseler Says:
August 20th, 2009 at 2:06 pm
Clap, clap, clap!
Simples e fácil!
5
Alexsandro Says:
August 20th, 2009 at 2:15 pm
Interessante, certa vez usei a “API” do babylon pra traduzir neste meu site http://tradutor.alexsandro.com.br
6
Sérgio Novelli Says:
August 25th, 2009 at 9:55 am
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.
7
Phelipp de Avila Says:
September 22nd, 2009 at 8:42 pm
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!
8
Phelipp de Avila Says:
September 22nd, 2009 at 8:44 pm
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’)
});
});
9
Phelipp de Avila Says:
September 25th, 2009 at 11:11 am
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á.
10
Danilo Says:
September 25th, 2009 at 10:38 pm
@Phelipp, grave um cookie, e sempre qndo rodar outra página, leia o cookie e se necessário traduza.
11
Phelipp de Avila Says:
September 26th, 2009 at 10:57 pm
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
12
Gerson Says:
October 1st, 2009 at 11:57 am
Meu caro é possível eu utilizar este script em uma página inteira?
13
Gerson Says:
October 19th, 2009 at 10:44 am
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?
14
andre Says:
November 18th, 2009 at 8:34 am
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
15
Junior Oliveira Says:
November 30th, 2009 at 1:11 pm
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
16
Marco Says:
January 14th, 2010 at 4:13 pm
Olá gostaria de saber como posso fazer os icones das linguas ficar acima da div e nao abaixo dela

TidBits