Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

How to include language translation for a web page

From Wiki
Jump to: navigation, search
Article Metadata
Created: Maveric (14 Dec 2010)
Last edited: hamishwillee (31 Jul 2012)



In this article we will check how to add page translation possibility for the user on your web page. To achieve this the Google Translation API will be called.

This example let's the user to select either by the language flag or from drop-down box, into which language the page should be translated via the Google JS Language API.


+Web browser +Code editor +Web site (or blog) that the page resides for translation

Example code

For this example we will create one html file with JavaScript included. If you have an existing web page you could edit it directly, on your host server.

We will start with defining two div sections for the html code.

Firstly, we will be needing one "div" section that will contain the actual content to be translated. This "div id" in our example would be called "story".

 <div id="story"></div>

Secondly, the translated content page content "div" section is required and we call it in this example as "translation".

 <div id="translation"></div>

After the "div" sections have been included, we are going to add the "head" section with including first the Google JS API.

<script type="text/javascript" src=""></script>

After this we continue with our actual JavaScript code part. Please check the comments within the code for details. As this example uses the Google loader, please be sure to check the general information of use for it here :

<script type="text/javascript">
// Google AJAX API initialization and loading
google.load("language", "1");
function changeLanguage(lang)
var source = document.getElementById("story").innerHTML;
var len = content.length;
var words = 500;
var sourcelang = "en";
// Limitation is 500 characters for a translation request
document.getElementById("translation").innerHTML = "";
for(i=0; i<=(len/words); i++) {
google.language.translate (source.substr(i*words, words),
"en", lang, function (result) {
if (!result.error) {
document.getElementById("translation").innerHTML = document.getElementById("translation").innerHTML + result.translation;
} }); }
// Set the div invisible containing the original language
document.getElementById("story").style.display = 'none';
return false;
// Rollback original language
function defaultLanguage() {
document.getElementById("story").style.display = 'block';
return false;

The following part adds the language selection drop down menu.

<a href="#" onclick="defaultLanguage();">Switch to English</a>
<select onchange="changeLanguage(this.options[this.selectedIndex].value);">
<option value="de">deutsch</option>
<option value="pt">português</option>
<option value="fr">français</option>
<option value="ja">japanese</option>
<option value="ar">arabic</option>
<option value="it">italiano</option>
<option value="ru">russian</option>
<option value="po">polski</option>
<option value="zh-CN">chinese</option>
<option value="es">spanish</option>
<option value="ko">korean</option>
<option value="nl">dutch</option>
<option value="hi">hindi</option>
<option value="el">english</option>
<option value="ro">româna(</option>

Tested on

Google Chrome, Mozilla Firefox 3.6.13

This page was last modified on 31 July 2012, at 07:26.
108 page views in the last 30 days.