Google Automated Translation Flag Widget

Google has just announced more improvements to their free translation services. To celebrate, we are releasing the best way to introduce Google Automated Translation to your website, using a self-updating drop-down list with a few featured languages.

Today is a good day. Google is now offering free translation services in 51 languages, that is, over 98% of all users. That is simply magnificent! The newest improvements, detailed in the blog entry, include text-to-speech (hear the translation spoken to you) and what they call “romanization” (i.e., show a phonetic transcription of the word). Also, Google Translate has been implemented into Google Docs a while back.

If you speak a language other than English, there’s a good chance that you can use Google Translation to translate virtually any webpage or document into your language. Yet less than 2 years ago, the automated translations situation was rather sad. Most systems had been licensed from Systran and were based on fixed rules. Google turned this microcosm upside down introducing statistics-based translations on a large scale. Though they are still mostly erroneous, in time and while being corrected they will improve.

Most state-of-the-art, commercial machine-translation systems in use today have been developed using a rule-based approach, and require a lot of work to define vocabularies and grammars. Our system takes a different approach: we feed the computer billions of words of text, both monolingual text in the target language, and aligned text consisting of examples of human translations between the languages. We then apply statistical learning techniques to build a translation model. (1)

As soon as Google had introduced statistical translations, Microsoft gave up Systran, adopting the Google model (2). Windows Live Translator explains quite well automated translations limitations (3):

automatic translation enables you to understand the gist of foreign language text, but is no substitute for a professional human translator if fluency is required

Here’s the video featured in today’s announcement:

People who are not fluent in English form the majority in this world, and they are learning to use the Internet at a faster pace than they learn English. Google has offered a small and unobtrusive widget you can use on a website in the form of a drop-down list. The problem with it is that it’s only textual, no flags are shown. Though some people (6 Hietaniemi) have argued that flags are no a good, my view is that one can feature a few languages by flags, giving the user the opportunity to translate in even more languages using the Google Translation widget. While a non-native speaker might overlook the Google Translate drop-down list, the flags should be more visible and instantly recognizable.

Widget code

Here is the code for the widget that can be seen on this page. You are free to use the code on your page. I will also explain how to further customize it. Unlike many other similar widget, this one has its flags hosted by Google. This means that the flags will not slow down your webpage and, if more people use and implement this widget, the flags will also be cached and load faster.

<!--
© Copyright 2008 ConsumedConsumer.org. Licensed under Creative Commons Canada 2.5 Attribution Only License - If you plan on copying this code, a link to http://www.ConsumedConsumer.org is respectfully requested. More info: http://www.alsosprachzamolxis.com/2008/05/cum-sa-ti-traduci-blogul-in-20-de-limbi.html Thank you.
-->
<form action="http://www.google.com/translate">
<script language="JavaScript">
<!--
document.write ("<input name=u value="+location.href+" type=hidden>")
// -->
</script><input value="en" name="hl" type="hidden"/><input value="UTF8" name="ie" type="hidden"/><input value="" name="langpair" type="hidden"/>
<center>
<input onclick="this.form.langpair.value=this.value" title="Româna / Romanian" value="en|ro" type="image" height="20" src="http://www.google.com/images/flags/ro_flag.gif" width="30" name="langpair2"/> <input onclick="this.form.langpair.value=this.value" title="Français / French" value="en|fr" type="image" height="20" src="http://www.google.com/images/flags/fr_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Português / Portuguese" value="en|pt" type="image" height="20" src="http://www.google.com/images/flags/pt_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Español / Spanish" value="en|es" type="image" height="20" src="http://www.google.com/images/flags/es_flag.gif" width="30" name="langpair"/>
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=ro&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js"></script>
<input onclick="this.form.langpair.value=this.value" title="العربية / Arabic" value="en|ar" type="image" height="20" src="http://www.google.com/images/flags/sa_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="中文(简体) / Chinese Simplified" value="en|zh-CN" type="image" height="20" src="http://www.google.com/images/flags/cn_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Русский / Russian" value="en|ru" type="image" height="20" src="http://www.google.com/images/flags/ru_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Deutsch / German" value="en|de" type="image" height="20" src="http://www.google.com/images/flags/de_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Hindi / Indian" value="en|hi" type="image" height="20" src="http://www.google.com/images/flags/in_flag.gif" width="30" name="langpair2"/>
<!--Originally published by zamolxis at http://www.AlsoSprachZamolxis.com/2008/05/cum-sa-ti-traduci-blogul-in-20-de-limbi.html and modified by ConsumedConsumer.org --></center></form>

In the code above, I am featuring several languages, based on where my visitors come from. You may have a different demographic, and as such, may choose to use different countries. The basic repeating flag unit is as follows:

<input onclick="this.form.langpair.value=this.value" title="Local / Language" value="en|Code" type="image" height="20" src="http://www.google.com/images/flags/Flag_flag.gif" width="30" name="langpair"/>

The substitutions are straightforward, just make sure you do not confuse the Language Code with the Flag Code, they are sometimes the same but mostly different. Also, sometimes you can use different flags for the same language. For instance, Portuguese is spoken in both Brazil and Portugal. The same is true for Romanian, which is spoken in Romania and Moldovan Republic and so on. It seems that Google is not hosting a flag for Catalan, even though it is offering an interface and translation into that language, so I would use the Spanish flag, or a locally hosted flag, if that is important for you.

Language Local Flag Code Gif
English jolly cup o’tea uk (us) en UK
Arabic العربية sa ar Saudi Arabia
Belorussian Беларусь by be Belorussia
Brunei Bahasa Malay bn ms Brunei
Bulgarian България bg bg Bulgaria
Catalan Andorran ad ca Andorra
Chinese Simplified 中文(简体) cn zh-CN China PR
Chinese Traditional 中文(繁体 tw zh-TW Taiwan
Croatian Hrvatska hr hr Croatia
Czech Česká Republika cz cs Czech
Danish Danmark dk da Denmark
Dutch Nederland nl nl Netherland
Estonian Eesti ee et Estonia
Filipino Pilipinas ph tl Filipino
Finnish Suomi fi fi Finland
French Français fr fr France
Galician Galicia *?? gl Galicia
German Deutsch de de Germany
Greek Ελλάς gr el Greece
Hebrew ישראל il iw Israel
Hungarian Magyarország hu hu Hungary
Icelandic Ísland is is Iceland
Indian Hindi in hi India
Indonesia Bahasa id id Indonesia
Italian Italiano it it Italy
Japanese 日本語 ja ja Japan
Korean 韓國語 kr ko South Korea
Latvian Latvija lv lv Latvia
Lithuanian Lietuvos lt lt Lithuania
Malaysian Malay my ms Malaysia
Maltese Maltese mt mt Malta
Norwegian Norge no no Norway
Polish Polska pl pl Poland
Portuguese Português pt pt Portugal
Romanian Româna ro ro Romania
Russian Русский ru ru Russia
Serbian Србија rs sr Serbia
Slovak Slovenčina sk sk Slovak
Slovenian Slovenija si sl Slovenia
South African Africaans za af South Africa
Spanish Español es es Spain
Swedish Sverige se sv Spain
Thai ประเทศไทย th th Thai
Turkish Türkiye tr tr Turkey
Ukrainian Україна ua uk Ukraine
Vietnamese tiếng Việt vn vi Vietnam

For example, if you would like to feature Vietnamese, you would substitute with the following results:

<input onclick="this.form.langpair.value=this.value" title="tiếng Việt / Vietnamese"  value="en|vi" type="image" height="20" src="http://www.google.com/images/flags/vn_flag.gif" width="30" name="langpair"/>

You could further customize it by changing the size of the flag, currently at 30x20. Other good pairs of width and height are 50x34 (original and larger), 75x51 (very large), 25x17 (smaller), 10x15 (barely visible).

Original in another language

If your website is, unlike this one, in a language other than English, you might want to consider featuring only the English language with a flag and in rest the regular Google widget. This is because translation between languages other than English is a 2-step process, routing through English. For example, to translate from German to Chinese, Google will first translate from German to English, then from English to Chinese. Since automated translation is usually ridden with errors, the 2-step process amplifies the errors, increasing the chances of a poor translation.

Even with English as one of the “end languages”, translation is not all that accurate, and this is perfectly illustrated by Translation Party (9). This site will translate some text back and forth until it no longer changes – i.e., it has been successively dumbed down until it no longer makes sense and can no longer be “stupified”. This state of grace is called “translation equilibrium”.

To adapt the above widget for your own website, you first have to change <input value="en" name="hl" type="hidden"/> which can be found at the top, right underneath the first document.write. Change “en” to the language code in the table above corresponding to your source language. You will also have to change for every language pair en with the same code. The quickest way to accomplish this is to load the text in Notepad, then do a Search & Replace for en. Below, you may find an example of what you get when you substitute “en” with “ro”:

<form action="http://www.google.com/translate"><!--Copiaza cu incredere codul asta. Un link spre alsosprachzamolxis.com nu este obligatoriu, dar este respectuos cerut. O explicatie pe larg poate fi gasita la http://www.alsosprachzamolxis.com/2008/10/11-limbi-in-plus-in-widgetul-de.html Singura conditie este sa lasi aceasta nota intacta, intrucat nu va fi vizibila.--> <script language="JavaScript"> <!-- document.write ("<input name=u value="+location.href+" type=hidden>") // --> </script>

<input value="en" name="hl" type="hidden"/>

<input value="UTF8" name="ie" type="hidden"/>

<input value="" name="langpair" type="hidden"/>

<center> <input onclick="this.form.langpair.value=this.value" title="Chinese Simplified" value="ro|zh-CN" type="image" height="20" src="http://www.google.com/images/flags/cn_flag.gif" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="English" value="ro|en" type="image" height="40" src="http://www.google.com/images/flags/uk_flag.gif" width="50" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Greek" value="ro|el" type="image" height="20" src="http://www.google.com/images/flags/gr_flag.gif" width="30" name="langpair"/>

<br/>

<input onclick="this.form.langpair.value=this.value" title="Hindu" value="ro|hi" type="image" height="20" src="http://www.google.com/images/flags/in_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="German" value="ro|de" type="image" height="20" src="http://www.google.com/images/flags/de_flag.gif" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Dutch" value="ro|nl" type="image" height="20" src="http://www.google.com/images/flags/nl_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Russian" value="ro|ru" type="image" height="20" src="http://www.google.com/images/flags/ru_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Bulgarian" value="ro|bg" type="image" height="20" src="http://www.google.com/images/flags/bg_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Polish" value="ro|pl" type="image" height="20" src="http://www.google.com/images/flags/pl_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Czech" value="ro|cs" type="image" height="20" src="http://www.google.com/images/flags/cz_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Croatian" value="ro|hr" type="image" height="20" src="http://www.google.com/images/flags/hr_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="French" value="ro|fr" type="image" height="20" src="http://www.google.com/images/flags/fr_flag.gif" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Italian" value="ro|it" type="image" height="20" src="http://www.google.com/images/flags/it_flag.gif" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Portuguese" value="ro|pt" type="image" height="20" src="http://www.google.com/images/flags/pt_flag.gif" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Spanish" value="ro|es" type="image" height="20" src="http://www.google.com/images/flags/es_flag.gif" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Arabic" value="ro|ar" type="image" height="20" src="http://www.google.com/images/flags/sa_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Japanese" value="ro|ja" type="image" height="20" src="http://www.google.com/images/flags/ja_flag.gif" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Korean" value="ro|ko" type="image" height="20" src="http://www.google.com/images/flags/kr_flag.gif" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Chinese (traditional)" value="en|zh-TW" type="image" height="20" src="http://www.google.com/images/flags/tw_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Danish" value="ro|da" type="image" height="20" src="http://www.google.com/images/flags/dk_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Finnish" value="ro|fi" type="image" height="20" src="http://www.google.com/images/flags/fi_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Norwegian" value="ro|no" type="image" height="20" src="http://www.google.com/images/flags/no_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Swedish" value="ro|sv" type="image" height="20" src="http://www.google.com/images/flags/se_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Catalan" value="ro|ca" type="image" height="20" src="http://www.google.com/images/flags/cl_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Filipino" value="ro|tl" type="image" height="20" src="http://www.google.com/images/flags/ph_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Hebrew" value="ro|iw" type="image" height="20" src="http://www.google.com/images/flags/il_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Indonesian" value="ro|id" type="image" height="20" src="http://www.google.com/images/flags/id_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Latvian" value="ro|lv" type="image" height="20" src="http://www.google.com/images/flags/lv_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Lithuanian" value="ro|lt" type="image" height="20" src="http://www.google.com/images/flags/lt_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Serbian" value="ro|sr" type="image" height="20" src="http://www.google.com/images/flags/rs_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Slovak" value="ro|sk" type="image" height="20" src="http://www.google.com/images/flags/sk_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Slovenian" value="ro|sl" type="image" height="20" src="http://www.google.com/images/flags/si_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Ukrainian" value="ro|uk" type="image" height="20" src="http://www.google.com/images/flags/ua_flag.gif" width="30" name="langpair2"/>

<input onclick="this.form.langpair.value=this.value" title="Vietnamese" value="ro|vi" type="image" height="20" src="http://www.google.com/images/flags/vn_flag.gif" width="30" name="langpair2"/> <h6>Fură <u><a href='http://www.alsosprachzamolxis.com/2008/10/11-limbi-in-plus-in-widgetul-de.html'>widget-ul Zamolxis Xl8!</a></u></h6><!--Copiaza cu incredere codul asta. Nu-i necesar sa lasi acest ultim link vizibil, el poate fi sters - este insa apreciat.-->

</center>

</form>

Don’t forget to include the Google Drop-down list code, changing “ro” with your website source language (you may also change the height and width as you see fit):

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=ro&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js"></script>

Alternatively, you can further customize the drop-down code by going to (7-google-lang-tools) in Sources / More info.

Installation tips

To use this in Blogger / Blogspot, go to Dashboard -> Layout -> Add Gadget -> HTML / JavaScript, then copy & paste the aforementioned code. You can give the widget whatever title you wish and you can move it anywhere. In Wordpress, in wp-admin (Dashboard) go to Design -> Theme Editor -> Templates -> r_sidebar.php (or l_sidebar.php, depending on which side you want it). Make sure you copy & paste without disturbing your divs – backup first!

Like the Romanian version, this code is licensed with a Creative Commons Attribution license – which means that you can modify it as you see fit as long as you leave the invisible comments inside unmodified. A visible link to this blog is appreciated, but not necessary.

If you are concerned that your secrets are vulnerable to the onslaught of translation bots, you can enclose them in class="notranslate", e.g., <span class='notranslate'>Whatever you don’t want translated</span>. You can even forbid Google to translate an entire page by using <meta name="google" value="notranslate"> in the header.

The more people use Google Translate and the more documents are fed into it, the better it becomes, so spread the news and the knowledge!

Sources / More info: 0-traduceri-zamolxis, 1-google-faq-trans, 2-msdn-ms-trans, 3-WL-trans, 4-gs-more-lang, 5-lang-tools, 6-hietaniemi-no-flags, 7-google-lang-tools, 8-google-blog-new, 9-translation-party, 10-five-common-gt-problems

image

Comments

R.M. said…
can we use the function 'detect language' and what is the code for that?
InBonobo said…
this widget is meant to be published on your own website / blog. you probably know the language you are using and chances are it doesn't vary. so you do not need google translate to "detect the language" for you, as you already know it, right?
I'll back again for sure, thanks for great article :D
It's quite handful with this widget.
denarosko said…
Fabulous! Thank you! Do you have Eritrian & Somali? Those are the only other 2 I need. Thanks!
InBonobo said…
Sorry, Google Translate does not provide those two languages.
denarosko said…
Thank you InBonobo for your reply. I recommend Google add those 2 languages as they are used in my city. Thanks!
InBonobo said…
Thank you for giving me the opportunity to reply :)
Rith said…
Could you please kindly add Cambodian ( Khmer ) Language to your post.
James said…
Free automated translation can be very useful when you want to guess the meaning of a very short text, i.e. a sentence written in a foreign language, but should never be used when it comes to translating a whole website! This kind of tools are not fully reliable and will not provide you with an accurate, top-quality translation! Not to mention the image you give of your business to potential foreign customers... The only way to get a good-quality translation is to use the services of a translation agency!

Popular posts from this blog