Автоматический перевод сайта с помощью JS скрипта Google Translate

На многих сайтах можно встретить флаги стран, при нажатии на которые происходит автоматический перевод текущей страницы сайта на выбранный язык. Данная функция очень полезна для не русскоязычной аудитория, которая случайно набрела на оставленную Вами полезную информацию. Помню как-то сам набрел на таджикский-маджикский сайт, на котором был ответ на давно тревоживший мою голову вопрос и как я долго пытался понять смысл.

Существующие способы автоматического перевода сайта на другие языки

В Интернете я нашел два Web-сервиса, которые позволяют организовать у себя на сайте перевод страницы на другой язык. Это Convey This и Google Translate, о которых пойдет речь ниже.

Такие кнопки можно добавить для всех стран, которые поддерживаются сервисом, как и делают это многие вебмастера. Они добавляют все доступные страны. На мой взгляд, следует выбрать только несколько стран, аудитория которых посещает Ваш сайт. Я на своем блоге выбрал 3 языка: английский, немецкий и французский. Но хозяин — барин.

Автоматический перевод Вашего сайта на другие языки можно сделать:

1. С помощью сервиса от Convey This. Как оно работает я не знаю, не пробовал, но выглядит это так:
   translator Translate | English Spanish German Chinese
2. С помощью WEB-сервиса от всемогущего Google. Называется это Google Translate. Как это все работает можно посмотреть на этом блоге. Качество работы можно отнести к терпимому. Короче, это лучше чем никак.
   Заставить Google Translate работать можно:
   • пройдя по ссылке http://translate.google.com/translate_tools и выполнив простые действия. В итоге может получится вот так:

2. 1. Технологии Переводчик
   2. установив html-код на свой сайт и загрузив сами изображения флагов и поместив в директорию /images/ Вашего сайта:

HTML-код

<form action="http://www.google.com/translate"><script>// <![CDATA[
document.write ("<input name=u value="+location.href+" type=hidden>")
// ]]></script><input name="hl" type="hidden" value="ru" /> 
<input name="ie" type="hidden" value="UTF8" /> 
<input name="langpair" type="hidden" value="" /> 
<input title="English" height="16" name="langpair" src="/images/English_thumb.png" type="image" value="ru|en" width="22" /> 
<input title="French" height="16" name="langpair" src="/images/French_thumb.png" type="image" value="ru|fr" width="22" /> 
<input title="German" height="16" name="langpair" src="/images/German_thumb.png" type="image" value="ru|de" width="22" /> 
<input title="Japan" height="16" name="langpair" src="/images/Japanese_thumb.png" type="image" value="ru|ja" width="22" /> 
<input title="Italian" height="16" name="langpair" src="/images/Italian_thumb.png" type="image" value="ru|it" width="22" /> 
<input title="Portuguese" height="16" name="langpair" src="/images/Portuguese_thumb.png" type="image" value="ru|pt" width="22" /> 
<input title="Spain" height="16" name="langpair" src="/images/Spain_thumb.png" type="image" value="ru|es" width="22" /> 
<input title="Dutch" height="16" name="langpair" src="/images/Dutch_thumb.png" type="image" value="ru|da" width="22" /> 
<input title="Chinese" height="16" name="langpair" src="/images/Chinese_thumb.png" type="image" value="ru|zh-CN" width="22" /> 
<input title="Korean" height="16" name="langpair" src="/images/Korean_thumb.png" type="image" value="ru|ko" width="22" /> 
<input title="Arabic" height="16" name="langpair" src="/images/Arabic_thumb.png" type="image" value="ru|ar" width="22" />
</form>

В итоге получится так:

Итог и свои наработки

Выше были представлены готовые решения, которые поставить сможет даже моя мама: открыл сайт, выбрал нужные языки, добавил полученный код на html-страницу своего сайта и остается только ждать наплыва забугорных пользователей.

Если честно, когда я увидел реализацию этих методов, то мне стало грустно. Ни в одном из них нет свободы выбора и места где можно дать волю своей фантазии. Везде присутствует шаблонный вид, который со временем будет у каждого НЕ ленивого вебмастера на сайте или блоге.




Я пошел другим путем, путем AdminWay. Результат этого пути можно посмотреть на этом блоге в верхнем правом углу.

Делается это просто. Так как я для своего блога выбрал только 3 языка, то и приведенный метод только для трех, но Вы всегда его сможете расширить сами.

Добавление кнопок для автоматического перевода на 3 языка:

1. Добавляем изображения флагов к себе на сайт в директорию /images/
2. Добавляем приведенный html-код в то место, где хотите увидеть флаги:
   <a class=”google_translate” href=”#” rel=”nofollow” title=”French” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=id%cen&ru=en&sl=ru&tl=fr’);”><div class=”lang_fr”></div>
   </a>

   <a class=”google_translate” href=”#” rel=”nofollow” title=”German” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=id%cen&ru=en&sl=ru&tl=de’);”><div class=”lang_de”></div>
   </a>

   <a class=”google_translate” href=”#” rel=”nofollow” title=”English” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=id%cen&ru=en&sl=ru&tl=en’);”><div class=”lang_en”></div>
   </a>

3. Добавляем приведенный код в Ваш CSS шаблон:
   .lang_en, .lang_de, .lang_fr {width: 22px; height: 16px;}
   .lang_en {background: url(/images/English_adminway.png);}
   .lang_de {background: url(/images/German_adminway.png);}
   .lang_fr {background: url(/images/French_adminway.png);}
   .lang_en:hover, .lang_de:hover, .lang_fr:hover {background-position: 0 -16px;}

Я надеюсь мне удалось пролить свет на проблему автоматического перевода сайтов на другие языки. Если Вы знаете другой способ перевода сайта на другой язык, сообщите.

Есть мнение, что Google умеет индексировать ссылки использующие JS, так что возможно от приведенной информации будет еще больше пользы в будущем. Поживем увидим.
Источник