Translation Widget

There are different blogger widgets for translation. They differ in look and functionality. In this post I compare some widgets and publish my own blogger widget code for translation.

The standard google translation widget for blogger and other websites looks like this:


A bit bulky in my opinion.

At google translation tools you can build a pull-down menu like this one:

Select the language of translation: AfrikaansAlbanianArabicBelarusianBulgarianCatalanChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEstonianFilipinoFinnishFrenchGalicianGermanGreekHebrewHindiHungarianIcelandicIndonesianIrishItalianJapaneseKoreanLatvianLithuanianMacedonianMalayMalteseNorwegianPersianPolishPortugueseRomanianRussianSerbianSlovakSlovenianSpanishSwahiliSwedishThaiTurkishUkrainianVietnameseWelshYiddish

Another possibility is to have a menu with flags such as the google site translator at widgetbox.com.


While images may be nice to see, the use of country flags is a faux-pas. There are many countries that share languages and if you prefer to show one country flag over the other, people might become offended. While for USA and England, the problem may not seem so grave, it is potentially conflictious to decide between Taiwan and China. The flag menu choice also neglects minority languages such as French in Canada.

All of these menus, I feel are a little uncomfortable. It should be faster to get to a translation and I don't want people to have to search through many options.

Why not just recognize the language of the browser or user and offer a ready button? I build a translation widget that does just this.

It uses the google translate library and a javascript to recognize the browser language. Google translates the translate button into the browser language, so that the visitor of the site sees a button, most probably in his or her own language. This button leads to the google site translate service with the language pairs English and recognized browser language.

Click the button below to add the widget and place it where you want it to be.

<br /> <a onclick='window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&sl=en&tl='+getLang()+'&hl=en&ie=UTF8'); return false;' target='_blank' title='Translate!'><div id='translation'/></a><br />

Now, go to your blogger dashboard, design, edit html, and search for </head/>. Just before that copy-paste the following code:
<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
// verify browser language
function getLang() {
  var lct=&quot;en&quot;;
  if (navigator.language) {
    lct=navigator.language.toLowerCase().substring(0, 2);
  } else if (navigator.userLanguage) {
    lct=navigator.userLanguage.toLowerCase().substring(0, 2);
  } else if (window.navigator.language) {
    lct=window.navigator.language.toLowerCase().substring(0, 2);
  } else if (navigator.userAgent.indexOf(&quot;[&quot;)!=-1) {
    var debut=navigator.userAgent.indexOf(&quot;;[&quot;);
    var fin=navigator.userAgent.indexOf(&quot;]&quot;);
    lct=navigator.userAgent.substring(debut+1, fin).toLowerCase();
  }
  return lct;
} // end getLang()

    function initialize() {
      var lang=getLang();
      if(lang!=&quot;en&quot;){
        google.language.translate(&quot;Translate!&quot;, &quot;en&quot;, lang, function(result) {
          if (!result.error) {
            var container = document.getElementById(&quot;translation&quot;);
            container.innerHTML = result.translation;
          }
        });
      }
    }
google.load(&quot;language&quot;,&quot;1&quot;,{&quot;callback&quot;:initialize,&quot;nocss&quot;:true});
</script>

This will put a translation link on your page (where you placed the widget). The translation link will be in the browser language and it will not appear if the user language is English. If you want to have translation from any other language (not English) you will have to change en to the ISO correspondent of your language.

The browser language recognition script is based on what I found at stackoverflow and java2s. I tested it for firefox, safari, konqueror, internet explorer, and opera. Please report if you find that it doesn't work for any browser (any browser that supports javascript, that is).

That's it. Enjoy.