How to customize google-Translate on my website?

Asked

Viewed 8,438 times

3

How to place language flag images, and when you click on the flag, the entire content of the site changes language?

I’m using this code:

html:

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

Javascript:

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

There is how to put flags instead of select field ?

Code caught in: https://translate.google.com/manager/website/

javascript google google-translate
  • 1

    This question is relevant, but it seems to me to be wide enough to simply answer. Can you be more specific? For example, clicking on the flag goes to different urls right? what language do you have on the server? know how to take any of the necessary steps? Do you have any idea how to?

  • 1

    Your question is very broad and without evidence of effort. Try to improve by describing the attempts you have already made or what tools you are trying to use. Finally, be a little more specific.

  • Your question eh about php or about javascript and google api?

  • The question was relevant, only it was not well prepared. From what I saw, just follow the steps and provide the necessary information and only. Then enter the code that the wizard gave you where you want the dropdown to appear for the user to choose the language.

  • I edited the answer http://answall.com/a/82760/3635 and put an example that is just copy and paste.

1 answer

3

When Voce executes the code on the page it generates an HTML in this approximate format:

<div id="google_translate_element">
    <div class="skiptranslate goog-te-gadget" dir="ltr">
        <div id=":0.targetLanguage">
            <select class="goog-te-combo">
                <option value="">Selecione o idioma</option>
                <option value="af">africâner</option>
                <option value="ar">árabe</option>
            </select>
        </div>Powered by 
        <span style="white-space:nowrap">
            <a class="goog-logo-link" href="https://translate.google.com" target="_blank">
                <img src="https://www.google.com/images/logos/google_logo_41.png" width="37px" height="13px" style="padding-right: 3px">Tradutor
                </a>
            </span>
        </div>
    </div>

Then Voce must first hide the combo with CSS:

#google_translate_element {
    display: none;
}

And with javascript you can change the value of the combo by creating icons that are flags for example.

Complete code

See that there is a function called trocarIdioma, she who does the magic, just copy the HTML below and paste into a page and run via Apache (http://localhost)

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #google_translate_element {
        display: none;
    }
    /*
    .goog-te-banner-frame {
        display: none !important;
    }
    body {
        position: static !important;
        top: 0 !important;
    }
    */
    </style>
</head>
<body>
    <div id="google_translate_element" class="boxTradutor"></div>

    <a href="javascript:trocarIdioma('es')"><img alt="espanhol" src="images/es.png"></a>
    <a href="javascript:trocarIdioma('en')"><img alt="ingles" src="images/en.png"></a>

    <p>Olá, mundo!</p>


    <!-- O Javascript deve vir depois -->

    <script type="text/javascript">
    var comboGoogleTradutor = null; //Varialvel global

    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
            pageLanguage: 'pt',
            includedLanguages: 'en,es',
            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
        }, 'google_translate_element');

        comboGoogleTradutor = document.getElementById("google_translate_element").querySelector(".goog-te-combo");
    }

    function changeEvent(el) {
        if (el.fireEvent) {
            el.fireEvent('onchange');
        } else {
            var evObj = document.createEvent("HTMLEvents");

            evObj.initEvent("change", false, true);
            el.dispatchEvent(evObj);
        }
    }

    function trocarIdioma(sigla) {
        if (comboGoogleTradutor) {
            comboGoogleTradutor.value = sigla;
            changeEvent(comboGoogleTradutor);//Dispara a troca
        }
    }
    </script>
    <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>

If you want the top bar of Google Translator to go away (which I don’t recommend, because I find it relatively useful for when problems occur) just remove the /* and the */ in order to activate the CSS rules I commented on, it should look like this:

<style type="text/css">
#google_translate_element {
    display: none;
}
.goog-te-banner-frame {
    display: none !important;
}
body {
    position: static !important;
    top: 0 !important;
}
</style>

  • When I select a language a bar appears at the top, how to hide it?

  • @Sérgiomachado I’ll try, I’m not sure, I’ll let you know

  • @Sérgiomachado ready, edited response.

  • 1

    Show too man, you’re beast, thank you even the/

  • Give me a little help, you remember that solution you helped me with? then I would like another help from you, look at this link http://codepen.io/sergiomachado/pen/qmWvjd

  • I would like when I change the language the default flag also changes, you can help me?

  • I made the change.. https://codepen.io/PedroCSS/pen/GRgbwwd... doubt: Do you use this until today? will google disable this feature?

  • 1

    @Predoff hasn’t heard anything about it, but they limit it by IP, but since every visitor has an IP so it won’t affect it, it only would if you created a script that used their services improperly, it’s unlikely that an ordinary user would do thousands of translations a day. But I’ll read to see if there’s anything before I confirm.

Show 3 more comments

Browser other questions tagged javascript google google-translate

You are not signed in. Login or sign up in order to post.