As my blog has grown in traffic I’ve noticed more and more readers coming from outside of the US, and while not surprising it does pose new issues. As more and more non-english (or non-native) speaking readers began to read my blog started looking for an automated way to translate into their language of choice. My Spanish is extremely rusty, and my German has been whittled down to a few words, so Google Translate seemed to be a great option.
By including a div and a few lines of Javascript into my page I was able to use Google’s powerful translation engine to add multiple language support to my blog through a simple drop down.
Here is the code for translating from English into all supported languages.
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
When setting up your site you select your original language, choose output languages and Google will output a code snippet for your site. Right now I am only translating my main blog page, but will be rolling out Translate to every page of my site in the near future.
Selecting a new language will instantly change all text on your website if your site is using good design practices. It won’t help you out if you are using images for text (which is generally a no no) and won’t translate text created using SIFR. I haven’t tested every font replacement technology, but Google Translate works great with Typekit.
Customize Google Translate for your site here.
