Delirios de un Informático

Google Translate Element con selector personalizado

Google pone a disposición de los programadores esta utilidad que permite realizar de un modo muy sencillo traducciones de cualquier página web. Si se implementa tal cual se proporciona el código, se añadirá un selector de idiomas y un texto tipo Con la tecnología de Google y puede desentonar con el diseño o simplemente no gustar nada (como es mi caso). Por eso, he trasteado un poco para poder crear mi propio selector de idiomas.

Primero ha de añadirse la función un poco mejorada indicando el idioma base y la lista de posibles idiomas a los que puede traducirse:

function googleTranslateElementInit(force) {
	base = 'gl';
	if(force == true) {
		new google.translate.TranslateElement({
			pageLanguage: base,
			includedLanguages: 'ca,en,es,gl'
		}, 'google_translate_element');
	} else if(force == undefined) {
		if(window.location.href.indexOf('#googtrans/') != -1) {
			googleTranslateElementInit(true);
		}
	} else {
		url = window.location.href.replace(/\#googtrans\/.+$/, '');
		window.location.href = url + '#googtrans/' + base + '/' + force;
		window.location.reload(true);
	}
}

Luego, se necesita incluir normalmente el archivo JavaScript que permite la traducción:

<script type="text/javascript" charset="utf-8" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Una vez incluido todo el JavaScript basta con llamar a la función con el idioma que se desee. Por ejemplo: googleTranslateElementInit('en');. La página se recargará y traducirá al idioma elegido, pudiendo pulsar el cualquiera de los otros idiomas….

5 comentarios en “Google Translate Element con selector personalizado”

Fazulas dice:

Interesante utilidad la probaré no la conocía.

Gerardo Hernandez dice:

hola buenas tardes, estoy revisando lo que hiciste aqui, lo he probado y efectivamente se refresca la pagina pero no traduce nada en ningun idioma seleccionado, quisiera saber si me puedes ayudar, he copiado y pegado el codigo exacto como lo explicas aqui..

admin dice:

Gerardo, ¿tienes algún error de JavaScript?

Alan Patrick dice:

que buen codigo, me funciono muy bien, pero una pregunta sabes como desaparecer el spam de publicidad de google q aparece al momento de traducir.

admin dice:

Dudo que sea posible, a menos que lo tapes con un

y un poco de css