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.

IDFR CNJP SAIN NLESVN

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.

IDES

<!-- 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="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.

47 comments to "Installing Google translator widget with flags"

solcarina July 29, 2009 at 7:43 PM    

Thank you for sharing this informative information.

Sending love land light, beauty and Joy...)

artparadox September 13, 2009 at 4:28 AM    

Very useful. Thank you very mutch. I use this script in my site, and it's looking great.

Greenlava September 13, 2009 at 9:11 AM    

artparadox,
Glad you find it useful. Stick around for more tips and hacks.

bathmate December 24, 2009 at 2:15 AM    

As always an excellent posting.The
way you write is awesome.Thanks. Adding more information will be more useful.

Bathmate

techgravy December 25, 2009 at 6:31 PM    

Seem this is different install Google traslate.

Thanks.

Ryan December 25, 2009 at 7:22 PM    

Thanx this tips is very useful..
Btw, here is the example of my site installed with translator @ fit2page.blogspot.com

Greenlava January 4, 2010 at 12:24 AM    

Bathmate, techgravy, Ryan, CikguNorza,
Thanks for stopping by guys :)

inung halaman samping February 1, 2010 at 2:20 AM    

Thanks a lot, i try n it works in my halamansamping.blogspot.com :)

Greenlava February 2, 2010 at 9:41 PM    

@Halaman Samping-nya Inung
You're welcome. It looks good.

inung halaman samping February 3, 2010 at 5:33 PM    

Whoaa... its so useful, particularly ur link to http://www.markfennell.com/flags/. so i can download many flags. Its work in my blog http://halamansamping.blogspot.com. I had grab it blogger-sentral badge, thanks a lot

Greenlava February 3, 2010 at 11:52 PM    

@Halaman Samping-nya Inung
Saw the badge, thanks a lot.

Anonymous,  February 26, 2010 at 1:48 AM    

excellent...

Vica February 26, 2010 at 4:50 AM    

Thank you very much, this is what I was searching for, as I plan to start a photoblog. Though it doesn't work at my page... I've downloaded the flags, copied them into a Picasa album, then the link into the html text... The flags don't appear on the site. I keep trying. :-)
http://engelwerk.blogspot.com/

Blog Tactic May 21, 2010 at 2:21 PM    

It work nicely.

Greenlava May 21, 2010 at 8:16 PM    

@Blog Tactic
I am glad it did.

M.akrmsaim12812 June 22, 2010 at 9:46 PM    

this is different install Google traslate.

M.Akramsaim12812 June 30, 2010 at 7:28 PM    

good site about translation.

Greenlava July 1, 2010 at 1:29 AM    

@M.Akramsaim12812
Thanks

nawa-e-pardes October 25, 2010 at 6:24 PM    

that was really good

okan November 19, 2010 at 9:59 PM    

nice tips....
sudah saya follow

di tunggu kunjungan baliknya and follow baliknya.....

sukses selalu

Admin November 23, 2010 at 4:22 AM    

thenk you

Gie November 25, 2010 at 11:28 AM    

thanks a lot... this is very usefull....


www.teenagerx.co.cc

Maximits Blogspot December 25, 2010 at 7:10 PM    

This post very informative and helpful...
guess I'm gonna put that on my blog!

Thanks!

Unknown February 13, 2011 at 5:04 PM    

Hi Greenlava,
The process seems very simple, but not quite so to a novice! When copy/pasting the working code above: “…working sample of actual translator flags and their codes…,” into the HTML page of my website, together with the flags, it shows up in the normal page view only as HTML code.
I have copied national flags from a free website and saved them to my hard drive with their relative language codes, used the basis of your working sample above linking to the flags on my hard drive, but the HTML code still does not embed as HTML code linking to the flags in the normal page view – it only shows as HTML code.
In another test, I copied the codes from your ‘Page Source’ page of the 23 flags – top right, and pasted the code into the HTML page of my website, but again the code comes out as HTML code in the normal page view page.
When I am given other HTML codes to embed into the HTML page of my website the codes always work in page view and uploaded to my server.
Can you be so kind and to explain what is going on here?

Matt February 28, 2011 at 7:13 AM    

Can I use this for a regular website?

Greenlava February 28, 2011 at 8:09 AM    

@Matt
Yes you can.

WhonJava May 17, 2011 at 8:04 PM    

thank you for the information.. nice post.. :)

Roy June 21, 2011 at 7:32 PM    

appreciated!

absolutely fantastic. you make my blog up.

Mr. Jabat July 11, 2011 at 9:42 AM    

Nice Info.......!!!

yusuflaili July 12, 2011 at 4:50 PM    

Thank for this imfo..very nice post!!

Mark Angelo July 18, 2011 at 9:54 AM    

thanks for the very informative post! :)

Leah August 15, 2011 at 9:10 AM    

Yay! You can now view grogb.blogspot.com in german :) Thank you so much!

Anonymous,  September 20, 2011 at 3:11 PM    

thanks.......for the
tips.............

Anonymous,  September 22, 2011 at 6:48 AM    

I looked for this over and over but don't see step 3 on my gadget adding menu. The only thing I can do is select from or search from a gadget list. Am I looking in the wrong place???
Thanks!

1.Go to Dashboard > Design > Page Elements.
2.Click Add A Gadget.
3.In Add A Gadget window, select HTML/Javascript.

Greenlava September 23, 2011 at 12:26 AM    

@Anonymous
You're in the right place. Just scroll down the list until you see the HTML/Javascript gadget.

portuguese website translation October 27, 2011 at 5:34 PM    

Thanks for sharing I added it works good.

Hosne February 2, 2012 at 2:22 AM    

I failed to add widget for translation of my contents into french.

Greenlava February 2, 2012 at 11:38 PM    

@Hosne
Use this code:
[a class="translate-flag" onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en|fr&hl=fr'" title="Translate to French"][img border="0" style="cursor: pointer;" src="FlagIconURL" /][/a]

don't forget to replace FlagIconURL with the link to the flag.

german english translator February 9, 2012 at 12:52 AM    

Thanks for this information...I use this translater to accomplish many of my tasks.

Anonymous,  September 11, 2012 at 11:39 AM    

the translation for the simple words are accurate

but for long sentences and paragraphs it wouldn't make sense :(

anyways... thank you so much I will use this in the future :)

traductor google November 18, 2012 at 5:08 AM    

I found an excellent tool that allows you to translate with Google and Microsoft at the same time.This comment did in Spanish using: http://www.traductor--google.com

owenayuk December 18, 2012 at 1:19 AM    

wow! this article is more than useful. thanks.

Durai sankar January 25, 2013 at 3:32 PM    

will this widget affect blog load time? so that i will add this to my blog

Madhuri May 13, 2013 at 7:48 PM    

This script takes me to the google translator page. I want the script which translate the page in my website itself.

Shank July 25, 2013 at 9:49 PM    

Google now has updated to 50 languages. If i use ur method, does it still work?

Inderjeet Singh September 22, 2013 at 7:39 PM    

Thanks for sharing this widget with us . I've been looking for a good translation widget for a while.It really helpful.keep it up

Greenlava October 8, 2013 at 10:58 PM    

@Shank
Yes it will still work.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.