Installing Google translator widget with flags

Do you 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 complete with the corresponding nation’s flag icons.

Without further ado,

1. Go to Layout.
2. Click a Add A Gadget link.
3. In Add A Gadget window, select HTML/Javascript.
4. Enter the title of your widget e.g. Translate This Page -this is optional.
5. Copy the code below and paste it inside the window.
6. Click Save.

<!-- Translate flag BEGIN --> 
<!-- by www.bloggersentral.com -->
<a class="translate-flag" 
onclick="href='http://translate.google.com/translate?u='+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> 
<!-- Translate flag END -->

Where:

• 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 MarkFennel.com. 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.

<style> 
.translate-flag img {
/* add styling codes here */
}
</style> 

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.

<!-- Translate flag BEGIN --> 
<!-- by BloggerSentral.blogspot.com -->
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en|id&hl=en'" title="Translate to Indonesian" target="_blank"><img border="0" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNxd6SxYNgs-bXJdr5ROpYJyDLXyjwghQXUfOtUgD80xG4N1A0-zWSVyghBe77mYdZ1bwuPfdB_FzaI70D8FQt2VKflB90Hx152NAWi5vmm17otQZD1dDHl_HPxXVxYwFU8MuvlL9lBHjX/" /></a>
<a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en|es&hl=es'" title="Translate to Spanish" target="_blank"><img border="0" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjroxApUODRtoGU8dQhVeyWyxLenY1-BiJQtcFaWNqX6wNo0ZWe_wDll591WtOH9kqLEJ78_AVy9iEVgyJ-HO1SN4ZQVD8cZpTnPieFMqKaKMw9MEAkEcUSTGyirXi9eQ32q5OFCYuop_1R/" /></a>
<!-- Translate flag END -->

Enjoy!

Before you leave:

• Do you find this article useful? Share it via Retweet, Share and Stumble buttons below.
• Any suggestion, question or comment? Please post it in the comments below.