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.
ID
FR
 CN
JP
 SA
IN
 NL
ES
VN

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
COPY THE CODE BELOW:

<!-- Translate flag BEGIN -->

<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 nameCodeLanguage nameCodeLanguage nameCode
    AlbaniansqHungarianhuTurkishtr
    ArabicarIndonesianidUkrainianuk
    BulgarianbgItalianitVietnamesevi
    CatalancaJapanesejaAfrikaansaf
    Chinese (Simplified)zh-CNKoreankoBelarusianbe
    Chinese (Traditional)zh-TWLatvianlvIcelandicis
    CroatianhrLithuanianltIrishga
    CzechcsMaltesemtMacedonianmk
    DanishdaNorwegiannoMalayms
    DutchnlPersianfaSwahilisw
    EnglishenPolishplWelshcy
    EstonianetPortugueseptYiddishyi
    FilipinotlRomanianroAfrikaansaf
    FinnishfiRussianruBelarusianbe
    FrenchfrSerbiansrIcelandicis
    GalicianglSlovakskZuluzu
    GermandeSloveniansl
    GreekelSpanishes
    HebrewiwSwedishsv
    HindihiThaith
  • FlagIconURL is the link to the nation flag representing the target language. You can download free flag icons from Custom Icon DesignFamFamFam orMarkFennel.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.

COPY THE CODE BELOW:

<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.
ID
ES


COPY THE CODE BELOW:

<!-- Translate flag BEGIN -->

<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="http://lh3.ggpht.com/_nHEt80wjI5c/Smu0K_yMizI/AAAAAAAAAWI/5dURZUx8PpU/ID2.gif" /></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="http://lh5.ggpht.com/_nHEt80wjI5c/Smu0Q-jSLII/AAAAAAAAAWM/GFGD5ilhrFQ/ES3.gif" /></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.
Post a Comment

Earn Money Using App