Monday, November 8, 2010

Installing Google translator widget with flags

Want to reach wider international audience? What better way to do it than by allowing your readers to read your articles in his or her own language!

Installing a translator on your webpage or blog will do just that. Google translator can translate your web page into 56 languages (as of 24 August 2009). 
In this tutorial I will show you how to add a Google translator widget with the corresponding nation’s flag icons.
Without further ado,
  1. Login to your to your Blogger account.
  2. Go to Design > Page Elements.
  3. Click Add A Gadget.
  4. In Add A Gadget window, select HTML/Javascript.
  5. Enter the title of your widget e.g. Translate This Page. This is optional.
  6. Copy the code below and paste it inside the window.
  7. Click Save.
1<!-- Translate flag BEGIN -->
2<!-- by -->
3<a class="translate-flag"
4onclick="href=''+encodeURIComponent(location.href)+'&amp;langpair=SourceLangCode|TargetLangCode&amp;hl=InterfaceLangCode'"title="Translate to TargetLangName" target="_blank"><img border="0"style="cursor: pointer;" src="FlagIconURL" /></a>
5<!-- Translate flag END -->

  • SourceLangCode is the code web page original language, TargetLangCode is the code for language you want the page translated into, and InterfaceLangCode is code for Google translator bar language.
  • TargetLangName is the name of targeted language.
  • Replace all those variables with their respective Google language codes and language name. Refer to the table below.
    Language name Code Language name Code Language name Code
    Albanian sq Hungarian hu Turkish tr
    Arabic ar Indonesian id Ukrainian uk
    Bulgarian bg Italian it Vietnamese vi
    Catalan ca Japanese ja Afrikaans af
    Chinese (Simplified) zh-CN Korean ko Belarusian be
    Chinese (Traditional) zh-TW Latvian lv Icelandic is
    Croatian hr Lithuanian lt Irish ga
    Czech cs Maltese mt Macedonian mk
    Danish da Norwegian no Malay ms
    Dutch nl Persian fa Swahili sw
    English en Polish pl Welsh cy
    Estonian et Portuguese pt Yiddish yi
    Filipino tl Romanian ro Afrikaans af
    Finnish fi Russian ru Belarusian be
    French fr Serbian sr Icelandic is
    Galician gl Slovak sk Zulu zu
    German de Slovenian sl
    Greek el Spanish es
    Hebrew iw Swedish sv
    Hindi hi Thai th
  • FlagIconURL is the link to the nation flag representing the target language. You can download free flag icons from Custom Icon Design, FamFamFam or Then upload the ones you need to an image host such as Photobucket, Flickr or Picasa. Once uploaded, get the link to each image an use it to replace FlagIconURL.

I’ve put a class name to the code, so you can easily style the flag if you want. 
Add the codes below before or after the translator code.

2.translate-flag img {
3/* add styling codes here */

Here is a working sample of actual translator flags and their codes. The first one translates from English to Indonesian, with English interface. The second one translates from English to Spanish with Spanish interface.

1<!-- Translate flag BEGIN -->
2<!-- by -->
3<a class="translate-flag" onclick="href=''+encodeURIComponent(location.href)+'&langpair=en|id&hl=en'"title="Translate to Indonesian" target="_blank"><img border="0" style="cursor: pointer;" src="" /></a>
4<a class="translate-flag" onclick="href=''+encodeURIComponent(location.href)+'&langpair=en|es&hl=es'"title="Translate to Spanish" target="_blank"><img border="0" style="cursor: pointer;" src="" /></a>
5<!-- Translate flag END -->

Good luck!

No comments:

Post a Comment