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

Перевод сайта с помощью JS

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

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

Но решение нашел Vitalii P, который написал небольшой код, умеющий переводить сайты на автомате. Используется все тот же инструмент от Google Translate. Разрабы из Google прикрыли только добавление новых сайтов в эту систему, а старые сайты все также могут пользоваться скриптом автоматического перевода сайтов. Этим и воспользовался Виталий.

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

Добавляем автоматический переводчик

На github с проектом Виталия можно потестировать работу и детально изучить возможности.

Рабочий пример

На этой странице реализован этот механизм, поэтому можно попробовать:

ru en de fr pt es it zh ar nl sv

В песочницу по типу CodePen добавить не получается, так как они не поддерживают куки.

Как поставить автоматический перевод сайта на JS у себя

Ниже приведен код на чистом JS. У автора идеи можно найти код и JQuery.

Файлы для загрузки:

  1. Вся магия находится в файле google-translate.js, который можно скачать здесь – google-translate.js
  2. Красивые флаги можно взять здесь – lang.zip

Подключаем скрипты на странице:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="/js/google-translate.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>

HTML-код:

<div class="language">
   <img src="/images/lang/lang__ru.png" alt="ru" data-google-lang="ru" class="language__img">
   <img src="/images/lang/lang__en.png" alt="en" data-google-lang="en">
   <img src="/images/lang/lang__de.png" alt="de" data-google-lang="de" class="language__img">
   <img src="/images/lang/lang__fr.png" alt="fr" data-google-lang="fr" class="language__img">
   <img src="/images/lang/lang__pt.png" alt="pt" data-google-lang="pt" class="language__img">
   <img src="/images/lang/lang__es.png" alt="es" data-google-lang="es" class="language__img">
   <img src="/images/lang/lang__it.png" alt="it" data-google-lang="it" class="language__img">
   <img src="/images/lang/lang__zh.png" alt="zh" data-google-lang="zh-CN" class="language__img">
   <img src="/images/lang/lang__ar.png" alt="ar" data-google-lang="ar" class="language__img">
   <img src="/images/lang/lang__nl.png" alt="nl" data-google-lang="nl" class="language__img">
   <img src="/images/lang/lang__sv.png" alt="sv" data-google-lang="sv" class="language__img">
</div>

Минимальный CSS-код, который нужен для скрытия верхней панели Google Translate:


body {
  top: 0 !important;
}
.skiptranslate {
  display: none;
  height: 0;
}
.language__img {
  cursor: pointer;
}

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

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

Теги:

Комментарии

Игорь, 10.06.2010 17:07 #

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

Зюзгин Иван, 10.06.2010 19:14 #

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

Павел, 12.06.2010 03:02 #

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

Зюзгин Иван, 15.06.2010 11:35 #

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

asadbek, 08.07.2010 15:01 #

Salamu alekum

Tabarik, 16.07.2010 18:29 #

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

SergLI, 31.08.2010 16:28 #

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

Зюзгин Иван, 02.09.2010 15:22 #

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

Виктор, 19.09.2010 11:11 #

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

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

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

Зюзгин Иван, 20.09.2010 11:11 #

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

Al, 15.10.2010 06:31 #

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

Sergey, 02.12.2010 01:53 #

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

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

Игорь, 10.12.2010 05: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... и вставить эту ссылочку в грузинский флажок. Тут есть тоже проблема. Дополнительные исходящие (внешние) ссылки на сайте. И Яндекс может забанить, думая о том что сайт продаёт ссылки. А также ссылки в браузере в глазах посетителей выглядят не красиво.

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

Mut@NT, 11.12.2010 04:24 #

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

Тёма, 11.12.2010 06:28 #

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

Mut@NT, 14.12.2010 17:10 #

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

Serg, 18.12.2010 09: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>

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

Зюзгин Иван, 20.12.2010 17:46 #

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

sasha, 09.02.2011 01:26 #

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

Мария, 22.02.2011 09:25 #

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

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

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

Mut@NT, 22.02.2011 13:22 #

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

Николай, 06.06.2011 01:55 #

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

Зюзгин Иван, 07.06.2011 13:01 #

Это все так

ntc, 08.06.2011 18:38 #

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

Зюзгин Иван, 14.06.2011 12:55 #

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

lemurik, 08.12.2011 22:04 #

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

Зюзгин Иван, 09.12.2011 13:10 #

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

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

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

lemurik, 09.12.2011 23:22 #

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

DEN, 17.12.2011 01:58 #

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

DEN, 17.12.2011 08:10 #

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

RTY, 24.12.2011 01:40 #

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

netFight, 03.02.2012 07:36 #

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

Я, 07.02.2012 21:54 #

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

Зюзгин Иван, 19.02.2012 05:30 #

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

krava, 13.02.2012 18:59 #

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

TIIGR, 04.04.2012 22:02 #

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

TIIGR, 04.04.2012 22: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> самое простое:)

Irina, 25.04.2012 00:42 #

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

TIIGR, 03.05.2012 14:34 #

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

Irina, 27.04.2012 08:55 #

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

Sanyaha, 08.05.2012 22: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 в нем поставить горизонтальную или вертикальную по нужде!

Александр Синяшин, 16.05.2012 19:18 #

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

Yuri, 23.06.2012 00:40 #

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

Pani, 02.08.2012 09:48 #

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

Владимир, 24.04.2013 00:54 #

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

Людмила, 31.10.2012 18: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’);”>

Анна , 31.03.2014 04:14 #

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

Иван, 29.09.2020 16:23 #

Друзья подскажите не могу сделать виджет переводчика на EN языке. ставлю en заместо ru и всё равно не переделывается

Зюзгин Иван, 07.01.2021 06:01 #

Статья переписана и найден новый метод!






Комментарии
Интересное