Tech Tips. Gadgets. Gaming.

Google Translate Mini-Flags Widget

traslation-flags-widget

Add a Google Translate Mini Flags widget to your blog. Powered by Google Translate, this widget lets your visitors view your pages translated in their own native languages with just a click.

Single Column

Code:

Single Row

Code:

Double Row

Code:

This widget is tested on Blogger, WordPress and Joomla. It might also work on other platforms.

How to add the Google Translate Mini-Flags Widget to your blog:

Blogger

1. Go to your Dashboard > Layout > Add a Page Element > HTML/JavaScript
2. Paste the code
3. Add a title. Ex: Translate, Translate this page, Google Translate (Optional)
4. Save (or Save Changes).

WordPress

1. Login to your Admin panel > Presentation tab > Widgets tab
2. Paste the code into the Text Widget. If there’s no Text Widget available, add one.
3. Add a title. Ex: Translate, Translate this page, Google Translate (Optional)
4. Save.

Joomla site

1. Login to your Admin panel > ModulesSite Modules > click New
2. Paste the code into the Custom Output content box
3. Adjust module details and menu item links if necessary
4. Click Apply or Save.

Google Translate is still on its beta phase. Much like with other web page translation services, your readers might find parts of the translation very funny. Google has yet to meet their standards on this.

This widget is distributed freely. Feel free to use it, change it to meet your needs. Just drop a comment below to let me know it helped out, or if you have questions or problems adding it your blog or site.

Get updates delivered straight to your inbox!

Enter your email address:

176 comments

  1. I like your name ‘madtomatoe’. It is very unique! Thanks for sharing the widget and now have one on my blog. Have a Healthy & Prosperous New Year 2008! Cheers^^

  2. Viv,

    My pleasure. A New happy and prosperous Year to you, too!…

  3. Great widget this is. Grab one I will. Thank you.

  4. WOW~

    Google Translate Mini-Flags Widget.

    Happy New years.

    THX :)

  5. Thass Fantastic!

    I know I can never read ???? so hopefully this will Help Folks from around the World Read my Blog!

    ;))

    Peace*

    U may like http://www.Feedjit.com too which shows where yer Visitors are arriving from + how they got there!!

  6. Added ur link..
    add mine too..title is : My life as it is..
    Thanks

  7. Cool widget, I added this, as well as your site, to my blog. Thanks! :)

  8. MadTom /

    Aayush and Karlo,

    Thanks!… Added your blogs to my blogroll, too.

  9. Hi MadTom,
    Cool and informative site! Thank you for the invitation. I added you in my blogroll. :-)

  10. Hi, thanks for your visit. This is useful widget. Thanks for sharing :)

  11. MadTom /

    Billy’smom,

    Thanks!… Added yours, too. :)

  12. Whoa! I have a similar Google translator widget but it has Arabic too!
    Nice work on making it as simple and stylish :-)
    I’did link your blog!

  13. This will be very helpful since our blogs are seen all around the world. Thanks

  14. Joel,

    Thanks! Added your blog to my blogroll, too.

  15. Chris,

    My pleasure.

  16. Great stuff !!
    I have added this to my blog. Thank you.

  17. hi…. thank’s for visit…
    have a nice day :)

  18. thanks for sharing this :) i digg-ed it :)

  19. halloooooo

    i am Great widget this is. Grab one I will. Thank you.

  20. dear mad, i feel so frustrated not finding any clue online where to get this cute google language flag widget based on german language translating into the other seven. please help me….thank you so much, sincerely veryheaven / febn 23rd 2008

  21. Thanks for the digg, Gezelle. ;)

  22. I’ve got the code and followed your simple steps, but can’t get it to translate my blog.
    What did I miss?

  23. SG,

    When pasting the code, be sure the text/code editor is in Html mode (“edit Html”).

  24. Dear veryheaven ,

    At the moment, Google Translate has no support yet for translating German language to other languages other than French and English. But I will see if I can create a flag widget (German) with other web translators.

  25. I really like this widget. Thank you!

  26. Hi,
    Thank you for the free google translator. I really appreciate it, I have put it on my blog. Have a great day! :-)

  27. I copied this into a text widget and it doesn’t show the flags…only text from “border….FFFF;”
    can u perhaps give the html code like i should add it to make it work… tks!

    <div style=”border:1px solid #ccc;padding:10px 3px 3px 10px;text-align:center;background-color:#FFFFFF;”

  28. Nikita,

    Each code above is complete; and each should work when put into a text widget (WordPress). Be sure to copy and paste the complete code.

  29. tks, i will try again today… that is what i actually did… but, let’s see again…

  30. hello again…the flags show… but have a look at my site…colour changed to grey which i don’t like…and look at the code that’s visible…and… click on a flag..and nothing happens…and i promise…i copied everything as it is..i checked myself 3 times!

  31. Nikita,

    I’m not sure why it doesn’t work with your site. But when I viewed your page source, I noticed the javascripts were missing or removed from the widget’s code, that’s why the flags don’t work when clicked. It seems that something with your site that’s disabling the code.

    You can try the following:
    Go to your Dashboard > Options > Writing
    and under Formatting, uncheck the box before the “WordPress should correct invalidly nested XHTML automatically“. Click Update Options.

    Get the code (again :) ) for the Google Translate Mini-Flags Widget and paste it into a text widget.

  32. hi madtomatoe… I don’t have an “option”-link! I clicked on ALL links on my dashboard…there isn’t such a link…isn’t that with WordPress 2. (whatever) and higher? Thanks for your help…I’ve now deleted the code in my widget.

  33. Nikita,

    I’m sorry, it should have been like this:
    ::: Go to yourAdmin panel > Options > Writing
    and under Formatting, uncheck the box before the “WordPress should correct invalidly nested XHTML automatically”. Click Update Options:::

  34. Hi MadTom
    These are the links I have…I clicked on them all, there isn’t a link such as “options” nor “Formatting”.. and I really clicked and searched everywhere…

    Log Out | Help | Forums
    Dashboard

    Write, Manage, Design, Comments, Upgrades,
    Settings, Users,Dashboard, Blog Stats, Blog Surfer, My Comments, Tag Surfer

  35. Oops! Sorry again.. I see you’re already using the new WordPress 2.5. Anyways, I’ve just tried the widget with WordPress 2.5 and it’s working well.

  36. Hi Madtom…the text widgets won’t allow java… I’ve read it today on the forum too…many other people have problems with it…i have internet explorer 7, don’t know it that’s a problem… other people say they have problems with Firefox

  37. Jason /

    I have place this on my website, but when I click on it nothing happens…. Help please!!!!

  38. For some strange reason, Google Translations doesn’t seem to work for Blogger on IE, but works fine on Firefox.

    Maybe it’s just my computer?

    Can someone please test my website to see if works on IE?

  39. Hello
    I pasted the code for the Google Translate Beta (8 flags) In my site, but when I click any of the language flags I get an Error Message that says: Sorry, this is an Invalid URL.
    Where did I go wrong?

    Regards
    Gerson

  40. Michael /

    A note to all the “copy and pasters” the first div tag is missing a closing “>”. So the code won’t work unless you add it. I hope MadTomatoe has a chance to fix this.

  41. Thanks, Michael, for pointing that out.

  42. and I have two others
    thedesertsky.blogspot.com
    hamidatheherbalist.blogspot.com
    I want to add more flags and more languages to the flag translate widget. How do I do that?

  43. I love you widget. Is it possible for me to custumize the widget so I can translate a Dutch website into the languages listed plus English?

  44. Hi. Thanks for the Google Flags code. I was working on a kludge myself and you saved me a couple handfuls of hair. I will add you to my ‘site credits’ page when I get some final details sorted out but for now you can see it here http://www.stormvisions.com/pages/home.php

    The only thing that would be cool is perhaps to hide the div containing the flags onclick. Right now clicking one of them, then selecting another language from the translated page -instead of the original page- delivers you to a translate box at Google.

    Great work and thanks.

    Burt

  45. Well appreciated

  46. The translators are very good and I placed them in my blog.

  47. Nice code. The only issue is using the flag image hosted at PhotoBucket.

    PhotoBucket alway have bandwidth limitation.

    Regards

  48. quiero que me traduscan todo

  49. thanks a lot, it will help the visitor in my site

    thanks you

  50. Hi Tom,

    I wasn’t able to install the widget. For some reason I get the message:

    “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

    XML error message: The content of elements must consist of well-formed character data or markup.

    every time I try to install it. What should I do?

    Thanks,

    Greg.

  51. Sorry man, i dont knowwhy but your widgets didnt work for my blog.
    Anyway your widget is good.

  52. Hi,

    I follow the instruction and paste the code in my blog, translate appears, but when I click on the flags, no tanslation appears,

    wondering…, did i do something wrong ( I am using classic template HTML)

    Thanks to you advice

  53. nice Widget

  54. Hi madtomatoe..

    nice widget and it will help my visitor to understand about the article in myblog.

    thanks,
    ardhie

  55. Hi madtomato, Have bee stuggling tying to get this to work. I,m thinking it must be something to do with my hosting company (microsoft oficelive) . IVE PUT IT ON A TEST PAGE. Ideally I just need a few individual flags – POLISH – LATVIAN – FRENCH & SPANISH. I would be greatfull for any help.

    Thanks Patrick

  56. thank you very much.i’m searching for the other nation to it make complete.nice work of sharing like this. GOD BLISS!

  57. thank you very much.i’m searching for the other nation to it make complete.nice work of sharing like this. GOD BLISS!

  58. I have installed this in my blog.. Thanks for sharing…

  59. Hey.. MadTom! Cool widget!! I really like it…

    I’ve made some changes to the codes so now the widget work for my language, Indonesian.

    Thanks for sharing it.

    Anyway, I plan to make the other languages translation. How could I find those cool flags of other countries?
    ~again, thanks. :)

  60. Hello,

    Thanks for sharing. Having a query. Hope you know the solution. Does google translate do not work for https page?

    you can reply me on hellotaran@gmail.com. My work email address.

    Thank you,
    James

  61. @ James,

    Google Translate does not have support for secured/Https URLs, at least for now.

  62. Many thanks, much better than googles own version!

  63. Thanks for the widget, I modified it a little in order to do the translation into Spanish… I like it a lot!

  64. Hi..

    Curious to know on a few of my websites, they are not word press blogs..Can one of these be used for non Word Press blogs..

    Thanks,

    Mike

  65. @ Michael Perry

    yes they can be used for non WordPress blogs as well.

  66. this tool is awesome. thanks for sharing.

  67. yuhuuhuhu…..
    makasih ya…….

  68. good… nice info, thx

  69. now i can let my visitor translate my pages to their own languages. so easy to do..

    thanks for sharing this…

  70. Want one
    Need one
    But…
    they’re ugly
    Why can’t we customize?

  71. Sooo,…
    und why again does this not work with IE???

  72. ola

    td bem

    gostei

    e

    vc poderia me
    ensinar o codigo de flags que ficam
    se mexendo como o vento estivesse soprando…

    rss

    obrigada
    aguardo retorno

  73. It seems not to work for me… I think its because the “Content Warning” Box needs to be selected before the Google translator can take effect.

    Anyone know how to add a translator to my page the will function with the “Content Warning” box?

    Ariel XxX

  74. Craig S /

    Nice! I like the translation code!

  75. I don’t offer this yet on my blog. Now I will no longer look for info on how to add it to my blog, good I bumped here. Thanks.

  76. Barbara /

    Hi,

    Your google mini widget looks good. I have a site designed in NetObjects Fusion version 7.5 It is not a blog.

    Any ideas about where to paste the code?

  77. Hi Barbara,

    Any URL I can look into?…

  78. Thanks for sharing!

  79. Can you help me to make gadget google translater Indonesian to English

    Thanks

  80. I use this a lot… but now the flag images are gone from the photobucket site they’re referenced to!

    Please fix that…

    Thanks :)

  81. Same here. The flags are gone.

  82. Thanks for making this widget btw. I wish I knew how to change the colors/width, so it would fit better with my blog’s color scheme. Any plans on adding a tutorial for that in the near future?

  83. @Iggy
    @ Patrick

    Thanks for informing me.

    The flags are up now. I’ve moved the flag images to a new host, so you have to get the code again and paste it into your site.

  84. Thanks MadTom!

  85. Thank You for the options of size, color and format of this google translation widget. I have been searching a few hours for this very thing.
    I don’t know why blogger wouldn’t have it easily to access.

  86. we have those flag images on our website but we have not use this google translate. Thanks for sharing it MadTom.

  87. Yo, mad tomato! Thanks for the translation tools, but the one I chose isn’t working for me. the only thing changed in the code was to narrow it down to fit my blog’s margin (I chose the double row widget, above).

    I hit my site, click the flags, and nothing happens. Can you help me out?

    Thanks again!

  88. how to add other countries or langauge?is it possible?

  89. Hi there, If you don’t like topics with many links, just delete this topic.
    Thankyou.

  90. Jaun Millalonco /

    Excellent YouTube post ! thanks for sharing. I’ll be adding your blog to my reader.
    Juan

  91. I tried a coule of times to paste this code into my blogger html section..checked it several times and keep getting the message:

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The reference to entity “langpair” must end with the ‘;’ delimiter.

  92. Very nice widget,and I will put in my blog!,Thanks…

  93. I installed the Google Translate Widget and it doesn’t work when you click on it. Thanks for your help.

  94. Hi Mad Tomato

    This is an excellent gadget.. how do i modify the plugin to display other languages?

    Thanks
    ZQ
    PassportChop.com

  95. beware of this as he is using click jacking.
    google about click jacking for more info

  96. Oh, i was searching for this widget everywhere. I got it here at last..

  97. Cool, took the code and modified it a little bit and now it looks like a perfect fit:

    Thanks a lot!

  98. Just grabbed 2 row flags – perfect for my friends. Thxs.

  99. The biggest problem here is that if Google starts to aggregate the data they might negate their most valuable offering, “Search Relevance”. Artificially inflating /deflating a site’s relevance can be done with the help of 50 students at 50cents an hour entering a company site as the preferred result.

  100. Nice post pal. Thanks

  101. HI, I use it in my site, Thank you very much

  102. Hi. Thanks very much :). I now using this on my site.

    Thanks one more time :)

  103. super great thanks now forum completed thanks a bunch

  104. Hi. Thanks very much . I now using this on my site.

  105. super great thanks now forum completed thanks a bunch

  106. Thank you very much for the translator, i really needed one! they’re useful. Big time!

  107. I just installed this widget but it doesn’t appear to be working? It shows up in my sidebar but when I click on one of the flags nothing happens. Can you help?

  108. needs fixing for IE, works fine when viewed in firefox…

  109. Congratulations for your wonderful site , good night , Sandra

  110. Tank you very much … Sandra

  111. Gostei muito deste site , agradeço a oportunidade de estar aqui , abraços , Sandra

  112. his is great news. Best of luck for the future and keep up the good work.

  113. Thank you for this widget. What if I want to change the background colour of the widget?

    Regards,
    David
    Malaysia Asia

  114. Nice widgets….thanks for sharing…

    Edy,
    Healing Scabs On Face

  115. how can you add a certain language?

  116. it doesn’t work!:(

  117. thanks. this widget is cool!

  118. how can we add more language

    what code we change due to follow http://translate.google.com

    'http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8&#039;

    please give me idea

    i wana add more langs

    Thaks in Advaced

  119. thanked posted.

  120. thank’s for your information

  121. thanks for your tips !!!

  122. nice plugin..

    thanks

  123. boa sorte rapaz

  124. I am not sure if this site is still active but I just want to give my appreciation for the code here. I have been hunting the internet for days trying and failing using code I could find until this site. Thanks!

  125. How does one go about to ad more languages ?

  126. Laura /

    Those are really nice looking flags, do you have a link to a collection of them? :)

  127. Can you publish the code for all languages please?

  128. exellent widget, tanks for sharing

  129. web translation /

    I have applied this code in my blog and it’s really working.Thanks for share with this code..

  130. thanks for sharing,those are really nice

  131. Carla J /

    Hi. I got the flags to look good on my blogger site (which I view in IE8), but I can’t get the functionality to work. Any ideas?

  132. hi, the script not work, you can visit my web and try the widget. thanks

  133. maksih bro google translater nya ………mohon pasang beclink boleh gak bro….maklum bro blogger kacangan belom ngerti apa2 nih alias masih belajar…..kunjungan balik bro ditunggu……lumayan buat koleksi viitor…hehehehe…..TQ bro

  134. ups…… sorry i don’t know that u’r not indonesian………thak’s 4 google translater…………..please visit my blog……

  135. I was wondering for this widget now i got it,,,,,,,,,, Thank you so much to bring it to me.

  136. I like this web with some of good plugin, thank you so much for sharing.

  137. Obrigada, somente no seu site eu encontrei um tradutor que realmente funciona! Obrigada!
    i’m from rio de janeiro and i’m live brazil, thank’s! =)

  138. I hope you can offer the codes written out for many more languages (Hindi, Urdu, Swedish…) at some point. Thanks for this widget!

  139. Where did you get your translation flags. I’m looking for a full set of 58 with a nice 3D effect like yours.

    Thanks and bless,

    Cliff.

  140. nice, must try this one on my blog as fast as possible :D

  141. Thanks much for the translator.

  142. Thanks…
    Its Really Nice .
    Thanks again

  143. thanks for sharing. How to add bangla translation ?

  144. Arunima Chandran /

    Thanks a lot. This will certainly help me get more visitors from other countries :)

  145. Super easy for not-so-tech savvy people like myself. Thanks for the code.

  146. All the flags have disappeared from my widget and have been replaced by question marks – help!

    Well, it certainly was a great widget! :-(

    D

    • Sorry about that. The flag images were hosted on Microsoft’s skydrive. Apparently, serving images from skydrive is not allowed anymore. That’s why the flags disappeared. So I moved the flag images to another location. The widget should be working fine now. Just copy the updated code above and install it again.

      • Hooray – it works! Thanks so much for your prompt attention! This widget is, in my opinion, the most valuable widget there is! :-)

  147. Sorry about that. The flag images were hosted on Microsoft’s skydrive. Apparently, serving images from skydrive is not allowed anymore. That’s why the flags disappeared. So I moved the flag images to another location. The widget should be working fine now. Just copy the updated code above and install it again.

  148. The google translation widget is very useful. Thanks a lot for those who worked on this project. They did a wonderful job.
    Note – please make sure that the languages like tamil (alpha) the sentence is not properly framed. Kindly rectify the same.

    with metta
    zensangha

  149. The flag widget is great but how can I add to it with other languages like Portegese, Farci, Tagalog, Eastern Europe languages, etc.

    Ted

  150. I love this widget! However… my website is in traditional Chinese, and I’d love to translate it into English. How do I do that???

  151. I will be making a Chinese version of the widget soon as I can. You will be notified when it’s done.

  152. Hi brothers, I try to use the translate widget by translateth.is
    but after several of the days my translate widget is not working.
    also my widgets from alexa isn’t appear.
    I see you understand much about the blog.Can you explain to me what causes it ? whether javascript can be influential?
    thanx before

  153. Hi,

    The Widget is PERFECT, however, it doesn’t work!!!!

    PLEASE HELP!!!!!

  154. For Tommy: English to Haitian Creole ALPHA

    <div style="border:0px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:none;min-width:235px; margin: 5px 0 5px 0;">
    <div align="center" style="width:auto;">
    <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cht&hl=en&ie=UTF8'); return false;" title="Haitian Creole ALPHA"><img border="0" style="cursor:pointer; cursor:hand;" width="53" alt="Haitian Creole ALPHA" src="http://3.bp.blogspot.com/-dUUblY6jzG4/TlVWY-wI6QI/AAAAAAAACo0/Tmn3Ul2pNfY/s400/haiti.png" height="32" title="Haitian Creole ALPHA"/></a>
    </div>
    <small><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cht&hl=en&ie=UTF8'); return false;" title="Haitian Creole ALPHA">Translate this page into Haitian Creole</a> </small><br/>
    </div>
    
  155. great widget…i need also to allow arabic translation, tried to edit one of the language sections in the code, but didnt want to fiddle too much…any tricks you can share oooh master?

  156. santosh kumar /

    thanks . it’s very easy step to add google translator.. thanks a lot

  157. anmol gupta /

    plz. add arabic and hindi also in this code.

  158. Please supprot me Code to Translate English to Vietnamese.
    Thank you very much!

  159. Craig Grant /

    I had posted a question on 11/1 if you can either add languages like Portuguese or better yet if you could provide instructions how to edit the url string so anyone can add the language of their choice (which I think would be great as it would truly benefit everyone and not put the onus on you to keep adding languages). Can you please update us on this. Thank you.

  160. how come when i try to click the flags, it won’t translate? the widget shows, but it won’t translate!

  161. divine /

    hi, this a great offer really. but can i make it to translate in the current page? i mean withourt opening a new window.

    kind regards

  162. Mantap gan, thanks

  163. Roger Lezo /

    Google translator is very useful. i always use it when i want to have some instant translation of some of the stuffs that i have. *`*:*

    Many thanks

  164. Thanks a lot for giving information for Google Translate Mini-Flags Widget.

  1. 30 Blogger Platform Standart | Mibats - […] 15. Google Translate Mini-Flags Widget by MadToMatoe – Sangat berguna plugin terjemahan powered by ‘Google Translate’. Satu klik install …
  2. -->

Leave a Reply