Localize Your Site Contents with Google Translate API

 

UPDATE:Google translate API v1 is not available any more and the update version of Google translate is a paid service. To use Google translate gadget for free, please visit: Localize Your Site Contents with Google Translate Gadget

 

Information shared on a website is public and anyone on the web can get the information. But it is not certain that everyone reaching your site is familiar with the language used in your website. You need not lose your visitors merely because of language conflict. Google comes with a very handle and simple Translator API tool, to translate your site’s contents using AJAX technology(without reloading the page) on changing into any language.

On adding the Google translator API, a dropdown selectbox will be added to your site with list of languages supported by Google Translator. First place the following ‘div’ in your page whereever you like to display the drop down.

 

Then we need to include jQuery plugin and jquery.translate plugin.

 

Following script adds the language dropdown and calls the translate function with the selected language parameter from the dropdown on change.

jQuery(function($){ //when DOM is ready
	jQuery.translate(function(){  //when the Google Language API is loaded
		jQuery.translate.ui('select', 'option')
			.appendTo('#translator') //insert the element to the page
			.change(function(){ //when selecting another language
				translateTo( $(this).val() );
				return false; //prevent default browser action
			 })
		 });
});

After completely loading the page, the API loads the translate script and on success it intializes the UI functions to create the language dropdown with the language list. Along with that a onChange event handler is also defined. Through with the translate function is called with the selected language value.

    function translateTo( destLang ){ //this can be declared in the global scope too if you need it somewhere else
	jQuery('body').translate( 'english', destLang, {   //translate from english to the selected language
		not: '.jq-translate-ui',  //by default the generated element has this className
		fromOriginal:true   //always translate from english (even after the page has been translated)
	 });
    }

You can set the the default language in which the current site has the contents. You can also specify the HTML elements, whose contents need not be translated with their css selector by passing those values in ‘not’ parameter. ‘formOriginal’ parameter makes sure that the contents are translated from the default language always, even after translating the contents into other language, if it was set TRUE.

By default Google will add all the language names in the dropdown in the alphabetic order, so the first language ‘Arabic’ will be displayed in the dropdown box even when the contents arre in the default language. So you can dynamically add text like ‘Please Select’ or ‘Select Language’ as the first element of the drop down to avoid confusions.

    jQuery('
Select Language
 
').prependTo("#translator select");

This works fine when you are using a single page website, if your website has more pages, then you need to translate the contents manually by changing the selected language in the dropdown. We can use cookies to store and reterive the language selected in the previous page. For that you need to download the jQuery Cookie plugin and include the script. To set the cookie for the selected language value add the following code inside the onChange event

    $.cookie("galang", $(this).val(), { expires : 10 });

Then to set the selected language in the dropdown from cookie value add the following line inside the jQuery.translate() function

    jQuery("#translator select").val($.cookie("galang"));
    translateTo($.cookie("galang"));

Thats it. Now your fullsite is localized to most of the familiar languages. Here is the full code.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script><script type="text/javascript" src="jquery.cookie.js"></script><script type="text/javascript">// <![CDATA[
	jQuery(function($){ //when DOM is ready
 
	jQuery.translate(function(){ //when the Google Language API is loaded
 
	function translateTo( destLang ){ //this can be declared in the global scope too if you need it somewhere else
 
	jQuery('body').translate( 'english', destLang, { //translate from english to the selected language
 
	not: '.jq-translate-ui',//by default the generated element has this className
 
	fromOriginal:true //always translate from english (even after the page has been translated)
 
	});
 
	}
 
	jQuery.translate.ui('select', 'option')
 
	 .appendTo('#translator') //insert the element to the page
 
	 .change(function(){   //when selecting another language
 
	     translateTo( $(this).val() );
 
	     jQuery.cookie("galang", $(this).val(), { expires : 10 });
 
	     return false; //prevent default browser action
 
	 });
 
	 jQuery('
<option value="">Select Language</option>
 
').prependTo("#translator select");
 
	jQuery("#translator select").val($.cookie("galang"));
 
	translateTo($.cookie("galang"));
 
	});
 
	});
// ]]></script>

Don’t forget to comment on the post. :)