Translate-It is a free tool that makes multi-language translation easy to implement on any website. With just a few lines of Javascript you can quickly include up to 34 languages of internationalization on your site:
The web is a global community with rapidly growing international markets. Translation allows sites to reach broader audiences, and tools like Google Translate and Yahoo’s Babelfish have made the web more accessible. While accessing these translation tools is often too cumbersome for your site’s visitors, leveraging these tools is relatively simple for developers.
I wrote this script because I’ve been wanting to offer translation on my blog, and unfortunately all the scripts I looked at online had really clunky front ends. So I decided to write Translate-It: a really clean script that leverages Google’s translation tool.
Why you should use Translate-It
Translate-It is a nice script for several reasons. First, it’s incredibly easy to implement, with no CSS or images to upload. The script builds all the flags and links dynamically, so the only HTML markup you include is <div id="translateFlags"></div>. Besides keeping the document clean, this is great for SEO because there aren’t any extraneous links or content.
Another advantage to Translate-It is that it pulls in the flag icons using CSS sprites and a single image. This saves 9 HTTP requests.
Finally, in addition to being easy to use, Translate-It is also very customizable. Some options include choosing which languages are offered, and whether to use your own flags and styling or the default icons.
Putting Translate-It on your website
Integrating Translate-It into your site is a piece of cake. Just upload the translate-it.js file to your website, and include these lines of Javascript:
<script type="text/javascript" src="translate-it.js"></script>
<script type="text/javascript">
TranslateIt.init();
</script>
Make sure to modify the path to translate-it.js if necessary.
Finally, add this HTML wherever you want the flag icons on your page:
<div id="translateFlags"></div>
And that’s it, your website has become much more global, with translation into tons of languages!
Customizing Translate-It
To customize Translate-It, first open up translate-it.js and look towards the top for the config section. This area is easy to modify and any non-developers should only work within this section.
By default only 10 languages are enabled, but you can include up to 34 languages by editing the usedLangs array. You can also change the order that the flags appear with this array. Just make sure that the last item doesn’t have a comma at the end, or it will throw an error in IE.
Additionally, if you want to use your own imagery, or just want to host the flags locally, you can modify the bgImage variable. If you do want to style the flags yourself, you’ll want to set useFlagCSS to 0 (zero).
Also, if your site is in a language other than English to begin with, make sure to change the fromLang variable.
Finally, if you want to use a different id than ‘translateFlags’, either set the flagsWrap variable statically, or pass the id into TranslateIt.init() to change it on the fly.
Supported Languages
Arabic, Bulgarian, Catalan, Chinese (Simplified), Croatian, Czech, Danish, Dutch, English, Filipino, Finnish, French, German, Greek, Hebrew, Hindi, Indonesian, Italian, Japanese, Korean, Latvian, Lithuanian, Norwegian, Polish, Portugese, Romanian, Russian, Serbian, Slovak, Slovenian, Spanish, Swedish, Ukranian, Vietnamese
Special thanks to 3ff.com for its free flag imagery
December 1st, 2008 at 7:39 pm
Thanks for this! I’ll have to pass it on to people who keep asking me about ways to have their websites translated.
January 5th, 2009 at 11:37 pm
Hey there –
Just stumbled on this thanks to some poking around on Ajaxian, and I thought you might want to know that there is a Google Translation API that you could redo this tool with:
http://code.google.com/apis/ajaxlanguage/
Regards,
Ben
January 21st, 2009 at 12:29 pm
Works fine at first click, but not if I then click on a flag on the translated page to translate into a third language - see http://www.birminghamlawcentre.org.uk/aboutus/translate-index.htm - why not?
January 21st, 2009 at 2:12 pm
Hi Geoff,
The reason that occurs is that you are then translating the translated page, which is hosted by Google. I noticed this issue but didn’t think it was much of a problem because I don’t think many users would translate into one language and then another. It seems like it would only come up if someone were testing the website not actually using it.
I’m planning on redoing the script to use the Google Translation API at some point, which would clear up this issue, but honestly its not a huge priority for me right now.
Thanks for the feedback and good luck,
jr
January 22nd, 2009 at 10:26 am
Hi Jon,
Thanks for your rapid response. I’m going to see if I can hack it so that the flag-links don’t appear on the translated page.
Sorry to take up more of your time - but, both in your demo up above and in my implentation, the Chinese flaglink doesn’t work - it gives a Google error-message “Translation from English into English is not supported” - and I haven’t as yet worked out why.
Geoff
January 22nd, 2009 at 4:35 pm
Hey Geoff,
Thanks for pointing that out, its fixed now.
-jr
January 24th, 2009 at 7:12 am
… sorry, that should be
if (window.location.host==’www.birminghamlawcentre.org.uk’)
{
TranslateIt.init();
document.write(’Translate this page
(select flag):
‘);
}
- the lines got truncated!
January 24th, 2009 at 7:15 am
OK - I give up - I can’t get the JS code to appear properly in my comment - but I hope you get the idea. See the source at
http://www.birminghamlawcentre.org.uk/aboutus/committee.htm
January 24th, 2009 at 6:20 pm
Hey Geoff,
Good idea on not showing the flags if it’s already been translated. I reworked the plugin with a quick regex so it works in all cases.
Also it’s not too classy to link to your site from here, after removing the linkback from the plugin :). I’m just saying is all….
-jr
January 29th, 2009 at 9:04 am
how can i enlarge the flags?
January 30th, 2009 at 6:33 pm
Hi Acaliptos,
You’d have to use another background image and modify the CSS that is applied through Javascript. It won’t be the easiest thing in the world. I like the small icons but if I get some time I’ll put together another set of larger flags and add it as an option in the script.
-jr
January 31st, 2009 at 9:22 am
Thanks jon
April 13th, 2009 at 4:42 pm
Hi Jon… thanks for this. I use this on my blog.
April 26th, 2009 at 8:03 am
I enjoyed reading your blog. I’m an illustrator and designer at heart not a developer - nevertheless I’m now learning action script three. I’m getting there and appreciate those who direct people to strive towards good practice as your site does. My existing website translation thingy is due an update. Thanks for the script. I’ll have to study my site and see how best to fit it.
I think you should put a rectangle around the question mark on the ‘what is Translate-It’ icon at the end of the row of flags. The way it stands now it looks like an indication of a missing image rather than a ‘get some info’ icon.
April 26th, 2009 at 8:07 am
Also your blog is getting pimped rather well on stumble upon - you don’t have to publish this comment.
May 7th, 2009 at 8:11 pm
Hi Alan,
Good idea on using an icon for the info link, I’ll get that into the script soon.
Glad you like it,
jr