Автоматический перевод Вашего сайта с помощью JS скрипта Google Translate
На многих сайтах можно встретить флаги стран, при нажатии на которые происходит автоматический перевод текущей страницы сайта на выбранный язык. Данная функция очень полезна для не русскоязычной аудитория, которая случайно набрела на оставленную Вами полезную информацию. Помню как-то сам набрел на какой-то Албанский сайт с нужным мне ответом и долго пытался понять смысл написанного.
Ситуация за последние несколько лет сильно изменилась и найти рабочего способа автоматически переводить сайты на другой язык уже не встретишь. Google Translate прикрыл эту возможность, а другие сервисы стали делать это только за деньги.
Но решение нашел Vitalii P, который написал небольшой код, умеющий переводить сайты на автомате. Используется все тот же инструмент от Google Translate. Разрабы из Google прикрыли только добавление новых сайтов в эту систему, а старые сайты все также могут пользоваться скриптом автоматического перевода сайтов. Этим и воспользовался Виталий.
Такие кнопки можно добавить для всех стран, которые поддерживаются сервисом, как и делают это многие вебмастера. Они добавляют все доступные страны. На мой взгляд, следует выбрать только несколько стран, аудитория которых посещает Ваш сайт. Я на своем блоге выбрал 3 языка: английский, немецкий и французский. Но хозяин — барин.
Добавляем автоматический переводчик
На github с проектом Виталия можно потестировать работу и детально изучить возможности.
Рабочий пример
На этой странице реализован этот механизм, поэтому можно попробовать:
В песочницу по типу CodePen добавить не получается, так как они не поддерживают куки.
Как поставить автоматический перевод сайта на JS у себя
Ниже приведен код на чистом JS. У автора идеи можно найти код и JQuery.
Файлы для загрузки:
- Вся магия находится в файле google-translate.js, который можно скачать здесь – google-translate.js
- Красивые флаги можно взять здесь – 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>
Если языков мало?
На этой странице есть список всех поддерживаемых языков. Код языка ISO-639 code из таблицы, меняем в параметре data-google-lang
.
Скрыть панель Google Translate
Минимальный CSS-код, который нужен для скрытия верхней панели Google Translate:
body {
top: 0 !important;
}
.skiptranslate {
display: none;
height: 0;
}
.language__img {
cursor: pointer;
}
Автоматический перевод для поддомена
Если Вы хотите внедрить автоматический перевод на поддомен (name.site.ru), то в файле google-translate.js нужно немного подредактировать. Файл хорошо комментирован. Комментарии на русском языке.
Теги:
У меня вопрос относительно последствий с дизайном страницы. Понятно, что за “бесплатное” приходится чем то расплачиваться. К примеру фреймом от Гугла. Но я вот полистал на гугле раздел AJAX API для Google Переводчика, там мне кажется есть возможность обойтись без фрейма с верху страницы. Не затруднит вас примером кода для кнопочки? как можно функцию обработки страницы вызвать посредством нажатия кнопки? А то я в скрипте не силен.
Я посмотрю, что можно сделать
Спасибо, все работает! А можно сделать картинки по-крупнее?
Можно конечно. Поискать флаги по крупнее и сделать по аналогии с предложенным. :)
Salamu alekum
Установил перевод от гугл(второй вариант), поработал несколько дней. Теперь выбрасывает на страницу перевода с окном ввода текста или адреса. Почему?
Доброго дня!
Подскажите, не решился ли вопрос убрать фрейм от гугла вверху страницы?
Спасибо
>SergLI
Пока решение не найдено.
Вот с фреймом - http://www.google.com/translate...
Вот без фрейма - http://translate.googleusercontent.com... – получается путем открытия переведенной страницы в новой закладке. Именно ПЕРЕВЕДЕННОЙ
Разница очевидна, но как добиться?
Гораздо интересней автоматический перевод – он сохраняет сессии и не меняет адрес страницы.
Спасибо за ссылки. Обязательно посмотрю и отпишусь. Самого заинтересовала эта возможность.
А как насчет взаимодействия с API ключами Яндекс карт? Если вписан скрипт с API ЯндексКарт, Google Translate выкидывает алерт с сообщением “неправильный ключ”
Приветствую Вас!
Подскажите, какие изменения в код необходимо внести, чтобы флажки не вертикально один над одним стояли, а в линию (горизонтально).
Спасибо!
Подскажите каким лучше всего способом переводить сайт!
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... и вставить эту ссылочку в грузинский флажок. Тут есть тоже проблема. Дополнительные исходящие (внешние) ссылки на сайте. И Яндекс может забанить, думая о том что сайт продаёт ссылки. А также ссылки в браузере в глазах посетителей выглядят не красиво.
Так каким лучше всего способом пользоваться переводом?
Я думая Yandex Вас не забанит за такое, это конечно мое ИМХО, которое основано на личном опыте
также интересует этот вопрос. надеюсь на Вашу помощь
В коде:
.lang_en, .lang_de, .lang_fr {width: 22px; height: 16px;}
добавить:
.lang_en, .lang_de, .lang_fr {width: 22px; height: 16px; float: right; }
Проблема: при переходе на какой-то язык, на другой уже перейти невозможно.
Решение: подправим твой код и обойдемся без 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>
<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>
Соответственно вместо “Ваш сайт” вставляем адрес вашего сайта.
Будет правильнее, спасибо.
Работает, почти… Самого главного не делает! :
http://www.google.com/translate...
Зайдите сюда: http://translate.google.com/... найдите такой текст:
Переводите текст с помощью кнопки на панели инструментов браузера
Чтобы получить перевод одним нажатием клавиши мыши, добавьте одну из кнопок на панель инструментов браузера. Тогда в любой момент, когда вы захотите перевести просматриваемую страницу, достаточно будет просто нажать кнопку. Перевести можно любую часть страницы, выделив ее перед нажатием кнопки.
Чтобы добавить кнопку, перетащите ее с этой страницы на панель инструментов браузера.
Чуть ниже в таблице найдите язык (или несколько) и перетащите с помощью мыши на боковую (либо личную) панель. Удачи!
Все правильно, только это никак не относится к переводу сайта на другой язык со стороны хостинга.
Для облегчения работы пользователя могу посоветовать Вам использовать в качестве браузера Google Chrome, там на автомате можно переводить сайты, язык которые отличаются от вашего.
Способ, как было тонко подмечено, годится для “случайных” посетителей. Так как сайт индексируется ПС только на русском… Толку для целевого привлечения иностранного трафика – ровно “0”.
Если нужен трафик – нужно чтобы в базе были тексты на всех языках, пусть даже и переведенные ГуглТранслейтом. Это громоздко, но альтернативы не вижу.
Это все так
Пишет, что не удаётся получить доступ к запрашиваемой странице. Сайт на локалке. Это что-то меняет?
Я думаю, что это все и меняет :)
Скажите, а как сделать отступ между флагами как у Вас ?
Нужно добавить:
.lang_en, .lang_de, .lang_fr {width: 22px; height: 16px; margin:1px; }
где 1px – это размер со всех сторон.
Спасибо Admin всё супер ) ) )
Спасибо автору. Все очень здоровски.
Скажите пожалуйста, как добавить украинский язык ?
Посидев 10 минут подумав, сделал сам :).
Спасибо.
У меня не получается раскажите поподробнише пожалуста!!!!
у меня css скачет в разные стороны от такого переводчика…не сайт в переводе получается, а радуга
Скажите куда вы вставили код в какие рядки что флажки у вас в хедере?
Собственно в ту часть страницы, где выводится шапка
Добрый день, что то мне кажется что все это в последнее время работает как то криво, вчера вечером делал, намучился с этими флагами (добавлял свои), все работало отлично! сегодня утром такая же проблема как и в *Tabarik *
Намучался :) чтоб флаги уложить на бок и по центру.
Вот украинский:)
<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> самое простое:)
Спасибо большое работает на ура, а как мне сделать код чтоб можно было перевести на русский с украинского, флаги я уже сделала.
Замени в sl=uk&tl=ru :)и всё
Ребята помогите
В настройках 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 в нем поставить горизонтальную или вертикальную по нужде!
Интересный урок! Спасибо!
Не могу не сказать админу: “Спасибо”!!!
Здравствуйте.
Можно как-то закрыть от индексации скрипт
google переводчик?
А для чего Google от Google прятать? Мне кажется что наоборот Google будет лояльнее к таким сайтам.
Спасибо за статью, пригодилась.
От себя могу добавить по третьему варианту. Если хотите, чтобы перевод открывался в том же окне, можно подправить скрипт, добавив ‘_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’);”>
Товарисчи помогите..ну не могу вставить эти флажки для перевода сайта)) плииз )
Друзья подскажите не могу сделать виджет переводчика на EN языке. ставлю en заместо ru и всё равно не переделывается
Статья переписана и найден новый метод!
Иван, а можно ссылку на новый метод? Спасибо!
Добрый день!
У меня на сайте не работает.
Это очень странно, в данной статье метод как часы работает, я в точности следую всем рекомендациям, а в итоге включается только первый выбранный язык и больше никуда не переключается, даже русский обратно не включается.
В общем автор, что-то в описании упустил.
Предлагаю автору сделать два описания и делать описание непосредственно в процессе установки перевода на реальный уже готовый сайт + напишите пожалуйста характеристики вашего хостинга.
Первое описание на домен: site.ru
Второе описание на поддомен: cool.site.ru
В моём случае данный метод не работает на поддомене, хотя я делал разными способами в соответствии с тем что рекомендует автор и рекомендации github тоже применял + после использования каждого метода полностью очищал кеш и куки браузера.
Но к сожалению всёравно ничего не получилось.
Надеюсь что автор поможет.
Спасибо.
Добрый день.
Всё получилось, но пришлось полностью переписать: css, js, html, и подключение скриптов.
Кому надо пишите: soft.sev@yandex.ru
В письме укажите языки для перевода и домен куда надо установить.
Можно не писать на почту, а просто открыть файл google-translate.js и в нем немного подправить код. Там есть русские комментарии
Иван, добрый день.
У вас в статье дана не полная информация по этой теме, поэтому мне пришлось из вашей статьи взять этот способ только как основу и полностью её переработать.
Только тогда всё получилось.
Удачи!
Скрыть панель перевода
.skiptranslate {margin-top:-43px;}
спасибо автору но скажите как можно в этот скрипт добавить ещё языки например белорусский или украинский ?
Добавил в статью эту информацию
Спасибо! Все работает на ПК. Но, при просмотре сайта на мобильном телефоне (Хром, Андроид), ничего не работает. Страница отображается, флаги отображаются, но идет какая-то постоянная загрузка (видна шкала загрузки) и при клике на флаги ничего не происходит.
Можете привести пример сайта?
Здравствуйте, скажите пример http://demo.l2banners.ru/google-translate-custom-widget/ не работает, т.к. сервис от Google (перевод сайтов https://translate.google.com/intl/en/about/website/ ) сейчас не работает?
У меня ошибка в консоли: «Failed to load resource: net::ERR_CONNECTION_TIMED_OUT» – http://195.34.49.19/?u=translate.google.com%2Ftranslate_a%2Felement.js%3Fcb%3DTranslateInit&r=http%3A%2F%2Fdemo.l2banners.ru%2F&h=e4a86f4adccd3e746f26a378116af720&mr=5
Есть другие решения по переводу сайтов?
Все ссылки приведенные в статье активны и рабочие. Пример приведенный в статье рабочий на 100%. Даже в настоящее время
Здравствуйте, уважаемый админ.
Вижу, что вы очень хорошо разбираетесь в теме. Подскажите, пожалуйста, можно ли в принципе реализовать вот следующую задачу?
«Есть наш сайт. На нем размещается какая-то ссылка или кнопка с выбором языка, при нажатии на которую пользователь переходит на другой сайт (чужой), который автоматически переводится на выбранный пользователем язык.»
То же другими словами: Есть наш сайт А и чужой сайт Б. Чужой сайт Б только на английском. Нужно как-то настроить наш сайт А, чтобы при переходе с него на чужой сайт Б, этот Б автоматически переводился на выбранный язык.
Думали делать перевод страниц сайта Б с помощью Google- и Яндекс-переводчика, но работает криво.
Нужно при переходе по нашей ссылке давать браузеру пользователя команду переводить следующий сайт на определенный язык.
Такое вообще возможно реализовать?
Если да, то можно у вас заказать платную консультацию или уже готовую реализацию задачи?
Я не оказываю платные услуги. То что Вам нужно можно реализовать на PHP+JS. Стоит найти разработчика на kwork или FL
Здравствуйте,
Добавила несколько недель на сайт на тильде html виджет от Виталия П. Все прекрасно работало и на Пк и в мобильной версии.
Сегодня проверила опять, на ПК отлично. В мобильной версии в сафари перевод не работает. страницу обновляет, но не переводит.
У некоторых пользователей при скролле или нажатии на страницу флаги увеличиваются, пока не закрывают весь экран. Иногда переводит, если несколько раз обновить. Раньше таких проблем не было
сайт: japanonly.club
Большое спасибо, если поможете
код брала тут: https://direktoriya.site/widgetrueng
Как можно это реализовать на Google Sites?
Огромное спасибо автору!
Перелопатил несколько вариантов, пока не наткнулся на этот.
Скажите пожалуйста, можно ли как то помечать текст на сайте (в коде html), который не нужно переводить на другие языки?
Например есть термины, которые в других языках используются в английском варианте. Но гугл переводит их на сой манер и таких слов даже нет в тех языках ))
Здравствуйте, проблема следующая: не работает перевод на русский (кириллицу), в то время как на китайский, арабский, немецкий и похожие работает. Сайт изначально написан на английском, запускаю через localhost с помощью XAMPP.
Здравствуйте, тут такая проблема. На других сайтах работает нормально скрипт, а на этом (https://www.aromaty.kz/) почему то после первого перевода языка, перестаёт работать. Могли бы вы подсказать в чём дело?
привет я поставил данный скрипт у себя на панели http://panelcs.ru/ но когда с мобилы заходишь то мешают эти значки https://prnt.sc/DoHb3Y2l7pbN скажите их можно как то срыть?
Добрый день. Ваш скрипт отлично работал всё время, но к сожалению в последнее время перестал работать в Украине. Наверное из-за блокировок росийских ресурсов. Это можно как-то исправить? Спасибо за ответ.
Здравствуйте, на одном из сайтов у меня почему то после первого выбора смены языка, на другой уже не менялся. Почитав тут комментарии, я применил вариант (onclick=“window.open(‘http://translate.google.com/translate?u=http://Ваш Сайт&langpair=id%cen&ru=en&sl=ru&tl=en’);”), но у него есть минусы, при выборе языка он открывает новую вкладку и только там переводит, ещё перекидывает на главную страницу. Как сделать так чтобы не перекидывала на новую вкладку, а переводила текущею?
Отличное решение, интегрировал на свой сайт за 5 минут, иконки флагов поставил svg отсюда nucleoapp.com/svg-flag-icons