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

Как сделать кнопки для автоматического перевода вашего сайта с помощью Google Translate

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

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

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

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

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

С помощью сервиса от Convey This. Как оно работает я не знаю, не пробовал, но выглядит это так:

<script type="text/javascript">
  var conveythis_src = 'ru';
</script>
<div class="conveythis">
  <a class="conveythis_drop" title="Translate" href="https://freetranslation.translation-services-usa.com/"><span class="conveythis_left_image">translator</span></a> 
  <a class="conveythis_drop" title="Translate" href="https://www.conveythis.com/">Translate</a>
  <span class="conveythis_seperator"> | </span>
  <a class="conveythis_no_drop" title="English" href="https://www.translation-services-usa.com/english.php" rel="en"><span class="conveythis_image_english">English</span></a> 
  <a class="conveythis_no_drop" title="Spanish" href="https://www.translation-services-usa.com/spanish.php" rel="es"><span class="conveythis_image_spanish">Spanish</span></a> 
  <a class="conveythis_no_drop" title="German" href="https://www.translation-services-usa.com/german.php" rel="de"><span class="conveythis_image_german">German</span></a> 
  <a class="conveythis_no_drop" title="Chinese" href="https://www.translation-services-usa.com/chinese.php" rel="zh-CN"><span class="conveythis_image_chinese">Chinese</span></a>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://s1.conveythis.com/e2/_v_3/javascript/e3.js"></script>

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

Заставить Google Translate работать можно

  1. пройдя по ссылке https://translate.google.com/translate_tools и выполнив простые действия. В итоге может получится вот так:
    <div id="google_translate_element"></div><script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'ru'
      }, 'google_translate_element');
    }
    </script>
    <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    • установив html-код на свой сайт и загрузив сами изображения флагов и поместив в директорию /images/ Вашего сайта:
      <form action="https://www.google.com/translate">
        <script language="JavaScript">
          <!--
          document.write ("<input name=u value="+location.href+" type=hidden>")
          // -->
        </script>
        <input value="ru" name="hl" type="hidden" />
        <input value="UTF8" name="ie" type="hidden" />
        <input value="" name="langpair" type="hidden" />
        <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" />
        <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" />
        <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" />
        <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" />
        <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" />
        <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" />
        <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" />
        <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" />
        <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" />
        <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" />
        <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" />
      </form>

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

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

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

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

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

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

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

  1. Добавляем изображения флагов к себе на сайт в директорию /images/
  2. Добавляем приведенный html-код в то место, где хотите увидеть флаги:
    <a class="google_translate" href="#" rel="nofollow" title="French" 
      onclick="window.open('https://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('https://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('https://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, так что возможно от приведенной информации будет еще больше пользы в будущем. Поживем увидим.

Комментарии
  1. Игорь опубликовал 10 Июнь 2010, 10:07 #

    У меня вопрос относительно последствий с дизайном страницы. Понятно, что за “бесплатное” приходится чем то расплачиваться. К примеру фреймом от Гугла. Но я вот полистал на гугле раздел AJAX API для Google Переводчика, там мне кажется есть возможность обойтись без фрейма с верху страницы. Не затруднит вас примером кода для кнопочки? как можно функцию обработки страницы вызвать посредством нажатия кнопки? А то я в скрипте не силен.

    | Ответить
  2. Admin опубликовал 10 Июнь 2010, 12:14 #

    Игорь: У меня вопрос относительно последствий с дизайном страницы. Понятно, что за “бесплатное” приходится чем то расплачиваться. К примеру фреймом от Гугла. Но я вот полистал на гугле раздел AJAX API для Google Переводчика, там мне кажется есть возможность обойтись без фрейма с верху страницы. Не затруднит вас примером кода для кнопочки? как можно функцию обработки страницы вызвать посредством нажатия кнопки? А то я в скрипте не силен.

    Я посмотрю, что можно сделать

    | Ответить
  3. Павел опубликовал 11 Июнь 2010, 20:02 #

    Спасибо, все работает! А можно сделать картинки по-крупнее?

    | Ответить
  4. Admin опубликовал 15 Июнь 2010, 04:35 #

    Павел: Спасибо, все работает! А можно сделать картинки по-крупнее?

    Можно конечно. Поискать флаги по крупнее и сделать по аналогии с предложенным. :)

    | Ответить
  5. asadbek опубликовал 8 Июль 2010, 08:01 #

    Salamu alekum

    | Ответить
  6. Tabarik опубликовал 16 Июль 2010, 11:29 #

    Установил перевод от гугл(второй вариант), поработал несколько дней. Теперь выбрасывает на страницу перевода с окном ввода текста или адреса. Почему?

    | Ответить
  7. SergLI опубликовал 31 Август 2010, 09:28 #

    Доброго дня!
    Подскажите, не решился ли вопрос убрать фрейм от гугла вверху страницы?
    Спасибо

    | Ответить
  8. Admin опубликовал 2 Сентябрь 2010, 08:22 #

    >SergLI
    Пока решение не найдено.

    | Ответить
  9. Виктор опубликовал 19 Сентябрь 2010, 04:11 #

    Вот с фреймом - http://www.google.com/translate...

    Вот без фрейма - http://translate.googleusercontent.com... – получается путем открытия переведенной страницы в новой закладке. Именно ПЕРЕВЕДЕННОЙ

    Разница очевидна, но как добиться?
    Гораздо интересней автоматический перевод – он сохраняет сессии и не меняет адрес страницы.

    | Ответить
  10. Admin опубликовал 20 Сентябрь 2010, 04:11 #

    Виктор: Вот с фреймом http://www.google.com/translate...
    … Разница очевидна, но как добиться?
    Гораздо интересней автоматический перевод – он сохраняет сессии и не меняет адрес страницы.
    getQuotation(‘Виктор’,‘Цитировать’);

    Спасибо за ссылки. Обязательно посмотрю и отпишусь. Самого заинтересовала эта возможность.

    | Ответить
  11. Al опубликовал 14 Октябрь 2010, 23:31 #

    А как насчет взаимодействия с API ключами Яндекс карт? Если вписан скрипт с API ЯндексКарт, Google Translate выкидывает алерт с сообщением “неправильный ключ”

    | Ответить
  12. Sergey опубликовал 1 Декабрь 2010, 19:53 #

    Приветствую Вас!

    Подскажите, какие изменения в код необходимо внести, чтобы флажки не вертикально один над одним стояли, а в линию (горизонтально).
    Спасибо!

    | Ответить
  13. Игорь опубликовал 9 Декабрь 2010, 23:13 #

    Подскажите каким лучше всего способом переводить сайт!

    1.- Есть компонент JoomFish. Для того чтобы он начал работать нужно с начало перевести материалы сайта с русского языка на нужный язык и данные материал загрузить в поле ввода компонента JoomFish. Потом в нужное место выводятся иконки флажков и при нажатии на флажок страны сайт переводиться на язык этой страны. Имеется большая проблема. Эта рутинная работа по переводу каждого текста. Зато переводиться всё.

    2.- Это можно сделать с помощью WEB-сервиса Google. Вот здесь – http://translate.google.com/translate_tools После этих шагов на сайте в нужном месте также будут флаги нужных стран для перевода. Такое можно создать и с помощью отдельных компоентов от Googla – Google V2, GTranslate, AJAX Translator Plugin и другие. Однако тоже иметься проблема – в результате перевода сайта показывается фрейм Google переводчика. Все от этого фрейма хотят избавиться. Как можно от него избавиться?

    Однако! По химичив, я обнаружил вот что!

    Сайт с фреймом – http://www.google.com/translate... При нажатии на любую ссылочку на сайте ссылка в брузере не изменяется.

    Сайт без фрейма – http://translate.googleusercontent.com... При нажатии на любую ссылочку на сайте ссылка в браузере изменяется. Кажется так лучше! Если да, то для удобства пользователей можно на сайт закачать флажки и картинки флажков отметить данными ссылочками. То есть для англоязычного сайта в американский флажок вставить эту ссылку – http://translate.googleusercontent.com... А для грузинскоязычной версии сайта можно воспользоваться этой ссылочкой – http://translate.googleusercontent.com... и вставить эту ссылочку в грузинский флажок. Тут есть тоже проблема. Дополнительные исходящие (внешние) ссылки на сайте. И Яндекс может забанить, думая о том что сайт продаёт ссылки. А также ссылки в браузере в глазах посетителей выглядят не красиво.

    Так каким лучше всего способом пользоваться переводом?

    | Ответить
  14. Mut@NT опубликовал 10 Декабрь 2010, 22:24 #

    Я думая Yandex Вас не забанит за такое, это конечно мое ИМХО, которое основано на личном опыте

    | Ответить
  15. Тёма опубликовал 11 Декабрь 2010, 00:28 #

    Sergey: Подскажите, какие изменения в код необходимо внести, чтобы флажки не вертикально один над одним стояли, а в линию (горизонтально). Спасибо!

    также интересует этот вопрос. надеюсь на Вашу помощь

    | Ответить
  16. Mut@NT опубликовал 14 Декабрь 2010, 11:10 #

    Sergey: Приветствую Вас!

    Подскажите, какие изменения в код необходимо внести, чтобы флажки не вертикально один над одним стояли, а в линию (горизонтально).
    Спасибо!

    Тёма: также интересует этот вопрос. надеюсь на Вашу помощь

    В коде:
    .lang_en, .lang_de, .lang_fr {width: 22px; height: 16px;}
    добавить:
    .lang_en, .lang_de, .lang_fr {width: 22px; height: 16px; float: right; }

    | Ответить
    • Sanyaha опубликовал 8 Май 2012, 15:07 #

      В настройках gtranslate есть пункт Orientation в нем поставить горизонтальную или вертикальную по нужде!bq.. Mut@NT: Sergey: Приветствую Вас!Подскажите, какие изменения в код необходимо внести, чтобы флажки не вертикально один над одним стояли, а в линию (горизонтально). Спасибо!Тёма: также интересует этот вопрос. надеюсь на Вашу помощьВ коде:.lang_en, .lang_de, .lang_fr {width: 22px; height: 16px;} добавить: .lang_en, .lang_de, .lang_fr {width: 22px; height: 16px; float: right; }

      В настройках gtranslate есть пункт Orientation в нем поставить горизонтальную или вертикальную по нужде!

      | Ответить
  17. Serg опубликовал 18 Декабрь 2010, 03:59 #

    Проблема: при переходе на какой-то язык, на другой уже перейти невозможно.
    Решение: подправим твой код и обойдемся без css…

    <div style=“float: right”>

    <a title=“English” alt=“English”
    href=”#” rel=“nofollow” onclick=“window.open(‘http://translate.google.com/translate?u=http://Ваш Сайт&langpair=id%cen&ru=en&sl=ru&tl=en’);”>
    <img src=“http://Ваш Сайт/images/england.png” width=40/></a>

    &nbsp;

    <a title=“Italiano” alt=“Italiano”
    href=”#” rel=“nofollow” onclick=“window.open(‘http://translate.google.com/translate?u=http://Ваш Сайт&langpair=id%cen&ru=en&sl=ru&tl=it’);”>
    <img src=“http://Ваш Сайт/images/italy.png” width=40/></a>

    </div>

    Соответственно вместо “Ваш сайт” вставляем адрес вашего сайта.

    | Ответить
  18. AdminWay опубликовал 20 Декабрь 2010, 11:46 #

    Serg: Проблема: при переходе на какой-то язык, на другой уже перейти невозможно.
    Решение: подправим твой код и обойдемся без css…

    Будет правильнее, спасибо.

    | Ответить
  19. sasha опубликовал 8 Февраль 2011, 19:26 #

    Работает, почти… Самого главного не делает! :
    http://www.google.com/translate...

    | Ответить
  20. Мария опубликовал 22 Февраль 2011, 03:25 #

    Зайдите сюда: http://translate.google.com/... найдите такой текст:
    Переводите текст с помощью кнопки на панели инструментов браузера

    Чтобы получить перевод одним нажатием клавиши мыши, добавьте одну из кнопок на панель инструментов браузера. Тогда в любой момент, когда вы захотите перевести просматриваемую страницу, достаточно будет просто нажать кнопку. Перевести можно любую часть страницы, выделив ее перед нажатием кнопки.
    Чтобы добавить кнопку, перетащите ее с этой страницы на панель инструментов браузера.

    Чуть ниже в таблице найдите язык (или несколько) и перетащите с помощью мыши на боковую (либо личную) панель. Удачи!

    | Ответить
    • Mut@NT опубликовал 22 Февраль 2011, 07:22 #

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

      | Ответить
  21. Николай опубликовал 5 Июнь 2011, 18:55 #

    Способ, как было тонко подмечено, годится для “случайных” посетителей. Так как сайт индексируется ПС только на русском… Толку для целевого привлечения иностранного трафика – ровно “0”.
    Если нужен трафик – нужно чтобы в базе были тексты на всех языках, пусть даже и переведенные ГуглТранслейтом. Это громоздко, но альтернативы не вижу.

    | Ответить
    • Admin опубликовал 7 Июнь 2011, 06:01 #

      Это все так

      | Ответить
  22. ntc опубликовал 8 Июнь 2011, 11:38 #

    Пишет, что не удаётся получить доступ к запрашиваемой странице. Сайт на локалке. Это что-то меняет?

    | Ответить
    • Admin опубликовал 14 Июнь 2011, 05:55 #

      Я думаю, что это все и меняет :)

      | Ответить
  23. lemurik опубликовал 8 Декабрь 2011, 15:04 #

    Скажите, а как сделать отступ между флагами как у Вас ?

    | Ответить
    • Admin опубликовал 9 Декабрь 2011, 06:10 #

      lemurik: Скажите, а как сделать отступ между флагами как у Вас ?

      Нужно добавить:

      .lang_en, .lang_de, .lang_fr {width: 22px; height: 16px; margin:1px; }

      где 1px – это размер со всех сторон.

      | Ответить
  24. lemurik опубликовал 9 Декабрь 2011, 16:22 #

    Спасибо Admin всё супер ) ) )

    | Ответить
  25. DEN опубликовал 16 Декабрь 2011, 18:58 #

    Спасибо автору. Все очень здоровски.
    Скажите пожалуйста, как добавить украинский язык ?

    | Ответить
  26. DEN опубликовал 17 Декабрь 2011, 01:10 #

    Посидев 10 минут подумав, сделал сам :).
    Спасибо.

    | Ответить
  27. RTY опубликовал 23 Декабрь 2011, 18:40 #

    У меня не получается раскажите поподробнише пожалуста!!!!

    | Ответить
  28. netFight опубликовал 3 Февраль 2012, 00:36 #

    у меня css скачет в разные стороны от такого переводчика…не сайт в переводе получается, а радуга

    | Ответить
  29. Я опубликовал 7 Февраль 2012, 14:54 #

    Скажите куда вы вставили код в какие рядки что флажки у вас в хедере?

    | Ответить
  30. krava опубликовал 13 Февраль 2012, 11:59 #

    Добрый день, что то мне кажется что все это в последнее время работает как то криво, вчера вечером делал, намучился с этими флагами (добавлял свои), все работало отлично! сегодня утром такая же проблема как и в *Tabarik *

    | Ответить
  31. Admin опубликовал 18 Февраль 2012, 22:30 #

    Я: Скажите куда вы вставили код в какие рядки что флажки у вас в хедере?

    Собственно в ту часть страницы, где выводится шапка

    | Ответить
  32. TIIGR опубликовал 4 Апрель 2012, 15:02 #

    Намучался :) чтоб флаги уложить на бок и по центру.

    | Ответить
  33. TIIGR опубликовал 4 Апрель 2012, 15:26 #

    Вот украинский:)

    <a class="google_translate" href="#" rel="nofollow" title="Ukraine" onclick="window.open('http://translate.google.com/translate?u='encodeURIComponent(location.href)'&langpair=id%cen&ru=en&sl=ru&tl=uk');"><div class="lang_ua"></div></a>

    и может кому то понадобится.Флаги горизонтально.Размер флагов 16на11.А margin расстояние между ними.

    .lang_fr, .lang_de, .lang_en, .lang_ua {display:inline-block; width: 16px; height: 11px; margin: 3px 10px 0px; } .lang_fr {background: url(http://tiigr.wen.ru/operevod/fr.png); } .lang_de {background: url(http://tiigr.wen.ru/operevod/de.png); } .lang_en {background: url(http://tiigr.wen.ru/operevod/en.png); } .lang_ua {background: url(http://tiigr.wen.ru/operevod/ua.png); }

    а по центру флаги, просто по бокам выровняйте <center> самое простое:)

    | Ответить
  34. Irina опубликовал 24 Апрель 2012, 17:42 #

    Спасибо большое работает на ура, а как мне сделать код чтоб можно было перевести на русский с украинского, флаги я уже сделала.

    | Ответить
  35. Irina опубликовал 27 Апрель 2012, 01:55 #

    Ребята помогите

    | Ответить
  36. TIIGR опубликовал 3 Май 2012, 07:34 #

    Замени в sl=uk&tl=ru :)и всё

    | Ответить
  37. Александр Синяшин опубликовал 16 Май 2012, 12:18 #

    Интересный урок! Спасибо!

    | Ответить
  38. Yuri опубликовал 22 Июнь 2012, 17:40 #

    Не могу не сказать админу: “Спасибо”!!!

    | Ответить
  39. Pani опубликовал 2 Август 2012, 02:48 #

    Здравствуйте.
    Можно как-то закрыть от индексации скрипт
    google переводчик?

    | Ответить
    • Владимир опубликовал 23 Апрель 2013, 17:54 #

      А для чего Google от Google прятать? Мне кажется что наоборот Google будет лояльнее к таким сайтам.

      | Ответить
  40. Людмила опубликовал 31 Октябрь 2012, 11:58 #

    Спасибо за статью, пригодилась.
    От себя могу добавить по третьему варианту. Если хотите, чтобы перевод открывался в том же окне, можно подправить скрипт, добавив ‘_self’

    Получится
    <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’,’_self’);”>

    | Ответить
  41. Анна опубликовал 30 Март 2014, 21:14 #

    Товарисчи помогите..ну не могу вставить эти флажки для перевода сайта)) плииз )

    | Ответить
Имя
e-mail
Текст комментария: # ×


Комментарии
Облако тегов
Интересное