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
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:
And that’s it, your website has become much more global, with translation into tons of languages!
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
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.
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