Google Translator with Flags Widget for Blogs and Websites

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

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.

178 thoughts on “Google Translate Mini-Flags Widget”

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

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

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

  5. 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!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  25. 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!

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

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

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

  29. 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!

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

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

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

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

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

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

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

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

  37. 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>
    
  38. 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?

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

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

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

  42. Pingback: 30 Blogger Platform Standart | My Blog

  43. Pingback: 30 Blogger Platform Standart | Mibats

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll Up