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>
<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);
var sURL = window.self.location.href.replace('%3D','=')
var iPos = sURL.indexOf('Lng') + 4;
var sLng = sURL.substr(iPos, 2);
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:
<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...
you forgot the "{" on the first code if statement..
ReplyDeleteWell spotted that person. Many thanks.
ReplyDeleteJust used your method and it worked well. However, I refreshed the page, copied that URL, pasted that as my main URL, stripped out your code, deleted the translation page, and this solution worked flawlessly without all the extra code and page.
ReplyDeleteThanks for the comment. I'm not sure from your description what you've done. Perhaps you could include a URL to your web page to illustrate your point.
ReplyDeleteTo be honest, this post is getting a little old now. Google may have improved the service to prevent some of the previous issues with it.
I'm using your method and it works great. My problem is that i don't want the navigation to translate aswell. I'v tried with "notranslate", with no luck. Any tips?
ReplyDeleteI've never used the <span class="notranslate">Don't translate me</span> option, but if that doesn't work the only solutions I can think of are a bit low tech and would affect your site in terms of SEO:
Delete1. Put one or more spaces in between each of the letters of each navigation link (e.g. H O M E) so that Google won't translate it and then use the CSS letter-spacing property to pull them back together (e.g. .nav_link {letter-spacing:-5px;}
2. Use images for your navigation as per 1990s web design.
Hope that helps!
Please, can you provide any live example...
ReplyDeleteHi Bhupendra,
DeleteI was going to list a site, but decided to try it first, only to discover that it is no longer working as expected.
I'm guessing Google have made some changes at their end to prevent it happening.
I will post a note at the top to say this solution isn't currently working and when I get chance, I'll investigate and amend the solution.
My apologies for now.