Adding Google Translate to a web site

Question

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?

I think you should let the user decide to have a poor translation instead of offer this poor translation as your own. — MatTheCat, Apr 06 '16 at 18:02
Is there a way to amend this script to add an rel attribute to the Powered by Translate element in the html document? — Wanderlust Consulting, Apr 22 '21 at 10:33
Thanks for posting this question. I need something like this. Just a question: Does Google offer this as a free service? — curious1, Apr 04 '22 at 15:00
@Jawad, I made a SO post. Could you please look at it? https://stackoverflow.com/questions/71769887/google-translate-just-translate-one-page-only-not-each-page-automatically — curious1, Apr 06 '22 at 15:51

score 31 · Accepted Answer · edited Jul 20 '21 at 08:04

31

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>

edited Jul 20 '21 at 08:04

Neeraj Tangariya

1,159
1
17
29

answered Sep 03 '12 at 07:54

Robin Winslow

10,908
8
62
91

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. – Jawad Sep 03 '12 at 08:00
1

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 Sep 03 '12 at 08:04
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. – Robin Winslow Sep 03 '12 at 08:06
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. – Jawad Sep 03 '12 at 08:07
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. – Robin Winslow Sep 03 '12 at 08:09
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 = http://www.pufs.org/ – Jawad Sep 03 '12 at 08:15
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 Sep 03 '12 at 08:21
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/16178/discussion-between-robin-winslow-and-jawad) – Robin Winslow Sep 03 '12 at 08:23
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 http://www.pufs.org/ it works in all 3 of them. Thanks for you time and efforts. – Jawad Sep 03 '12 at 08:33
Anyway for the "powered by Google Translate" to not show up. Probally not but worth a shot. – Jawad Sep 03 '12 at 08:36
1

I updated it with code to remove "powered by Google Translate", but also with note that this breaks the Attribution Requirements: https://developers.google.com/translate/v2/attribution#attribution-and-logos - though Google probably won't care much for small non-profit projects. – Robin Winslow Sep 03 '12 at 08:53
Great. Thanks a million and three. – Jawad Sep 03 '12 at 08:58
Do I still need this in the HEAD - – Jawad Sep 03 '12 at 09:06
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: http://googletranslate.blogspot.co.uk/2012/05/now-you-can-polish-up-googles.html – Robin Winslow Sep 03 '12 at 09:18
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 http://www.html-5-tutorial.com/ but happens on the http://www.pufs.org/. – Jawad Sep 03 '12 at 10:21
Forget it. I will just make some "space" below it to take care of the "pushing/shifting". Thanks for your Patience. – Jawad Sep 03 '12 at 10:35
1

Yeah if I were you I would wrap the whole thing in a `
` and use CSS to give it the right height so you don't get the jumping effect.
– Robin Winslow Sep 03 '12 at 10:50
Its working fine, I have the fiddle http://jsfiddle.net/krbrey4L/. But it has issue in FF only. Language dropdown not showing languages. – Parkash Kumar Sep 26 '14 at 13:54

score 5 · Answer 2 · edited Aug 03 '17 at 04:19

5

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

edited Aug 03 '17 at 04:19

Obsidian Age

41,205
10
48
71

answered Aug 03 '17 at 03:59

lupita

51
1
1

Add some description to answer.@lupita – Rohit Poudel Aug 03 '17 at 04:20
Above answers works, as needed but if you want to hide the google translate button and use limited languages, then you can customise it, by adding little bit of CSS or Javascript, as shown here: https://qawithexperts.com/article/javascript/using-google-translate-to-translate-language-using-html--jav/403 – Jyoti Oct 06 '22 at 15:35

score 1 · Answer 3 · edited Nov 17 '16 at 12:27

1

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

edited Nov 17 '16 at 12:27

Robin Winslow

10,908
8
62
91

answered Sep 26 '16 at 13:09

Anonymous

11
1

1

As with other answers, this could do with some explanation as to what this achieves exactly. – Robin Winslow Nov 17 '16 at 12:27

score 1 · Answer 4 · edited Dec 10 '16 at 19:39

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

Ruslan Novikov · Answer 5 · 2022-05-12T12:35:13.860

1

2022 This legacy code works in mycase Github works without any Google API Keys

I modified the code of these guys gtranslate.io. An example of how it works on my website https://pogonyalo.com in all modern browsers.

Updated: If you want to select what should be translated - just adding class="notranslate" to the elements that shouldn´t be translated.

edited May 12 '22 at 12:35

answered Mar 31 '21 at 11:35

Ruslan Novikov

1,320
15
21

2

good work! but wonder, is there any option to select what should be translated on page and what can be skipped? – DevAnimal Apr 28 '21 at 07:50
2

Just adding class="notranslate" to the elements that shouldn´t be translated ! – Ruslan Novikov Apr 28 '21 at 11:21
Thanks for the info. I need something like this. A quick question: Does Google offer this as a free service? – curious1 Apr 04 '22 at 15:00
1

@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. – Ruslan Novikov Apr 05 '22 at 19:38
@RuslanNovikov I made a SO post. Could you please look at it? https://stackoverflow.com/questions/71769887/google-translate-just-translate-one-page-only-not-each-page-automatically – curious1 Apr 06 '22 at 15:52
2

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 – Thomas Rbt Jun 08 '22 at 18:27

score 0 · Answer 6 · edited Dec 04 '16 at 16:01

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

score 0 · Answer 7 · edited Jan 23 '17 at 21:08

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

score 0 · Answer 8 · edited Sep 20 '17 at 07:46

0

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

Gilles Gouaillardet

8,193
11
24
30

answered Sep 20 '17 at 07:33

KHALID JABRI

1
1

can you please elaborate a bit ? code-only answer might be flagged as "low quality" and removed. – Gilles Gouaillardet Sep 20 '17 at 07:39

score 0 · Answer 9 · edited Sep 27 '17 at 13:23

Code

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

score 0 · Answer 10 · edited Apr 13 '18 at 19:09

0

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

edited Apr 13 '18 at 19:09

rollstuhlfahrer

3,988
9
25
38

answered Apr 13 '18 at 19:05

ajfet-afrique

1

1

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. – rollstuhlfahrer Apr 13 '18 at 19:10

score 0 · Answer 11 · edited May 31 '20 at 00:35

0

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

edited May 31 '20 at 00:35

Shubham Jain

930
1
14
24

answered Dec 16 '19 at 09:10

rangholiya nikunj

135
1
11

Ashwani Garg · Answer 12 · 2023-05-27T08:10:53.057

//First create a new js file with the translate-google.js and content given below. // You can update css as per your requirements.

  // translate-google.js
(function () {
var gtConstEvalStartTime = new Date();

function d(b) {
    var a = document.getElementsByTagName("head")[0];
    a || (a = document.body.parentNode.appendChild(document.createElement("head")));
    a.appendChild(b)
}

function _loadJs(b) {
    // console.log(b);
    var a = document.createElement("script");
    a.type = "text/javascript";
    a.charset = "UTF-8";
    a.src = b;
    d(a)
}

function _loadCss(b) {
    var a = document.createElement("link");
    a.type = "text/css";
    a.rel = "stylesheet";
    a.charset = "UTF-8";
    a.href = b;
    d(a)
}

function _isNS(b) {
    b = b.split(".");
    for (var a = window, c = 0; c < b.length; ++c)
        if (!(a = a[b[c]])) return !1;
    return !0
}

function _setupNS(b) {
    b = b.split(".");
    for (var a = window, c = 0; c < b.length; ++c) a.hasOwnProperty ? a.hasOwnProperty(b[c]) ? a = a[b[c]] : a = a[b[c]] = {} : a = a[b[c]] || (a[b[c]] = {});
    return a
}
window.addEventListener && "undefined" == typeof document.readyState && window.addEventListener("DOMContentLoaded", function () {
    document.readyState = "complete"
}, !1);
if (_isNS('google.translate.Element')) {
    return
}(function () {
    var c = _setupNS('google.translate._const');
    c._cest = gtConstEvalStartTime;
    gtConstEvalStartTime = undefined;
    c._cl = 'en';
    c._cuc = 'googleTranslateElementInit2';
    c._cac = '';
    c._cam = '';
    c._ctkk = eval('((function(){var a\x3d3002255536;var b\x3d-2533142796;return 425386+\x27.\x27+(a+b)})())');
    var h = 'translate.googleapis.com';
    var s = (true ? 'https' : window.location.protocol == 'https:' ? 'https' : 'http') + '://';
    var b = s + h;
    c._pah = h;
    c._pas = s;
    c._pbi = b + '/translate_static/img/te_bk.gif';
    c._pci = b + '/translate_static/img/te_ctrl3.gif';
    c._pli = b + '/translate_static/img/loading.gif';
    c._plla = h + '/translate_a/l';
    c._pmi = b + '/translate_static/img/mini_google.png';
    c._ps = b + '/translate_static/css/translateelement.css';
    c._puh = 'translate.google.com';
    _loadCss(c._ps);
    _loadJs(b + '/translate_static/js/element/main.js');
})();
})();

// After that include that file in your html file.

{{-- Google Language Translator  START --}}
<style>
.google-translate {
    display: inline-block;
    vertical-align: top;
    padding-top: 15px;
}

.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

#google_translate_element {
    display: none;
}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0px !important;
}

</style>

<script src="{{asset('js/translate-google.js')}}"></script>



<script type="text/javascript">
function googleTranslateElementInit2(){
    new google.translate.TranslateElement({
                    pageLanguage:'en',
                    includedLanguages: 'en,es',
        // https://ctrlq.org/code/19899-google-translate-languages
        // includedLanguages: 'en,it,la,fr',
        // layout:     google.translate.TranslateElement.InlineLayout.SIMPLE,
        autoDisplay:true
    },'google_translate_element2');
    var a = document.querySelector("#google_translate_element select");
    // console.log(a);

    if(a){
        a.selectedIndex=1;
        a.dispatchEvent(new Event('change'));
    }
}
</script>

<ul class="navbar-nav my-lg-0 m-r-10">
<li>
    <div class="google-translate">
        <div id="google_translate_element2"></div>
    </div>
</li>

Without any commenting what the various parts do this is useless to those who come here to ask because they have no clue. — Thomas Tempelmann, Jan 28 '23 at 12:37

score 0 · Answer 13 · answered Jan 21 '21 at 19:07

Implementing Google translate html code is very easy. Use this code on your project, hope it will help you.

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

score -1 · Answer 14 · edited Jun 28 '16 at 00:13

-1

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'th,zh-CN,zh-TW', 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 Jun 28 '16 at 00:13

andrewsi

10,807
132
35
51

answered Jun 27 '16 at 21:05

Fusesa Line

1
1

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. – andrewsi Jun 28 '16 at 00:14

score -3 · Answer 15 · edited Aug 13 '16 at 09:31

Use:

c._ctkk=eval('((function(){var a\x3d2143197373;var b\x3d-58933561;return 408631+\x27.\x27+(a+b)})())');

<script type="text/javascript"> 
    (function(){
        var d="text/javascript",e="text/css",f="stylesheet",g="script",h="link",k="head",l="complete",m="UTF-8",n=".";
        function p(b){
            var a=document.getElementsByTagName(k)[0];
            a||(a=document.body.parentNode.appendChild(document.createElement(k)));
            a.appendChild(b)}
        function _loadJs(b){
            var a=document.createElement(g);
            a.type=d;
            a.charset=m;
            a.src=b;
            p(a)}
        function _loadCss(b){
            var a=document.createElement(h);
            a.type=e;
            a.rel=f;
            a.charset=m;
            a.href=b;
            p(a)}
        function _isNS(b){
            b=b.split(n);
            for(var a=window,c=0;c<b.length;++c)
                if(!(a=a[b[c]])) return ! 1;
            return ! 0}
        function _setupNS(b){
            b=b.split(n);
            for(var a=window,c=0;c<b.length;++c)
                a.hasOwnProperty?a.hasOwnProperty(b[c])?a=a[b[c]]:a=a[b[c]]={}:a=a[b[c]]||(a[b[c]]={});
            return a}
        window.addEventListener&&"undefined"==typeof document.readyState&&window.addEventListener("DOMContentLoaded",function(){document.readyState=l},!1);
    if (_isNS('google.translate.Element')){return}
    (function(){
        var c=_setupNS('google.translate._const');
        c._cl='en';
        c._cuc='googleTranslateElementInit1';
        c._cac='';
        c._cam='';
        c._ctkk=eval('((function(){var a\x3d2143197373;var b\x3d-58933561;return 408631+\x27.\x27+(a+b)})())');
        var h='translate.googleapis.com';
        var s=(true?'https':window.location.protocol=='https:'?'https':'http')+'://';
        var b=s+h;
        c._pah=h;
        c._pas=s;
        c._pbi=b+'/translate_static/img/te_bk.gif';
        c._pci=b+'/translate_static/img/te_ctrl3.gif';
        c._pli=b+'/translate_static/img/loading.gif';
        c._plla=h+'/translate_a/l';
        c._pmi=b+'/translate_static/img/mini_google.png';
        c._ps=b+'/translate_static/css/translateelement.css';
        c._puh='translate.google.com';
        _loadCss(c._ps);
        _loadJs(b+'/translate_static/js/element/main.js');
    })();
    })();
</script>

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. — Brian Tompsett - 汤莱恩, Aug 13 '16 at 09:31

Adding Google Translate to a web site

15 Answers15

Linked

Related