Embedding language translation feature on website

[Darren_RSA]

Hi all,

I am having an issue trying to embed a feature that allows a user to translate a webpage into the country of their choice.

Below, I have two sections of code and need to try take from both of them and make one section.

Let me explain...

First Part:

This code is from Google, it embeds a dropdown box where the user can select which language he/she would like.
Then it automatically translates the entire page to that language. (Which is the one part I want to keep)

Paste this code onto your website
Copy and paste the following code snippets onto every page you want to translate
Place this meta tag before the closing </head>

<meta name="google-translate-customization" content="32c2c762573f4c29-f694ecbfa1146c29-gb7889196ce7269c6-14"></meta>

Place this snippet where you'd like to display the Website Translator plugin on your page

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true, gaTrack: true, gaId: 'UA-32178549-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Now for the second part:

This code embeds flags of each language (which I want to use) on the webpage, except when a user clicks it, they are directed to the Google Translate site.

<form action="http://www.google.com/translate" >
<script language="JavaScript">
<!-- 
document.write ("<input name=u value="+location.href+" type=hidden>") 
// --> 
</script>

<input name="hl" value="en" type="hidden">
<input name="ie" value="UTF8" type="hidden">
<input name="langpair" value="" type="hidden">
<input name="langpair" value="en|fr" title="French" src= "http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|de" title="German" src= "http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|it" title="Italian" src= "http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|pt" title="Portuguese" src= "http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|es" title="Spanish" src= "http://photos1.blogger.com/img/43/1633/320/13539946_2fabed0dbf.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|ja" title="Japanese" src= "http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|ko" title="Korean" src= "http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="en|zh-CN" title="Chinese Simplified" src= "http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair2" value="en|ar" title="Arabic" src= "http://photos1.blogger.com/blogger/3709/485/1600/arabic-flag.gif" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30" />
</form>

Is there any way some one on here can help me out with this, I need to have the different flags shown as it is in the second part, but when I click on which ever flag, it needs to translate the webpage as if I was using the dropdown box in the first part.

Sorry for a long post.

[yaseenyahya]

Integrating Translate-It into your site is a piece of cake. Just upload the http://jonraasch.com/downloads/translate-it.zip file to your website, and include these lines of Javascript:

<script type="text/javascript" src="translate-it.js"></script>

<script type="text/javascript">
TranslateIt.init();
</script>

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

[Darren_RSA]

Thanks, will this work exactly how I explained it? Translating the webpage instead of redirecting the user to another site?

This is basically exactly the same as the second part. It takes me to the Google Translate page and has my website inside a Google Window.
I need it to perform like the first part (stays on my website and translates everything, this has to be possible?)

[Darren_RSA]

Bump....

[Philip M]

Originally Posted by Darren_RSA

I need it to perform like the first part (stays on my website and translates everything, this has to be possible?)

No, that is not possible unless you yourself provide the translation code. If you only want two or three languages you would do best to make an English page, a French page and a German page.