Adding Google Translate to a web site

javascript html css google-translate

161,457

Solution 1

Here's the markup that should work, both locally and remotely - copied from https://www.w3schools.com/howto/howto_google_translate.asp:

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

Solution 2

<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      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>

Solution 3

to allow google translate to be mobile friendly get rid of the layout section, layout: google.translate.TranslateElement.InlineLayout.SIMPLE

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

It works on my site and it is mobile friendly. https://livinghisword.org/articles/pages/whoiscernandisourworld.php

Solution 4

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

View more solutions

161,457

Author by

Jawad

Updated on May 13, 2022

Comments

Jawad about 2 years

Looking here Google Translate I get the following code.

<meta name="google-translate-customization" content="9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436-c"></meta>

<div id="google_translate_element">
</div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', 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>

But Looking here html-5-tutorial, at the top right, I see the following code:

<div class="translate">
  <div id="google_translate_element">
    <div dir="ltr" class="skiptranslate goog-te-gadget">
      <div id=":0.targetLanguage">
        <select class="goog-te-combo">
          <option value="">Select Language</option>
          <option value="af">Afrikaans</option>
          <option value="sq">Albanian</option>
          <option value="ar">Arabic</option>
          <option value="hy">Armenian</option>
          <option value="az">Azerbaijani</option>
          <option value="eu">Basque</option>
          <option value="be">Belarusian</option>
          <option value="bn">Bengali</option>
          <option value="bg">Bulgarian</option>
          <option value="ca">Catalan</option>
          <option value="zh-CN">Chinese (Simplified)</option>
          <option value="zh-TW">Chinese (Traditional)</option>
          <option value="hr">Croatian</option>
          <option value="cs">Czech</option>
          <option value="da">Danish</option>
          <option value="nl">Dutch</option>
          <option value="eo">Esperanto</option>
          <option value="et">Estonian</option>
          <option value="tl">Filipino</option>
          <option value="fi">Finnish</option>
          <option value="fr">French</option>
          <option value="gl">Galician</option>
          <option value="ka">Georgian</option>
          <option value="de">German</option>
          <option value="el">Greek</option>
          <option value="gu">Gujarati</option>
          <option value="ht">Haitian Creole</option>
          <option value="iw">Hebrew</option>
          <option value="hi">Hindi</option>
          <option value="hu">Hungarian</option>
          <option value="is">Icelandic</option>
          <option value="id">Indonesian</option>
          <option value="ga">Irish</option>
          <option value="it">Italian</option>
          <option value="ja">Japanese</option>
          <option value="kn">Kannada</option>
          <option value="ko">Korean</option>
          <option value="la">Latin</option>
          <option value="lv">Latvian</option>
          <option value="lt">Lithuanian</option>
          <option value="mk">Macedonian</option>
          <option value="ms">Malay</option>
          <option value="mt">Maltese</option>
          <option value="no">Norwegian</option>
          <option value="fa">Persian</option>
          <option value="pl">Polish</option>
          <option value="pt">Portuguese</option>
          <option value="ro">Romanian</option>
          <option value="ru">Russian</option>
          <option value="sr">Serbian</option>
          <option value="sk">Slovak</option>
          <option value="sl">Slovenian</option>
          <option value="es">Spanish</option>
          <option value="sw">Swahili</option>
          <option value="sv">Swedish</option>
          <option value="ta">Tamil</option>
          <option value="te">Telugu</option>
          <option value="th">Thai</option>
          <option value="tr">Turkish</option>
          <option value="uk">Ukrainian</option>
          <option value="ur">Urdu</option>
          <option value="vi">Vietnamese</option>
          <option value="cy">Welsh</option>
          <option value="yi">Yiddish</option>
        </select>
      </div>
      Powered by 
      <span style="white-space: nowrap;">
        <a class="goog-logo-link" href="http://translate.google.com" target="_blank">
          <img style="padding-right: 3px;" src="http://www.google.com/images/logos/google_logo_41.png" width="37" height="13">
          Translate
        </a>
      </span>
    </div>
  </div>
  <script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en'
      }, 'google_translate_element');
    }
  </script>
</div>

The former works on a live site only and not on a local computer and therfore I can not target and style it using CSS. Also it does not contain any SELECT and OPTION markup.

The later contains the SELECT and OPTION markup but if I copy and paste the whole code, it does not work on a live site.

I guess my question would be how to implement the google translate using the later markup?

Shivanshu over 10 years

try stackoverflow.com/a/12999313/2558535
MatTheCat about 8 years

I think you should let the user decide to have a poor translation instead of offer this poor translation as your own.
Wanderlust Consulting about 3 years

Is there a way to amend this script to add an rel attribute to the Powered by Translate <a> element in the html document?
curious1 about 2 years

Thanks for posting this question. I need something like this. Just a question: Does Google offer this as a free service?
Jawad about 2 years

@curious1: Yes its free
curious1 about 2 years

@Jawad, I made a SO post. Could you please look at it? stackoverflow.com/questions/71769887/…

Jawad almost 12 years

That does not work. Althought fixing the path makes the SELECT show up on local computer, it does not have any OPTION elements in it and no markup is generated.
Robin Winslow almost 12 years

It works perfectly for me in Chrome. What browser are you using? If you're using Chrome or Firefox use the developer tools to view the "network" tab and then you can see which requests are failing.
Robin Winslow almost 12 years

Oh sorry you are right that it doesn't generate a drop-down list. It uses an iFrame, which you won't be able to style. Apologies. I'll look into getting a drop-down to work.
Jawad almost 12 years

I am using IE9, FF14 and GG21 on Windows 7 and with developer tools. On a local computer no OPTION elements are generated. Is it not that the SELECT & OPTION elements are hardcoded as in the later example.
Robin Winslow almost 12 years

I changed my answer, try the markup I gave you, see if it works. It works for me, and does actually generate a select box now.
Jawad almost 12 years

Sorry mate. Same problem. Even with the above code, does not work on local computer but works on live site. But that i sthe same as before. It worked on live stite but not on the local computer with the old code. There are no SELECT or OPTION elements present as they are hard coded in the later example. Live example = pufs.org
Robin Winslow almost 12 years

If you put my new code into your live site it will generate you a select box, rather than the iframe, which you will be able to style. I have no idea why it's not working locally for you. For me no option elements appear in IE9, but it works fine in CHrome - I think it's probably something to do with IE's security policy. Are you sure it doesn't work in Chrome?
Robin Winslow almost 12 years

let us continue this discussion in chat
Jawad almost 12 years

My bad. Thank you mate. On local computer, it works on GG, on FF it shows only the SELECT not the OPTION and on IE, it just crashes the browser (LOL - NO surprise there). BUT on live site pufs.org it works in all 3 of them. Thanks for you time and efforts.
Jawad almost 12 years

Anyway for the "powered by Google Translate" to not show up. Probally not but worth a shot.
Robin Winslow almost 12 years

I updated it with code to remove "powered by Google Translate", but also with note that this breaks the Attribution Requirements: developers.google.com/translate/v2/… - though Google probably won't care much for small non-profit projects.
Jawad almost 12 years

Great. Thanks a million and three.
Jawad almost 12 years

Do I still need this in the HEAD - <meta name="google-translate-customization" content="9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436‌-c" />
Robin Winslow almost 12 years

I don't think so. That appears to be so that you can customise the way the translator works, which you probably don't need. See here: googletranslate.blogspot.co.uk/2012/05/…
Jawad almost 12 years

why is there delay in loading the translation SELECT element. The page loads, than after a short delay, the SELECT loads which pushes the elements below it down and than the OPTION load. The "push" causes the elements below in the normal flow of the document to shift down which can be "seen" in the local computer as well as live site. I tried to move the SCRIPT link as well the embedded SCRIPT to the top in the HEAD so it loads before the translation div but it does not improve. Any ideas. Does not happen on the html-5-tutorial.com but happens on the pufs.org.
Jawad almost 12 years

Forget it. I will just make some "space" below it to take care of the "pushing/shifting". Thanks for your Patience.
Robin Winslow almost 12 years

Yeah if I were you I would wrap the whole thing in a <div> and use CSS to give it the right height so you don't get the jumping effect.
Parkash Kumar almost 10 years

Its working fine, I have the fiddle jsfiddle.net/krbrey4L. But it has issue in FF only. Language dropdown not showing languages.
andrewsi almost 8 years

I've edited this so that your HTML is visible, but it could probably do with some explanation as to what you're trying to do.
Brian Tompsett - 汤莱恩 almost 8 years

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". We make an effort here to be a resource for knowledge.
Robin Winslow over 7 years

As with other answers, this could do with some explanation as to what this achieves exactly.
Rohit Poudel almost 7 years

Add some description to answer.@lupita
Gilles Gouaillardet almost 7 years

can you please elaborate a bit ? code-only answer might be flagged as "low quality" and removed.
rollstuhlfahrer about 6 years

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.
DevAnimal about 3 years

good work! but wonder, is there any option to select what should be translated on page and what can be skipped?
Ruslan Novikov about 3 years

Just adding class="notranslate" to the elements that shouldn´t be translated !
curious1 about 2 years

Thanks for the info. I need something like this. A quick question: Does Google offer this as a free service?
Ruslan Novikov about 2 years

@curious1 Yes TRANSLATION is a basic free Google service for users. Here used JavaScript to translate your website content on the web browser side. The disadvantage of this approach is SEO. Because Google Bot will only crawl your website content in one source language.
curious1 about 2 years

@RuslanNovikov I made a SO post. Could you please look at it? stackoverflow.com/questions/71769887/…
Thomas Rbt about 2 years

I would like to upvote but you provide a code with obfuscation and it doesn't work, and I can't debug it at all cause of that. Seriously, who obfusque a simple code like this ?? Downvoted