Автоматический перевод Вашего сайта с помощью JS скрипта Google Translate. Статьи. wb0.ru - Все для веб-мастера, on-line сервисы

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

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

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

С помощью WEB-сервиса от всемогущего Google. Называется это Google Translate. Как это все работает можно посмотреть на этом блоге. Качество работы можно отнести к терпимому. Короче, это лучше чем никак. Заставить Google Translate работать можно:

  1. пройдя по ссылке и выполнив простые действия. В итоге может получится вот так:

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

    1. <form action="http://www.google.com/translate">
    2. <script language="JavaScript">
    3. <!--
    4. document.write ("<input name=u value="+location.href+" type=hidden>")
    5. // -->
    6. </script>
    7. <input value="ru" name="hl" type="hidden" />
    8. <input value="UTF8" name="ie" type="hidden" />
    9. <input value="" name="langpair" type="hidden" />
    10.  
    11. <input onclick="this.form.langpair.value=this.value" title="English" value="ru|en" type="image" height="16" src="/images/English_thumb.png" width="22" name="langpair" />
    12.  
    13. <input onclick="this.form.langpair.value=this.value" title="French" value="ru|fr" type="image" height="16" src="/images/French_thumb.png" width="22" name="langpair" />
    14.  
    15. <input onclick="this.form.langpair.value=this.value" title="German" value="ru|de" type="image" height="16" src="/images/German_thumb.png" width="22" name="langpair" />
    16.  
    17. <input onclick="this.form.langpair.value=this.value" title="Japan" value="ru|ja" type="image" height="16" src="/images/Japanese_thumb.png" width="22" name="langpair" />
    18.  
    19. <input onclick="this.form.langpair.value=this.value" title="Italian" value="ru|it" type="image" height="16" src="/images/Italian_thumb.png" width="22" name="langpair" />
    20.  
    21. <input onclick="this.form.langpair.value=this.value" title="Portuguese" value="ru|pt" type="image" height="16" src="/images/Portuguese_thumb.png" width="22" name="langpair" />
    22.  
    23. <input onclick="this.form.langpair.value=this.value" title="Spain" value="ru|es" type="image" height="16" src="/images/Spain_thumb.png" width="22" name="langpair" />
    24.  
    25. <input onclick="this.form.langpair.value=this.value" title="Dutch" value="ru|da" type="image" height="16" src="/images/Dutch_thumb.png" width="22" name="langpair" />
    26.  
    27. <input onclick="this.form.langpair.value=this.value" title="Chinese" value="ru|zh-CN" type="image" height="16" src="/images/Chinese_thumb.png" width="22" name="langpair" />
    28.  
    29. <input onclick="this.form.langpair.value=this.value" title="Korean" value="ru|ko" type="image" height="16" src="/images/Korean_thumb.png" width="22" name="langpair" />
    30.  
    31. <input onclick="this.form.langpair.value=this.value" title="Arabic" value="ru|ar" type="image" height="16" src="/images/Arabic_thumb.png" width="22" name="langpair" />
    32.  
    33. </form>

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

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

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

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

Я пошел другим путем, путем AdminWay.

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

Добавление кнопок для автоматического перевода на 3 языка
  1. Добавляем изображения флагов к себе на сайт в директорию /images/
  2. Добавляем приведенный html-код в то место, где хотите увидеть флаги:
    1. <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>
    2.  
    3. <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>
    4.  
    5. <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 шаблон:
    1. .lang_en, .lang_de, .lang_fr {width: 22px; height: 16px;}
    2. .lang_en {background: url(/images/English_thumb.png);}
    3. .lang_de {background: url(/images/German_thumb.png);}
    4. .lang_fr {background: url(/images/French_thumb.png);}
    5. .lang_en:hover, .lang_de:hover, .lang_fr:hover {background-position: 0 -16px;}
Вот результат этого пути:

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

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


Дата публикации: 14.05.2010
adminway.ru


Комментарии:
  1. Dante: к сожалению метод с флагами ныне не катит(
    Добавлен: 2015-06-25


   Ваш псевдоним:
Ваш комментарий:

Календарь событий


Новости Интернет


Поиск





Последний пересчет

тИЦ:07 Окт 15
PR:09 Дек 13

Наши партнеры

wservices.ru - регистрация доменов, Whois-сервисы Смайлы на все случаи жизни


 
Copyright © 2006-2024, wb0.ru