Please note, Google have made changes to their translation service and the following solution is no longer working. We hope to investigate it soon and post amendments.
If you find a solution in the meantime, please feel free to post it in the comments.
After trawling through the internet for years (like most web developers do) to find coding solutions and thus saving hours of our own time, we thought it was about time we returned the favour.
Here's one that many people seem to be struggling with for which we've developed a simple solution. There's already lots of tips out there to remove the Google Translate frame when dynamically translating your website, but as most of them point out, it only works once. Try to translate to a subsequent language and Google falls over.
The solution? Read on...
Remove Google Frame
Just to recap, the first thing we need to do is make sure the Google Translate frame is removed when it appears. This is done by placing the following code just below the
<body> tag of the page you wish Google to translate first (the home page is probably best):
<script language="javascript" type="text/javascript">
if (window.top !== window.self) {
window.top.location = window.self.location;
}
</script>
Set-up a Translate Page
Next, set up a blank page called
Translate.[Ext] which should be placed in the root folder of your website.
Ext can be
ASP,
PHP or whatever coding you use. Or it can be just
Translate.htm as the only thing it will have in it is HTML and Javascript:
<html>
<head>
<title>Translate</title>
</head>
<body>
<p>Translating...</p>
</body>
</html>
Link to Translate Page
Somewhere on your site you'll need to create your links for calling the
Translate.[Ext] page as follows:
<ul>
<li><a href="/Translate.[Ext]?Lng=es">Spanish</a></li>
<li><a href="/Translate.[Ext]?Lng=fr">French</a></li>
<li><a href="/Translate.[Ext]?Lng=de">German</a></li>
<li><a href="/Translate.[Ext]?Lng=it">Italian</a></li>
<li><a href="/Translate.[Ext]?Lng=pt">Portugese</a></li>
<li><a href="/Translate.[Ext]?Lng=en">English</a></li>
</ul>
They don't need to appear in a list obviously and if you prefer, you can display your links as flags. A quick search on Google Images for 'Translate Flags' or similar will reveal hundreds of free ones.
You can add extra links using
Lng=[Code], where
Code is the language you want to translate to. See Google for a full list of
translatable languages.
Translate Page Code
Finally, insert the following
Javascript code below the
<body> tag of your new
Translate.[Ext] page. This code will ensure that every time the Translate page is called, the user is freshly redirected to a translated version of your home page (or another page of your choosing):
<script language="javascript" type="text/javascript">
var sURL = window.self.location.href.replace('%3D','=')
var iPos = sURL.indexOf('Lng') + 4;
var sLng = sURL.substr(iPos, 2);
if (sLng == 'en') {
window.self.location.href = 'http://www.[URL]';
}
else {
window.self.location.href = 'http://www.google.com/translate_c?hl=en&ie=UTF8&langpair=en|' + sLng + '&u=[URL]';
}
</script>
The
URL is the domain of your site including www (if relevant) e.g.
www.easierthan.co.uk. If you want to point to something other than your home page, include the full path and make sure that the
Remove Google Frame code above is placed on that page.
In the above example, English
(en) is the normal language of the site. This can easily be swapped to your own native language by changing
sLng == 'en' to your country's code. All it does is redirect the user without calling Google Translate, thus setting their view back to normal.
No Javascript
For anyone who does not have Javascript enabled you may also want to add the following to your
Translate.[Ext] page:
<noscript>
<p>Sorry, the automatic translation of this site using <a href="http://www.google.co.uk/translate">Google Translate</a> services requires Javascript to be enabled on your browser.</p>
</noscript>
Questions
The code is fairly simple so we haven't included a walkthrough for now, but we might add one at a later date if there is a demand.
If you have any questions, submit them below, but please make sure you've read the whole post before asking for assistance.
Possible Errors
When copying the examples, make sure each piece of Javascript is on its own line. Wherever it is clearly wrapped above, you need to ensure that it isn't still on more than one line when pasted into your code.
Items in square brackets should be replaced with your own value as explained. Do NOT include either the [ or ] characters.
Copyright Free
The above is all offered without copyright so feel free to use and adapt it as you wish.
If you have the opportunity though, spread the word and perhaps add a link somewhere back to this page.
Enjoy...
Looking for a reliable web developer local to the Preston area? EasierThan Website Design have
a number of satisfied clients based in Preston and the wider Lancashire area.
