Add Language Translation to your Website - Tutorial

How to make foreign visitors love your website even if they don't understand your language ? Add Language Translation to website and blogs - This is a simple Step by step guide to provide instant language translation in your website. Your site visitors can translate any webpage by clicking on the corresponding country flag and read your website in their native language.

Machine translation in blogs or websites is probably the easiest way of helping readers from different countries communicate. Even if a blogger writes in Spanish and a reader speaks English, or vice versa, both of them can still understand each other.

Today, people are blogging in multiple languages to create a conversation with readers outside the English Speaking blogosphere. Free language translation tools let bloggers post messages simultaneously in English, German, French, Spanish and other languages.

The most popular free Web-based language translation tools are offered by Google, AltaVista Babelfish and WorldLingo. Using these services, web audiences who speak English, French, Spanish, German, Italian, Portuguese, Dutch, Greek, Chinese (Traditional and Simplified), Japanese, Korean or Russian will be able to translate websites into their native language.

With over 65% of web users speaking a language other than English, providing the means of translating websites with English content to another language is very essential. Your multilingual website becomes more accessible and popular if users can translate your website content into their native language.

There are two methods to let your visitors easily translate your website:

Method ONE: All these services provide a translation box. To translate a webpage, you simply type in the URL of the website, choose the source and target language, and click the Translate button. [World Lingo, Google Translate, BabelFish Translate]

Method TWO: Here we will integrate the translation form in the website itself without requiring the user to visit any external page for translation. Your web visitors will be able to translate foreign language content into their native language by simply clicking the country flag icon. (Notice the top right corner of this page to see the various country flag icons). Simply cut and paste the code into your pages.

1. Alta Vista Babel Fish:
Babel Fish Translate is available in English, German, Spanish, French, Italian and Portuguese. Just add the following single line of JavaScript code to your website.

<br /><script language="JavaScript1.2" src="http://www.altavista.com/static/scripts/translate_engl.js"></script>

2. Google Translate: Available in English, German, Spanish, French, Italian, Portuguese, Japanese, Korean and Chinese (Simplified). Remember to replace the value of variable "u" with the URL of your website. The translated pages can even be bookmarked.

<table width="320"> <tr> <td>&nbsp;</td> <form action="http://www.google.com/translate" target="_blank"> <td width="40"><script language="JavaScript"> <!-- document.write ("<input name=u value="+location.href+" type=hidden>") // --> </script> <noscript> <input name="u" value="http://labnol.blogspot.com" type="hidden" /> </noscript> <input name="hl" value="en" type="hidden"> <input name="ie" value="UTF8" type="hidden"> <input name="langpair" value="" type="hidden"> <input name="langpair" value="en|fr" title="Fran&#231;ais/French" src="http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30"> </td> <td width="40"><input name="langpair" value="en|de" title="Deutsch/German" src="http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30"> </td> <td width="40"><input name="langpair" value="en|it" title="Italiano/Italian" src="http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30"> </td> <td width="40"><input name="langpair" value="en|pt" title="Portugu&#234;s/Portuguese" src="http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30"> </td> <td width="40"><input name="langpair" value="en|es" title="Espa&#241;ol/Spanish" src="http://photos1.blogger.com/img/43/1633/320/13539946_2fabed0dbf.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30"> </td> <td width="40"><input name="langpair" value="en|ja" title="&#26085;&#26412;&#35486;/Japanese" src="http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30"> </td> <td width="40"><input name="langpair" value="en|ko" title="&#54620;&#44397;&#50612;/Korean" src="http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30"> </td> <td width="40"><input name="langpair" value="en|zh-CN" title="&#20013;&#25991;&#65288;&#31616;&#20307;&#65289;/Chinese Simplified" src="http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30"> </td> </form> </tr> </table>

3. WorldLingo URL Translator: World Lingo is my favorite service since Google indexes the static URLs translated by World Lingo. Thus, my website can be found on Google even while searching for non-english terms. World Lingo supports English, French, Spanish, German, Italian, Portuguese, Dutch, Greek, Chinese (Traditional and Simplified), Japanese, Korean and Russian. The translated pages can even be bookmarked.

<table width="320"> <tr> <td width="40"><a href="http://www.worldlingo.com/wl/translate?wl_fl=2&wl_url=<$BlogItemPermalinkUrl$>&wl_lp=en-fr"><img alt="Fran&#231;ais/French" src="http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg" height="20" width="30"/></a> </td> <td width="40"><a href="http://www.worldlingo.com/wl/translate?wl_fl=2&wl_url=<$BlogItemPermalinkUrl$>&wl_lp=en-de"><img alt="Deutsch/German" src="http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg" height="20" width="30"/></a> </td> <br /><td width="40"><a href="http://www.worldlingo.com/wl/translate?wl_fl=2&wl_url=<$BlogItemPermalinkUrl$>&wl_lp=en-it"><img alt="Italiano/Italian" src="http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg" height="20" width="30"/></a> </td> <td width="40"><a href="http://www.worldlingo.com/wl/translate?wl_fl=2&wl_url=<$BlogItemPermalinkUrl$>&wl_lp=en-pt"><img alt="Portugu&#234;s/Portuguese" src="http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg" height="20" width="30"/></a> </td> <td width="40"><a href="http://www.worldlingo.com/wl/translate?wl_fl=2&wl_url=<$BlogItemPermalinkUrl$>&wl_lp=en-es"><img alt="Espa&#241;ol/Spanish" src="http://photos1.blogger.com/img/43/1633/320/13539946_2fabed0dbf.jpg" height="20" width="30"/></a> </td> <td width="40"><a href="http://www.worldlingo.com/wl/translate?wl_fl=2&wl_url=<$BlogItemPermalinkUrl$>&wl_lp=en-ja"><img alt="&#26085;&#26412;&#35486;/Japanese" src="http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg" height="20" width="30"/></a> </td> <td width="40"><a href="http://www.worldlingo.com/wl/translate?wl_fl=2&wl_url=<$BlogItemPermalinkUrl$>&wl_lp=en-ko"><img alt="&#54620;&#44397;&#50612;/Korean" src="http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg" height="20" width="30"/></a> </td> <td width="40"><a href="http://www.worldlingo.com/wl/translate?wl_fl=2&wl_url=<$BlogItemPermalinkUrl$>&wl_lp=en-zh_cn"><img alt="&#20013;&#25991;&#65288;&#31616;&#20307;&#65289;/Chinese Simplified" src="http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg" height="20" width="30"/></a> </td> </tr> </table>

The above World Lingo Translation Code is customized for the Blogger Template. Since I have added translation to every page on my weblog, I have used wl_url=<$BlogItemPermalinkUrl$> in the URL. You will need to change this if your blog is hosted on another service like Typepad or Wordpress.

The <$BlogItemPermalinkUrl$> tag should be wrapped inside the <Blogger> tags.

These techniques can be applied for translating websites to English, German, Spanish, French, Italian, Japanese, Korean, Dutch, Portuguese, Russian, Traditional Chinese and Simplified Chinese. Translation Support for Middle Eastern languages like Arabic, Urdu, Farsi, Persian, scripts like Hindi, Sanskrit, Telugu, Punjabi, Marathi, Konkani scripts are provided by professional translating services only.

Update: Since WorldLingo is no longer free, you can use this new hack to add Google Flags to your website.