Google Website Translator Automatic Display Mode

问题

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 language. Every time I select the automatic Display mode the code it gives me is for 'tabbed'. Can anybody tell me what i'm doing wrong or provide the right code?

Thanks in advance.

EDIT:

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

回答1:

I saw another example here:

Detect User's Preferred Language and Google Translate Automatically

This had the parameter autoDisplay: false,

To get only the translation bar when the site language doesn't match I have deleted the container, and used autoDisplay: true,

I get the bar when in another language, but no drop down.

回答2:

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.

回答3:

<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>

回答4:

To display the translator only when your page is different from the user's page, have a server side check and only include the code if necessary.

See Getting Browser Language

Your URL is incorrect. Add "http:". See working example below.

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

<script type="text/javascript">

function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en',
    layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT},
    'google_translate_element');
}

</script>

<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

回答5:

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>

回答6:

<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>

回答7:

<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>

回答8:

<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>

来源：https://stackoverflow.com/questions/17366079/google-website-translator-automatic-display-mode

标签

web

google-translate

google-translator-toolkit