Divi Page Builder

The Ultimate Web Design Toolkit!

Claim the discount before it disappears!

GET THE DISCOUNT!

Google Translate Mini-Flags Widget

/ Blogger, Blogger Widgets, Widgets
traslation flags widget1 Google Translate Mini-Flags Widget
translate beta Google Translate Mini-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

google translate mini flags vertical Google Translate Mini-Flags Widget

Code:

Single Row

google translate mini flags single Google Translate Mini-Flags Widget

Code:

Double Row

google translate mini flags 2row Google Translate Mini-Flags Widget

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 > Modules – Site 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.

Divi Visual Page Builder

The Ultimate WordPress Toolkit. Complete Access!

For a short time only, we are offering you 10% off your membership.
Claim the discount before it disappears!

10% FOR A LIMITED TIME

178 thoughts on “Google Translate Mini-Flags Widget”

  1. Viv ;-)

    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^^

  12. Joel

    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!

  20. veryheaven

    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

  24. MadTom

    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.

  28. Nikita

    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;”

  31. Nikita

    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!

  32. MadTom

    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.

  33. Nikita

    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.

  34. MadTom

    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:::

  35. Nikita

    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

  36. MadTom

    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.

  37. Nikita

    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

  38. Jason

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

  39. Joe

    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?

  40. Gerson Borges

    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

  41. 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.

  43. Hamida

    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?

  44. Twotone

    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?

  45. Burt

    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

  51. Greg

    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.

  54. cal T

    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

  58. Patrick

    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

  62. TaMie

    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. :)

  76. Ariel

    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

  79. 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?

  83. Iggy

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

    Please fix that…

    Thanks :)

  85. Patrick

    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?

  88. Jill Berry

    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.

  91. RPG Ike

    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!

  95. Jaun Millalonco

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

  96. rightpawleftpaw

    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.

  99. ZQ

    Hi Mad Tomato

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

    Thanks
    ZQ
    PassportChop.com

  104. Kirby Vacuum Parts

    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.

  112. karen

    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?

  131. Chris

    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!

  138. 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?

  140. essa

    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

  144. Nunna *-*

    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! =)

  145. Toto

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

  151. Arunima Chandran

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

  153. Dia Sobin

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

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

    D

    1. MadTom

      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.

  154. MadTom

    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.

  155. zensangha

    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

  156. Ted Lars

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

    Ted

  157. Jin

    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???

  159. jasmin

    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

  161. MadTom

    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>
  162. Robert

    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?

  166. 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.

  168. 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

  170. 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

  171. Pingback: 30 Blogger Platform Standart | My Blog

  172. Pingback: 30 Blogger Platform Standart | Mibats

  173. jenell lage

    Fantastic discussion . I learned a lot from the analysis . Does anyone know if my business could access a template NY DTF IT-280 example to type on ?

Comments are closed.

Scroll to Top
Copy link
CopyCopied
Powered by Social Snap