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

By the way, here is some info on how to ask a question. Congrats on joining us! http://stackoverflow.com/questions/how-to-ask — Dan Grahn, Jun 28 '13 at 13:45
Thanks for the reply @screenmutt. I've edited post with the code. — user2532030, Jun 28 '13 at 13:56
Next time make your code a little more readable. But thanks. — Dan Grahn, Jun 28 '13 at 14:10
I'm having the same issue as you. The Automatic setting isn't sticking. If you look at your settings for the website it'll keep resetting back to tabbed even when you choose Automatic. It should be changing the value of the "layout" option, but it's not clear what the value SHOULD be. — Ryan Giglio, Aug 09 '13 at 19:30
fix for the automatic setting issue - http://stackoverflow.com/a/32020889/4258817 — Mousey, Aug 15 '15 at 02:30

score 2 · Answer 1 · edited May 23 '17 at 10:31

2

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.

edited May 23 '17 at 10:31

Community

1
1

answered Dec 04 '14 at 13:16

gm-sb

21
2

score 2 · Answer 2 · answered Jul 07 '15 at 23:33

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.

score 0 · Answer 3 · edited May 23 '17 at 12:18

0

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>

edited May 23 '17 at 12:18

Community

1
1

answered Jun 28 '13 at 14:10

Dan Grahn

9,044
4
37
74

Thanks for the answer, but I'm still getting the "select language" drop down box. I only want the bar to show up when the browser language is different to the website. I don't really want to go down the display:none route. I'm sure you used to be able to do it very easily... – user2532030 Jun 28 '13 at 14:27
6

In the settings where you generate that code, Google has an option called "Automatic" that only is supposed to display the translation bar at the top of your browser when you are using a different language. When you select that option, it ignores your choice and gives you code to display the dropdown all the time (the "Tabbed" option he refers to in the question). What he's asking is the code for Google's built-in automatic display since their code generator is broken. – Ryan Giglio Aug 09 '13 at 19:11
1

The layout option should have a different value to reflect the "automatic" setting, but it's not totally clear what that would be, and I can't find a site with the code on it to copy it from. – Ryan Giglio Aug 09 '13 at 19:29
1

@RyanGiglio the same problem in 2016, the code generator ignores the "automatic" option. Did you find a solution? – JCarlosR Jul 29 '16 at 06:01

score 0 · Answer 4 · answered Jun 30 '15 at 19:27

0

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>

answered Jun 30 '15 at 19:27

Fiasco Labs

6,457
3
32
43

Basically what the answer by @gm-sb above is getting at, but with full working code so you can have it fully functional in one go. – Fiasco Labs Jun 30 '15 at 19:29
this still prompts you to choose a language, even when your language is the same as the page's, see new solution here - http://stackoverflow.com/a/32020889/4258817 – Mousey Aug 15 '15 at 02:29
Hmm, odd because the above code works on my website without that little oddity. Will keep this in mind if it decides to go rogue on me... Just one of the little things out there that exist to drive my work partner crazy as he gets to fight random weirdness. – Fiasco Labs Aug 15 '15 at 02:42
I went through different settings eg autoDisplay and it didn't work, using a stock Android browser it prompted for language every single time even when language was the same as the page's language. Localization (en-US) did not cause the problem but also needed to be solved. I had no issues with the google wizard thing, only with the code it produced. Could it be that I was using Float rather than inline layout? – Mousey Aug 15 '15 at 03:08

score 0 · Answer 5 · edited May 19 '17 at 02:45

0

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

edited May 19 '17 at 02:45

Pang

9,564
146
81
122

answered May 19 '17 at 02:03

jeffrey

9
2

1

Can you explain something briefly? – Robert May 19 '17 at 02:27

score -1 · Answer 6 · edited Aug 05 '16 at 12:26

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

score -1 · Answer 7 · edited Jan 30 '17 at 19:00

-1

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

edited Jan 30 '17 at 19:00

Floern

33,559
24
104
119

answered Jan 30 '17 at 18:56

user7491434

1

1

Other than you need to provide some description – ravthiru Jan 30 '17 at 22:19

score -1 · Answer 8 · edited Jul 06 '17 at 20:30

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

Google Website Translator Automatic Display Mode

8 Answers8

Linked