Looking here Google Translate I get the following code.
<meta name="google-translate-customization" content="9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436-c"></meta> <div> </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="//"></script> But Looking here html-5-tutorial, at the top right, I see the following code:
<div> <div> <div dir="ltr"> <div> <select> <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> <a href="" target="_blank"> <img src="" 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?
615 Answers
Here's the markup that should work, both locally and remotely - copied from :
<div></div> <script> function googleTranslateElementInit() { new google.translate.TranslateElement( {pageLanguage: 'en'}, 'google_translate_element' ); } </script> <script src=""></script> <div></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="//"></script> function googleTranslateElementInit() { new google.translate.TranslateElement( {pageLanguage: 'en'}, 'google_translate_element' ); } to allow google translate to be mobile friendly get rid of the layout section, layout: google.translate.TranslateElement.InlineLayout.SIMPLE
<div> </div> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); } </script> <script type="text/javascript" src="//"></script> It works on my site and it is mobile friendly.
<div></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="//"></script> Code
<div></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="//"></script> <div></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="//"></script> {{-- 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', // // 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> <li> <div> <div></div> </div> </li> {{-- Google Language Translator ENDS --}}
// 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'); })(); })(); <script type="text/javascript" src=""></script> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); } </script> Implementing Google translate html code is very easy. Use this code on your project, hope it will help you.
<div></div> <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element'); } </script> <script src=""></script> 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 in all modern browsers.
Updated: If you want to select what should be translated - just adding to the elements that shouldn´t be translated.
<div></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="//"></script> <div></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="//"></script> <div></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="//"></script> 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> 
