[블로그/사이트]외국인 접속시 자동으로 사이트 번역해주기

요즘 코딩을 하다보니 영어로 된 사이트들을 자주 접속하게 된다

하지만 영어를 못하는 나는 번역기를 사용하는데 크롬에서 제공하고 있는 오른쪽 마우스를 누르면 나오는 번역기능을 사용하고 있다 하지만 일일히 오른쪽 마우스를 누르고 번역을 누르는게 상당히 귀찮은 편이다

 

현재 구글 블로그에 중국어 타자연습, 타자게임 등을 만들고 있다 그러다보니 외국인이 들어왔을때 번역을 해서 사용하라고 번역기를 같이 넣어두긴 했지만 불편함을 느낄 것이라 생각했다

https://korearaogong.tistory.com/18

[HTML,javascript]구글 번역기 넣기

 

첫번째 방법

일단 자동 번역하기 전에 번역기를 가져와야 된다

<!-- GTranslate: https://gtranslate.io/ -->
<a href="#" onclick="doGTranslate('ko|en');return false;" title="English" class="gflag nturl" style="background-position:-0px -0px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="English" /></a><a href="#" onclick="doGTranslate('ko|fr');return false;" title="French" class="gflag nturl" style="background-position:-200px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="French" /></a><a href="#" onclick="doGTranslate('ko|de');return false;" title="German" class="gflag nturl" style="background-position:-300px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="German" /></a><a href="#" onclick="doGTranslate('ko|it');return false;" title="Italian" class="gflag nturl" style="background-position:-600px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Italian" /></a><a href="#" onclick="doGTranslate('ko|pt');return false;" title="Portuguese" class="gflag nturl" style="background-position:-300px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Portuguese" /></a><a href="#" onclick="doGTranslate('ko|ru');return false;" title="Russian" class="gflag nturl" style="background-position:-500px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Russian" /></a><a href="#" onclick="doGTranslate('ko|es');return false;" title="Spanish" class="gflag nturl" style="background-position:-600px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Spanish" /></a>

<style type="text/css">
<!--
a.gflag {vertical-align:middle;font-size:16px;padding:1px 0;background-repeat:no-repeat;background-image:url(//gtranslate.net/flags/16.png);}
a.gflag img {border:0;}
a.gflag:hover {background-image:url(//gtranslate.net/flags/16a.png);}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}
-->
</style>

<br /><select onchange="doGTranslate(this);"><option value="">Select Language</option><option value="ko|af">Afrikaans</option><option value="ko|sq">Albanian</option><option value="ko|ar">Arabic</option><option value="ko|hy">Armenian</option><option value="ko|az">Azerbaijani</option><option value="ko|eu">Basque</option><option value="ko|be">Belarusian</option><option value="ko|bg">Bulgarian</option><option value="ko|ca">Catalan</option><option value="ko|zh-CN">Chinese (Simplified)</option><option value="ko|zh-TW">Chinese (Traditional)</option><option value="ko|hr">Croatian</option><option value="ko|cs">Czech</option><option value="ko|da">Danish</option><option value="ko|nl">Dutch</option><option value="ko|en">English</option><option value="ko|et">Estonian</option><option value="ko|tl">Filipino</option><option value="ko|fi">Finnish</option><option value="ko|fr">French</option><option value="ko|gl">Galician</option><option value="ko|ka">Georgian</option><option value="ko|de">German</option><option value="ko|el">Greek</option><option value="ko|ht">Haitian Creole</option><option value="ko|iw">Hebrew</option><option value="ko|hi">Hindi</option><option value="ko|hu">Hungarian</option><option value="ko|is">Icelandic</option><option value="ko|id">Indonesian</option><option value="ko|ga">Irish</option><option value="ko|it">Italian</option><option value="ko|ja">Japanese</option><option value="ko|ko">Korean</option><option value="ko|lv">Latvian</option><option value="ko|lt">Lithuanian</option><option value="ko|mk">Macedonian</option><option value="ko|ms">Malay</option><option value="ko|mt">Maltese</option><option value="ko|no">Norwegian</option><option value="ko|fa">Persian</option><option value="ko|pl">Polish</option><option value="ko|pt">Portuguese</option><option value="ko|ro">Romanian</option><option value="ko|ru">Russian</option><option value="ko|sr">Serbian</option><option value="ko|sk">Slovak</option><option value="ko|sl">Slovenian</option><option value="ko|es">Spanish</option><option value="ko|sw">Swahili</option><option value="ko|sv">Swedish</option><option value="ko|th">Thai</option><option value="ko|tr">Turkish</option><option value="ko|uk">Ukrainian</option><option value="ko|ur">Urdu</option><option value="ko|vi">Vietnamese</option><option value="ko|cy">Welsh</option><option value="ko|yi">Yiddish</option></select><div id="google_translate_element2"></div>
<script type="text/javascript">
function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'ko',autoDisplay: false}, 'google_translate_element2');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>


<script type="text/javascript">
/* <![CDATA[ */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3 c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}',43,43,'||document|var|if|length|function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||getElementById|google_translate_element2|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split('|'),0,{}))
/* ]]> */
</script>

<script>
    window.onload = function(){   
        if (navigator.language != 'ko'){
          doGTranslate('ko|'+navigator.language);
        } else {
          doGTranslate('ko|ko')
        }
    }
</script>

위 코드를 HTML편집창에서 원하는 곳에 넣어주면 된다

 

만약 위 코드가 안된다면

https://gtranslate.io/

GTranslate - Website Translator: Translate Your Website

위 링크로 들어가서 HTML탭에서

Widget code내용을 직접 복사해다 쓰면 된다 참고로 자동 번역은 Widget preview에 있는 언어만 가능해 보임으로 Dropdown languages에서 필요한것을 선택하면 될듯 해 보인다

 

만약 위 코드를 사용 안했다면 다시 자신의 사이트로 돌아와서

<script>
    window.onload = function(){   
        if (navigator.language != 'ko'){
          doGTranslate('ko|'+navigator.language);
        } else {
          doGTranslate('ko|ko')
        }
    }
</script>

위 코드를 첫번째 코드(Widget code) 뒤쪽으로 넣어준다

위 코드를 테스트 해본 결과 다른 언어들은 잘 되지만 자신의 웹페이지의 언어 설정(lang)을 바꾸더라도 글들이 한국어이기 때문인지 한국어로 인식하는듯 하다

어쨋든 한국 언어의 컴퓨터가 사이트에 첫번째로 접속(방문)하게 되면 영어, 두번째는 auto(한국어)로 번역을 해준다

즉(영어/한국어 순서가 바뀌었을 순 있음)

첫번째,세번째,다섯번째... 접속 : 영어

두번째,네번째,여섯번째... 접속 : auto(한국어)

 

두번째 방법

<div id="google_translate_element"></div>
 
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'ko',
    }, 'google_translate_element');
    setTimeout(function(){
      let select = document.querySelector('select.goog-te-combo');
      select.value = navigator.language; 
      select.dispatchEvent(new Event('change'));
    },1000)
  }
</script>
 
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

HTML 편집창에 들어가 번역기가 들어갈 곳에 위 코드를 붙혀넣기를 해준다

와이프님(대만사람)의 핸드폰(사파리)으로 접속해 본 결과 번역이 돼진 않고 위쪽에 번역기 안내창이 뜬다

이 코드는 언어가 바뀌어도 이전에 기록을 따라가는 듯 해서 테스트를 해보기가 어려웠다

그래도 접속하자마자 인터넷 창 위쪽에 번역기의 안내가 나와서 번역기를 사용하기에 더 유용할 듯 하다