Google Website Translator Automatic Display Mode

Question

I\'m trying to include google website translator on my website. I want to use the automatic thing so the bar shows up if your browser language is different to the page langu

Answer 1

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'id', includedLanguages: 'id', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer 2

<div id="google_translate_element"></div><script type="text/javascript">


function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer 3

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer 4

Funny how Google's code retrieval for the translator automatic function is broken, isn't it? I tried many iterations in the Rincewind level Wizard they have to do the custom setup, but the default was to a Tabbed function that doesn't fit with my website design.

This is for an English site, change the language code for your site default language where the bar isn't supposed to display. Remove the tracking if you're not using it.

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

Answer 5

While trying to figure out why the autoDisplay was not functioning, i.e. the translate menu always displayed, I found the W3C Internationalization Checker: http://validator.w3.org/i18n-checker/

The W3C Internationalization Checker alerted me that the Accept Headers were returning: Accept-Language: en-US,en;q=0.8

The code generated by Google that I originally pasted into my site files only had one value to check the page language. But I edited it, see below, and passed an array into the pageLanguage key and I think it's now working.

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: ['en', 'en-us'], autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-403844-8'}, 'google_translate_element');
    }
</script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

I ran tests as best I could by changing the language settings in Google Chrome. But I don't fully trust that it's working. The translate menu ought to appear for anyone without en or en-US configured in their browsers. You could pass in any language to the array to properly configure it for your needs.

If anyone has any feedback on this I'd appreciate it. Hope it helps.

Answer 6

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
          pageLanguage: 'es', 
          includedLanguages: 'es', 
          layout: google.translate.TranslateElement.InlineLayout.SIMPLE
      }, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>