Make Your Blog Speak More Languages

I speak and write English (Americanised English, for you Brits). Until this weekend, my blogs were all published in English, and in English only. Thanks to the Kaspersky fiasco of Friday (Kaspersky is a Russian product), however, I was motivated to correct that shortcoming.

This was, surprisingly, an easier task than I had anticipated. If you will examine the sidebar, you will observe my multi-lingual translator, courtesy of Google Translator. It provides on the fly translation of the currently displayed web page, and whatever web pages that are subsequently loaded from following any links. It provides translation from English, to any of (currently, as of 10/22/2008) 34 different languages. You can see the enumeration of the available languages below, in the code, or you can move the mouse over each flag, and check out the popup tags.

The translator applet code is surprisingly compact, and expandable with additional languages. It's well defined too - "<form ... > ... </form>" is the entire package. Stretch the browser window widely enough, so you can see all of the text, please. And be very careful of any gratuitous line breaks.

(Update 2008/12/18):There was a small coding error which I have removed from the code below, which you may wish to remove from your copy (if you have installed this on your blog) when convenient.

<form action="http://www.google.com/translate">

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

<!--

document.write ("<input name=u value="+location.href+" type=hidden>")

// -->

</script>

<noscript><input value="http://blogging.nitecruzr.net/" name="u" type="hidden"/></noscript>

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

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

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

<input onclick="this.form.langpair.value=this.value" title="Andorran / Catalan" value="en|ca" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-fM7vwhSI/AAAAAAAAHl0/ZoZkfhEb01M/s320/Andorra+-+Catalan+-+ad_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="العربية / Arabic" value="en|ar" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title=" България / Bulgaria" value="en|bg" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiXtQx-uLI/AAAAAAAAG6I/RuLPDhnFMXY/s320/Bulgaria+-+bg_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="中文（简体） / Chinese (Simplified)" value="en|zh-CN" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png" 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://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Hrvatska / Croatian" value="en|hr" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SMhVoigYF0I/AAAAAAAAG5s/naE3NObTVZs/s400/Croatia+-+hr_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Česká Republika / Czech Republic " value="en|cs" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SMiX9aMIL3I/AAAAAAAAG6o/4-RYadolKWQ/s320/Czech+Republic+-+cs_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Danmark / Denmark" value="en|da" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiX9nD1NZI/AAAAAAAAG6w/ZnIBEtLIHEw/s320/Denmark+-+da_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Suomi / Finnish" value="en|fi" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiZwsOFndI/AAAAAAAAG8w/VlBr_zN32q8/s320/Finland+-+fi_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Français / French" value="en|fr" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Deutsch / German" value="en|de" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Ελλάς / Greek" value="en|el" type="image" height="20" src="http://bp3.blogger.com/_pzC_7PLtN-0/R7CKOqA_bjI/AAAAAAAAA8A/7bmPVwaFDcQ/s320/Greek+Flag+36x24.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="ישראל / Hebrew" value="en|iw" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SP-fNBP-7LI/AAAAAAAAHmE/fJeA_Sbl9w4/s320/Israel+-+il_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Hindi / India" value="en|hi" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SMiYu9muwaI/AAAAAAAAG7Y/lO6YgNdyHM4/s320/India+-+hi_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Bahasa / Indonesian" value="en|id" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SP-fNKvGgZI/AAAAAAAAHl8/UESh2PimM5U/s320/Indonesia+-+id_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Italiano / Italian" value="en|it" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="日本語 / Japanese" value="en|ja" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="한국어 / Korean" value="en|ko" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Latvija / Latvian" value="en|lv" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-fNX2rCXI/AAAAAAAAHmM/1LRWqh7YQBA/s320/Latvia+-+lv_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Lietuvos / Lithuania" value="en|lt" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-fNrJizVI/AAAAAAAAHmU/kdaran4uffk/s320/Lithuania+-+lt_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Nederland / Dutch" value="en|nl" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SMiZWUAFSOI/AAAAAAAAG74/lsNT2NI_oFI/s320/Netherlands+-+nl_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Norge / Norwegian" value="en|no" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiZWYWSvEI/AAAAAAAAG8A/7sOoou7far0/s320/Norway+-+no_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Pilipinas / Philipines" value="en|tl" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-f7gyN2aI/AAAAAAAAHmc/x_LSaXlHtCs/s320/Pilipnas+-+ph_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Polska / Polish" value="en|pl" type="image" height="20" src="http://bp1.blogger.com/_pzC_7PLtN-0/R7CAvKA_bgI/AAAAAAAAA7o/pKLqrW8EpD4/s320/Polish+Flag+36x24.png" 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://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="România / Romanian" value="en|ro" type="image" height="20" src="http://bp2.blogger.com/_pzC_7PLtN-0/R7CAvaA_bhI/AAAAAAAAA7w/HTWQoR8M6lQ/s320/Romainian+Flag+36x24.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Русский / Russian" value="en|ru" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Србија / Serbia" value="en|sr" type="image" height="20" src="http://3.bp.blogspot.com/__v4nth5_ki0/SP-f7_imioI/AAAAAAAAHmk/ytbpoyJHbmo/s320/Serbia+-+si_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Slovenčina / Slovak" value="en|sk" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SP-f79KzfyI/AAAAAAAAHms/-I315jcpHN0/s320/Slovak+-+sk_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Slovenija / Slovenia" value="en|sl" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-f8P0fwiI/AAAAAAAAHm0/Lzeh8mXiWvE/s320/Slovenia+-+si_flag.png" 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://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Sverige / Swedish" value="en|sv" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SMiZwrYspyI/AAAAAAAAG8o/uVUWBAyZkVc/s320/Sweden+-+se_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="Україна / Ukraine" value="en|uk" type="image" height="20" src="http://3.bp.blogspot.com/__v4nth5_ki0/SP-f8Bg1AMI/AAAAAAAAHm8/b4jhQQPSvj4/s320/Ukraine+-+ua_flag.png" width="30" name="langpair"/>

<input onclick="this.form.langpair.value=this.value" title="tiếng Việt / Vietnam" value="en|vi" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-gZakjpuI/AAAAAAAAHnE/fwfNZkisDOA/s320/Vietnam+-+vn_flag.png" width="30" name="langpair"/>

</form>

<a href="http://blogging.nitecruzr.net/2008/02/make-your-blog-speak-more-languages.html"><span style="font-weight:bold;">What Are These?</span></a>

Each entry of the above appears modular. My hope is that, as Google continues developing its linguistic resources, additional languages will become available. Here, for instance, is the Arabic entry. Note that Arabic, being a language written right to left, requires a template that supports bi-directional text justification.

<input onclick="this.form.langpair.value=this.value" title="العربية / Arabic" value="en|ar"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png"
name="langpair" height="20" type="image" width="30">

This entry requires just 3 unique elements.

• When you hover the mouse over the flag, you see

  العربية / Arabic

• The definition of English to Arabic translation is

  en|ar

• The picture of the Arabic flag, resized to 30px x 20px, in 1600 pixels resolution, is

  http://photos1.blogger.com/x/blogger2/
  6075/564571464515337/1600/z/358406/gse_multipart12399.png

Each of the other language entries, similarly, require another corresponding 3 unique elements. The array of flags are universal language symbols, that are obvious to the inhabitants of the various countries, so they need no captions.

If you want your blog to reach the world, I can't think of an easier way to encourage that to happen.

• Add a new HTML / JavaScript gadget.
• Highlight, Copy, then Paste the code ("<form ... > ... </form>"), exactly as presented above, directly into the Content window in the new HTML / JavaScript gadget. Do not copy anything into Notepad, or any other word processor that might have trouble with the UTF-8 character set. The code above includes UTF-8 characters, in the Asian language labels - if you try to save anything as ANSI, you will get a warning, and possible code corruption.
• Make one simple change - correct the blog URL, to identify your blog (in this example, "myblog.blogspot.com").
  

  <noscript><input value="http://blogging.nitecruzr.net/" name="u" type="hidden"/></noscript>

  change to

  <noscript><input value="http://myblog.blogspot.com/" name="u" type="hidden"/></noscript>

• Save.
• Test, and admire, your new world ability.

It took me several hours to write (and rewrite) this. It took me 10 minutes to set up the gadget on this blog, and 5 minutes to add this to PChuck's Network.

Having said all of that, I will note that je parle un peu de francais, and yo hablo un poco de espanol. And briefly examining (5 minutes of each) various translated pages in those two languages, I can note what I will discretely call "oddities". Both PChuck's Network and The Real Blogger Status are techie blogs, and I will bet quite heavily that not all technical terms that I use will be properly translated. But this is a start.

And next, I will note that the setup described above translates from English into other languages. If your blog is written in, let's say, Spanish, you'll want to translate from Spanish to the other languages. Change "English to Spanish" to "Spanish to English", and replace "en|es" with "es|en" (and, change the flag). Similarly, change "English to French" to "Spanish to French", and replace "en|fr" with "es|fr".

Do similarly with the other language pairs, noting a possible limitation. I strongly doubt that Google Translator, right now, will support all language pairs in all "from" and "to" combinations, symmetrically. You will find this out by experimentation, as I have yet to find a referential document enumerating what language pairs are supported.

I've been asked to make it easier for folks who produce blogs not written in English (what country is "English" native in?), in that I should include an "English" flag, for their use. That's now a future project, so watch this space.

For a more detailed discussion about this exciting blog accessory, see Roberto's Report: Language Translator Set-up.

For the official Google Translated Language Pairs list, see Google Translate FAQ: Language Pairs. Be advised that my applet above won't always be 100% up to date; but if you spot a new language in the Google list, that isn't in my applet, and let me know, I'll do my best to add it.

>> Top