Support » Plugins » some changes I made with your Google AJAX Translation plugin

  • Hi Libin and/or Michael,

    I looked at the translation plugins and thought I would give yours a shot. I like the way the Google ajax translation works in myspace blogs if you’ve seen it there.

    Here’s what I came up with:

    The changes I made are:

    • Added an option to enable and disable comment translation.
    • The “Translate” buttons appear only after the document is ready and if javascript is enabled.
    • Fixed the comment translation so that it’s XHTML valid. (The problem was with the order of the default filter wpautop.)
    • Added all 42 languages currently available from
    • The list of languages appear in a popup window so they take up less space (42 languages is a lot!)
    • The languages are displayed in their own language.
    • If you hover over a language name the tooltip shows the language name in English.
    • The popup window is styled with its own external CSS from google-ajax-translation.css.
    • In Firefox the popup window is in three columns using CSS3. Safari doesn’t quite format the columns correctly so I left that out.
    • I used the jQuery-translate plugin to access Google translate.

      There are a lot of advantages with jQuery-translate like:

      • It automatically breaks longer strings up into pieces less than 1000 characters so the translate API can handle them.
      • It can handle large sections of the html DOM so I have it translate the entire post including the date, title, etc.
      • It saves the original text and translated text into the html DOM so that switching back to a language is instantaneous. (Something doesn’t work right in nested comments still.)
      • It’s easy to show a throbber while the translation is in progress. (I just used three dots since a graphic doesn’t work well on my pages.)
      • Since it works so well I think the next step would be an optional sidebar widget that just sends the entire page to jQuery-translate (see: ) but it’s kind of slow for a big page.
    • The fun part comes in when you change your browser’s preferred language. (See and you can double check it at where it says HTTP_ACCEPT_LANGUAGE.)
      • The “Translate” buttons show up in the browser’s preferred language if available.
      • The browser’s preferred language is put first in the list of languages in the popup.
      • The first time the user clicks on a “Translate” button the tooltip language names are sent off to jQuery-translate and then inserted back into the tooltips so they can be displayed in all 42 languages also. So to the user the plugin is completely self-localized.

    I updated the code for displaying flag icons but didn’t work on it further. Flags don’t really accurately represent languages well.

    (I would put the flag images into a CSS background sprite if I were going to use them.)

    The javascript code section is big enough that it might be better to make a link to an external file but I’ll leave it as-is for now.

    Please try it out and see if I missed any bugs or if anything breaks.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Here’s just a small update if anyone is interested.

    Libin added me the the Subversion repository so I thought I would fix up any remaining issues I had with the plugin.

    • I added the rest of the flags so there are flag icons for all 42 languages. (These are from )
    • All the flag icons are assembled into one PNG file and displayed as CSS background images sprites, which reduces the number of HTTP requests.
    • I added an AJAX loading throbber image. I think users feel more comfortable seeing a throbber when something is loading on the page. (From )
    • Javascript has been minified and moved to an external file. The non-minified source code is google-ajax-translation.js

    I’ll have to update the documentation before uploading everything, but please try it out if you’re curious.

    Cool! Thanks for your work.

    I didn’t know that there is something like jquery-translate available… this makes things a lot easier. The option “show language as a flag” is in fact not that simple, but covering just a few european languages works. Full I18N e.g. de_DE, de_CH and so on is way beyond the scope of this little plugin.

    The idea with the css-striping-thingie is very good.

    I’ll test it.

    Thanks again,


    OK found an issue regarding “malformed URIs”, so please change the following lines: 380, 388 and 404 by removing unnecessary spaces in the url:

    before: href=\"javascript:google_translate('$lg', '$type', $id);\"
    after: href=\"javascript:google_translate('$lg','$type',$id);\"

    so far everything works very good.

    BTW what Translation-icon would you suggest instead of having a link called [translation]? πŸ™‚


    What shows the problem with malformed URIs? My pages validate fine by the

    the problem with this occurs with templates using “XHTML 1.0 Strict”-doctypes: the whitespaces in the hrefs aren’t allowed. Thats all.

    monodistortion I like the changes on your orrmarshall blog you’ve made to this plugin. How do i get your version?

    Are you planning to update it, or maybe your changes can be integreated into the main plugin itself so people can choose things like flags or link.

    If you can let me know where I can get your modded version and if your going to keep this up to date that would be great. πŸ™‚

    Ah I think i’m being a bit thick.

    Am I right in thinking monodistortion’s changes have now been added to the plugin downloadable from this site?


    Where do you see this? I use the and I’ve never seen this problem.

    the problem with this occurs with templates using “XHTML 1.0 Strict”-doctypes: the whitespaces in the hrefs aren’t allowed. Thats all.

    It’s an easy change to make of course. I’ve never seen the white space requirement in the XHTML spec.


    I have a page where i add posts to a static page (see my homepage url, (built according to static-frontpage-combined-with-dynamic-content) and it now it seems css/js isn’t applied to the translate link at the blog posts. Any ideas?



    Please start a new thread for your question. I don’t see the page that you’re linking to.

    Found an issue when used in conjunction with Blogarate (another plugin which is allowing rating of the post)
    Why couldn’t the [Translate] button be at the top of the post?


    Please start a new thread for your questions.

    I haven’t tried Blograte but it looks like it hasn’t been updated for a while. The problem is most likely that it’s using an old jquery library.

    Moving the [Translate] button wouldn’t be too hard. I think it’s less intrusive at the bottom though.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘some changes I made with your Google AJAX Translation plugin’ is closed to new replies.