Google Translate, Windows Live Translator and Yahoo! Babelfish have made it very easy for web publishers to add language translation capability into their web pages. Include a line of Javascript code anywhere in your blog template and visitors from other countries will be able to translate and read your content in their own native language. Simple.
While these solutions work, the only problem is that when people translate your web pages, everything gets reloaded under a different URL and this is not the best user experience. You may therefore want to try this AJAX based language translation where the content is translated inline in real-time while the visitor remains on your site.
Inline Translation powered by Google AJAX Language API
Watch this screencast video to see how inline translation works or go here for a live demo.
There are many advantages offered by Google AJAX Language Translation API vis-a-vis the regular online translation service of Google. You are in complete control of page elements that are to be translated, all existing links and sharing features on your web page stay intact and best of all, visitors get a better experience.
If you liked what you just saw, it is something very easy to implement and internally uses Google API that you may use on any site without any restrictions.
How Inline Language Translation Works ?
The basic idea is that when a visitors clicks a language flag or selects a new language from the drop down, we invoke the Google Translate API and replace (actually hide) the existing text with the translated text returned by the Google API. The cycle is repeated when another languages is selected.
Your visitors can also switch to the original language of the web page anytime.
Add Google AJAX Language API in your Website
If you are ready to take the plunge, here’s what you need to do to get this working on your site.
Step 1: Edit your blog template and place everything that you want to translate inside a <div> tag with some unique id. - let’s say <div id="article">….</div>
Step 2: Now place this code - <div id="translation"></div> - near the article div you configured in Step 1. The second div will actually house your translated text so you may add it just above or below the article div.
Step 3: And here’s the actual translation code. If this looks geeky, don’t worry too much - just copy-paste it inside the <head> tag of your blog template as it is.
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Initialize version 1.0 of Google AJAX API google.load("language", "1"); function translate(lang) { var source = document.getElementById("article").innerHTML; var len = content.length; // Google Language API accepts 500 characters per request var words = 500; // This is for English pages, you can change the // sourcelang variable for other languages var sourcelang = "en"; 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; } }); } // Hide the text written in the original language document.getElementById("article").style.display = 'none'; return false; } // Switch to the original language function original() { document.getElementById("translation").style.display='none'; document.getElementById("article").style.display = 'block'; return false; } </script>
Step 4: The last step is to include the translation flags or translation drop-down menu in your template.
I prefer having language names (see sidebar) instead of country flags because a flag may not always be the best representation of a language.
<a href="#" onclick="original();">Switch to English</a> <select onchange="translate(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">日本語</option> <option value="ar">عَرَبيْ</option> <option value="it">italiano</option> <option value="ru">pусский</option> <option value="po">polski</option> <option value="zh-CN">中文</option> <option value="es">español</option> <option value="ko">한국어</option> <option value="nl">nederlands</option> <option value="hi">हिन्दी </option> <option value="el">Ελληνική</option> <option value="ro">română</option> </select>
Find this article at: http://www.labnol.org/internet/website-translation-with-google-ajax-language-ap/4367/
web: http://www.labnol.org/ email: amit@labnol.org
Reader Comments
Hi,
I want visitors to my website to have the choice of translating my website to either bahasa, chinese or english, is there a way to do this?
Written by Roger on 09.02.08
Can you offer the code to the way you offer language translations on your blog’s sidebar?
Written by Amit Bhawani on 09.02.08
Hey this is really cool…Now my blog can be read by non-English speaking people…just by a click of one button. Awesome!
Do you know how to convert it into speech also at the click of button by using Ajax? So that even illiterate and blind people can listen to my blog.
thanks,
Gautam
Ps. Its a tip for your next article.
Written by Gautam on 09.02.08
Hi Gautam - try link for automatic text to speech - have fun!
Written by Ken Burgin on 09.02.08
The translation provided by Google or any other translation software are very crude. We do put those plug-ins in the site. But after they are translated, do they get translated exactly what it means? The answer is no. I checked with the Chinese speaking friend after translating an English page with Google translation, he started laughing as it did not make sense in many sentences. But they are better than nothing.
@Roger
I have the google translation plug-in for my blog. If you are interested you can check it.
Written by RD on 09.02.08
Great article; I’ve been looking for a solution like this for one of my clients’ websites. However, I noticed in the javascript that the Google Translate API will only allow 500 characters per request. Does this mean that only the first 500 characters within the <div> that you specify will be translated? Or am I overlooking something? There is no mention of this limitation in the article. If it’s true, it’s quite a “make-or-break” detail, as who would want to implement something that will only translate a portion of their content. Please let me know if you have an answer to this. Thanks in advance.
Written by Coby on 09.02.08
I forgot one other question that I had: Is there any way to structure the way this is coded so that each translation is passed into the address bar, so as to make the individual translation “spider-able” by search engines? As it stands right now, I doubt it would be, as each request simply appends a “#” to the end of the url. I’m sure there are other factors that make this solution less-than-optimal for search engine inclusion. I’m just wondering if there would be a way to pass something unique to the url so that you could at least submit a unique url to Google and the likes for each translated passage. For example: link or something similar. Any insights to this would be welcome.
Written by Coby on 09.02.08
Thanks! I was wondering how to this.
Written by Jomag Heredia on 09.02.08
I was really searching for something like this, as my blog is having Portuguese visitors too. I think I am gonna give it a try. Thanks anyway.
Written by zazo on 09.02.08
Language translation was very helpful when I was looking for some stuff on the web and found it on an italian website!
Written by Bharat Mudgal on 09.03.08
@Roger - Yes, Google Translate does support Chinese.
@Bhawani - Maybe I will release that library in future but not sure when.
@Gautam - Sitepal can do that using auto-language detection also available inside Google AJAX language API.
@RD - Right, machine translations are not as good as human translators but again, do we have a choice ?
@Coby - Yes, the Google API imposes that 500 word limit but the code provided above will work for text even longer than 500 words. We basically cut longer text into smaller chunks and call the Google Translate function for each of these chunks.
And yes, we can have permalinks with the language parameter inside the URL itself. That should be easy and will look something like this - abc.com?lang=it (for italian).
Written by Amit Agarwal on 09.03.08
Amit,
As far as my point of view is concerned there are two options available for webmasters-
1- By providing the translation widget to their visitors.
2- Webmaster make their web pages to be indexed in Google Search engine into different languages so that visitors directly reaches to your translated page.
Let’s take an example - say your homepage URL is-
link
for Latin it will be indexed in Google SE as-
link
I have one doubt over the second option-
Is this an ethical SEO practice or against Google TOS. There are many famous blog that uses the second option to triple the traffic. Blogs like-
Raymond.cc
mydigitallife.info
online-tech-tips.com
liewcf.com
and many more. Just wanted to know how the second option can be carried out. Can you provide us the step by step process to achieve the same.
–Chris
Written by Chris Martin on 09.03.08
Caution - three problems!
Translate to one language, fine. Translate to another language, fine. Translate back to English, fine. Try translating to any language after going back to English, blank content section! (Both Firefox 2 and Safari 3.1.1)
IE6 couldn’t open the demo page you have - operation aborted error.
Can’t see original and translation simultaneously, as is possible when mousing over text translated with the Google translation widget.
Bit more development needed before I swap.
Regards,
Katherine
Written by Katherine on 09.03.08
Same problem in Crome - not surprising given the new browser’s origins.
Written by Katherine on 09.03.08
Hi,
I want visitors to my website to have the choice of translating my website to bahasa, chinese & english, is there a way to do this? Is there any free downloads that does all three?
Written by Roger on 09.03.08
On clicking the links on your sidebar, a new tab is opened in firefox and there is no ajax effect…
Written by Rajesh on 09.03.08
@Chris - Having support for additional language doesn’t violate Google TOS in any way but you may want to have languages specific urls on a separate sub-domain (or even sub-directory) - something like it.labnol.org
@Katherine - Have used this on Firefox 3 and IE 8 but yes, will have to check why it throws that ‘operation aborted’ error in IE6.
Rajesh - I have not migrated to AJAX translation yet and the link on my site still use the regular Google Translate online engine.
Written by Amit Agarwal on 09.03.08
Nice post!
You should write something about your actual method too.
Written by DoZ on 09.05.08
I got a error when i use your above javascript. It turned out that the script had a error in it.
The error, which i think, is that there is “<” character in the script which must not be there.
ie, in the line
for(i=0; i<=(len/words); i++) {
the “<” after the “i” is the cause of the error.
Written by Ashik Dinesh on 09.08.08
There is an error in the function translate(lang)
Use Source.Length, not Content.Length, and it will work.
Other than that!
Awesome!
David
Written by David Brook on 09.16.08
Hi,
I have many visitors from Hungary , finland and some more where google language is not supporting translation , is there any script to sort out this problem ??
Written by Vivek on 10.09.08
Hey, I liked your script, but I was wanting to just translate paragraph by paragraph. So instead of translating a whole string of words, I want to take one paragraph from the top, have it translated on click PLUS have another paragraph say at the bottom of the page translated at the same time.
Your help would be appreciated in achieving this goal.
Thanks in advance
Written by Taylor on 10.29.08
It only translated 500 words when I tried this on my blog.
Written by na on 11.11.08