rants, ranks and (r)evolutions

Easily add translation capabilities to your website

I was looking at adding on-the-fly translation to a Client’s website and after some research I found a couple of easy ways to achieve that. I don’t like functionality that requires a lot of scripts, large CSS files and cumbersome implementations, ideally I prefer small clean scripts that work well cross browser, scripts that are easy to modify and are well documented.

So I will be discussing here Google Website Translator and TranslateThis Button and I am also aware of the existence of Yahoo’s Babel Fish and Microsoft Translator but I have not explore them and will not discuss them here for that reason.

For the translation feature I had four main requirements;

  1. Must make only one request
  2. Have support for Google Analytics
  3. Must be a simple button not a toolbar
  4. Provide on-the-fly translation without page reload

I admit Google Chrome already offers translation in the browser but just in case you don’t use Chrome or have this feature disabled, the following methods are great and work well.

Two simple ways to easily and quickly add translation to your website:

Method #1

Google Website Translator

For me, it was the obvious choice. It’s simple, quick to implement and ticks all the boxes, however it lacked documentation to explain all the possible settings and it caused the site to have a long empty space past the end of the footer as if something was there.

To add it, first go to the Google Website Translator page and click [Add to your website now] then login to your Google account. After that fill in all the settings and it will give some code like this:

Inside <head>:

<meta name="google-translate-customization" content="xxxxxxxx" />

Inside <body>:

<div id="google_translate_element"></div>

Right before </body>:

<script type="text/javascript">function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'en', gaTrack:true, gaId:'UA-yyyyyyyy-y'}, 'google_translate_element');}</script>
<script type="text/javascript" src="//"></script>

So as you can see, it’s very easy to add this to a website, just a meta tag in the <head> which by the way you need the customization ID (given to you) to replace the xxxxxxxx.

Next you need the HTML <div> element placed in the body where you want the Google Translator button and dropdown to appear.

And at last you need the <script>s at the bottom of your HTML preferably right before the </body>. The first one is the object creation with some parameters and the second <script> is the remote javascript that will inject the dropdown in the [google_translate_element] <div> element. You will also need to change the yyyyyyyy-y with your Google Analytics ID if you need that functionality, if not, you may remove the whole [gaTrack:true, gaId:'UA-yyyyyyyy-y'] bit from the code. As you can see, not bad for all it does. It’s non-intrusive, simple and powerful. The whole code can be copy/pasted from Google Website Translator settings page which you can customise further. Don’t forget to re-get the code after every customisation/setting change.

Method #2

TranslateThis Button

I tried this method after some frustrations with Google Website Translator and I’m very pleased with the results. It’s equally as powerful and still uses Google for its inner translation workings but presentation wise it’s different as it offers more styling possibilities.

To get it, go to the TranslateThis Button page and there’s no need to login, simple grab the code and paste to your website. The documentation is great and goes into every option’s detail, just the way I like it. Here’s the code:

Inside <body>:

<div id="translate-this"><a href="" class="translate-this-button">Translate This</a></div>

Right before </body>:

<script type="text/javascript" src=""></script>
<script type="text/javascript">TranslateThis({noBtn:true,GA:true});</script>

Just like method #1 here we also have an HTML <div> element with an anchor inside it which by the way you must keep the href, if you remove or alter it, the button won’t work. If you are concerned about the “follow” out-link you can always rel="nofollow" it and it would still work normally.

Next we have the object and the remote script which I always place at the end of the HTML usually right before the </body>. My object initialises with parameters for no button (so I can create one in CSS) and also support for Google Analytics, but, if you don’t need any of that, remove all parameters and initialise just with TranslateThis(). Make sure you read the documentation to be familiar with all the settings.

In name of completeness here’s the CSS I used here in my website to style the button and languages popup:


#translate-this a.translate-this-button { display:block; float:right; width:180px; padding:2px 0; color:#000; font-size:14px; text-align:center; text-transform:uppercase; background-color:#f7f7f7; background:-webkit-linear-gradient(top, #e7e7e7 0%, #f7f7f7 50%, #b7b7b7 100%); background:linear-gradient(to bottom, #e7e7e7 0%, #f7f7f7 50%, #b7b7b7 100%); border:1px solid #bdc3c7; -webkit-border-radius:5px; border-radius:5px; -webkit-text-shadow:0 1px 1px #fff; text-shadow:0 1px 1px #fff; -webkit-box-shadow:0px 1px 2px #444; box-shadow:0px 1px 2px #444; }
div.ttb-panel { border:1px solid #bdc3c7; -webkit-border-radius:5px; border-radius:5px; -webkit-box-shadow:0px 1px 10px #000; box-shadow:0px 1px 10px #000; }
div.ttb-panel a, div.ttb-translating a, div.ttb-undo a { line-height:14px !important; text-decoration:none !important; }


Both of these methods are great and offer on-the-fly translation without reloading the page or sending you elsewhere. There’s also a setting to remember the chosen language for subsequent pages on your website.

I will keep updating this page with new information as it becomes available and if you think I missed something please let me know in the comments below and I will follow through.

Leave a comment below and let me know what you think...

NOTE: For complex or long technical questions email me directly.

comments powered by Disqus