Как поставить переводчик на сайт

Кастомный виджет googleTranslate для сайта

Получить доступ к переводчику сайтов больше нельзя. Это никак не отразится на тех, кто уже установил соответствующий плагин.

Советуем пользователям переводить веб-страницы с помощью браузеров, имеющих встроенную функцию перевода.

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

Как будет выглядеть наш пример:

Для корректной работы нашего кастомного виджета необходимо подключить файлы:

Содержимое style.css:

Разметка кастомного виджета:

Содержимое google-translate.js:

При смене языка добавляется куки с ключом googtrans и значением вида /ru/en

• /ru — это язык который переводим
• /en — это язык на который переводим

Это стандартное поведение, поэтому я им и воспользовался для кастомизации виджета. Кликая по флажкам необходимых языков, из атрибута data-google-lang в куки записываются соответствующие значение вида /auto/выбранный_язык. Затем происходит перезагрузка и auto заменяется на язык записанный отдельно в конфиг:

Это сделано для того, чтобы мы не привязывались к одному языку. Если к примеру сайт переведен на 2 языка, русский и английски, то мы можем передать текущий язык в конфиг и правильно обработать его. Все доступные языки и их код стандарта ISO-639-1 можно найти тут.

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

Теперь, имея контроль над нашим виджетом, мы можем без проблем реализовывать более сложные дизайны:

Как в браузере перевести сайт на русский язык

Доброго времени суток.

Вот так бывает «бродишь» по интернету в поисках какой-нибудь нужной информации, и натыкаешься на иностранный сайт . Судя по картинкам, понимаешь, что там разбирается как раз твоя проблема, а прочитать, что написано — не можешь, т.к. в английском слаб (или в немецком, или еще в каком. ). 👀

Конечно, можно пользоваться различными 📌онлайн-переводчиками, копируя и переводя по абзацу нужные данные. Однако, когда имеешь дело с иностранным сайтом — это крайне неудобно (ведь для работы нужно видеть не только абзац, но и перевод меню, каких-то примечаний, да и постоянно переходить из одного ока в другое — удовольствие то еще. ).

Однако, сейчас есть превосходное решение: иностранные сайты можно переводить «на лету» прямо в самом браузере! Почти все современные браузеры поддерживают данную возможность. Ниже рассмотрю, как включить это.

Перевод веб-страниц с иностранного («на лету»)

Chrome

Ссылка на оф. сайт браузера: https://www.google.ru

В одном из самых популярных браузеров, естественно, есть встроенная функция для перевода сайтов на иностранных языках.

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

Если этого окна нет — обратите внимание на значок в адресной строке браузера. Щелкнув по нему — вы сможете автоматически перевести текущую веб-страничку (см. пример ниже 👇).

📌 В помощь!

Что делать, если браузер Chrome не предлагает перевод страницы — [см. инструкцию]

Переводим главную страничку Википедии

Стоит отметить, что качество перевода довольно-таки неплохое: с сайтом можно вполне комфортно работать (просто лет 5-10 назад о таком переводе можно было только мечтать. Смысл многих фраз просто не переводился и приходилось многое домысливать).

Страничка на русском!

Если у вас нет такого значка и браузер вам не предлагает совсем ничего, когда вы заходите на иностранные сайты, то:

1. откройте настройки (страничка: chrome://settings/ );
2. затем внизу экрана раскройте «Дополнительные» настройки;
3. в разделе «Языки» обратите внимание на настройку «Предлагать перевод страниц, если их язык отличается от используемого в браузере» (включите ее, если она у вас выключена);
4. обновите страничку на иностранном языке (кнопка F5 в браузере).

Языки — настройки в Chrome

Если у вас очень старая версия Chrome, то просто обновите (переустановите) браузер (ссылка на официальный сайт приведена чуть выше).

Яндекс-браузер

Прямой конкурент Chrome.

Что касается перевода : то в чем-то он лучше, чем в Chrome, в чем-то хуже (кстати, в новой версии браузера — есть опция для перевода просматриваемого видео! Т.е. вы будете слышать русскую речь вместо английской, оригинальной!).

В плане использования — то разницы нет: при открытии сайта на английском (например), также в верхнем меню появляется предложение перевести на русский.

Если соглашаетесь — видите оптимизированную страничку, перевод достаточно качественный (см. пример ниже 👇).

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

1. открыть параметры;
2. нажать на кнопку просмотра дополнительных опций;
3. в разделе «Языки» проверьте, чтобы стояли три галочки: «Предлагать перевести страницы, язык которых отличается от языка интерфейса», «Предлагать перевод слов и фраз при выделении текста», «Переводить слова по наведению курсора и нажатию кнопки Shift».

Языки — настройки Яндекс-браузера

Собственно, задав подобные настройки, обновите страничку (клавиша F5) и посмотрите на верхнее меню: браузер должен предложить осуществить перевод.

Opera

К сожалению, непосредственно переводчик в сам браузер не встроен. Однако, для перевода есть большое число различных дополнений (аддоны). Я рекомендую попробовать дополнение Translator (ссылку на него привел чуть выше).

После его установки, в правом верхнем углу у вас появится небольшой значок. Когда вы зашли на иностранный сайт — вы можете щелкнуть по этому значку и у вас откроется небольшое окно:

1. в нем можно перевести отдельные фразы и словосочетания;
2. а можно перейти по ссылке «Перевести активную страницу. « — затем должна открыться новая вкладка с полным переводом странички.

Перевод в OPERA

Перевод осуществляется технологией Google (кстати, вам будет рекомендовано установить Chrome). В принципе, далее можете переходить по любым ссылкам на сайте — следующие открытые странички будут переводиться в этой вкладке автоматически (каждый раз открывать аддон ненужно!).

Открывается новая вкладка с результатами

Firefox

Firefox аналогичен Opera — также не имеет встроенного переводчика. Поэтому, чтобы добавить данную функцию в браузер — придется использовать какое-нибудь дополнение (аддон).

Их, конечно, сотни, но протестировав с десяток из них — я все же пришел к выводу, что выигрывает Google Translator (ссылку привел выше).

Буква «T» в Firefox

Аддон крайне простой: после его установки у вас в верхнем меню программы появится значок с буквой «T». Достаточно щелкнуть по нему левой кнопкой мышки — и ваша страничка будет переведена. Быстро и удобно!

👉 Еще по теме!

Переводчик с фото онлайн: для компьютера и смартфона (перевод того, что попало в камеру/объектив телефона)

Как перевести страницу сайта на русский

В последнее время интернет стал нашим постоянным спутником. Очень трудно представить себе времена, когда для того, чтобы получить нужную информацию, необходимо было лезть в разные справочники или идти в библиотеку. Сейчас достаточно только включить любой имеющийся гаджет, открыть любимый браузер и «забить» в строке поиска запрос на интересующую тему. При этом получить нужные данные можно со всего мира. И довольно часто они представлены на иностранном языке. Что же делать в этом случае? Как перевести веб-страницу на русский язык?

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

Google Chrome

Если вы пользуетесь браузером Google Chrome, то проблемы с переводом страницы возникнуть вообще не должно, так как у него функция перевода уже встроена. Каким образом это работает?

1. Сначала проверяем, включена ли функция перевода. Для этого нужно зайти в настройки: chrome://settings/. Если галочка около пункта «Предлагать перевод страниц» есть, то все хорошо, если нет — поставьте.
2. Открываем любой сайт и ищем в верхней правой части окна автоматическое уведомление, предлагающее перевести страницу. Если его нет, тогда необходимо дать браузеру соответствующую команду.
3. Находим иконку перевода, жмем на нее. Выйдет уведомление с вопросом «Перевести страницу?».
4. Нажимаем или на «Перевести», или на «Нет». Если выбираем первый вариант, то текст будет переведен на русский язык.
5. Для настройки языка страницы и языка перевода нужно нажать на кнопку «Параметры» и выбрать нужное.
6. Чтобы посмотреть текст оригинала, достаточно навести на нужное слово, предложение или абзац курсор.
7. Если кликнуть на «Нет», то тогда появится меню с дополнительными параметрами. В них можно указать, следует ли браузеру переводить и при следующих открытиях эту страницу, и понадобится ли обратный перевод на язык оригинала.

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

Google-переводчик

Можно воспользоваться переводчиком Google:

1. Переходим на сайт: translate.google.ru/.
2. Открываются два окна: слева — для исходного текста и справа для перевода.
3. В левую часть вставляем нужный кусочек текста на иностранном языке.
4. Практически сразу же с правой стороны можно будет увидеть перевод. Язык, на который он должен быть сделан, можно выбрать сверху над этим окном.
5. Как и в Google Chrome, здесь можно подвести курсор к любому слову, предложению или даже абзацу, чтобы увидеть оригинальный текст. Для удобства в этом сервисе предлагается такая функция, как улучшение перевода. Чтобы ею воспользоваться, следует щелкнуть на нужном месте мышкой, программа предложит выбрать другой вариант слова или фразы.
6. Внизу под переводом можно найти ту же версию переведенного текста, но написанную латиницей.

Яндекс-переводчик

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

1. Заходим по адресу: translate.yandex.ru.
2. Вверху находим вкладку «Текст» (как правило, страница автоматически открывается именно на этой вкладке).
3. Принцип работы в этом сервисе такой же, как у Google, тоже есть два окна: для языка оригинала и для языка перевода.
4. Выбираем нужный язык, на котором мы хотим прочитать текст. Практически сразу же появляется готовый перевод. Особенностью Яндекса является не только подсвечивание текста оригинала, но и его озвучивание.
5. Данный сервис дает еще возможность перевода картинок и сайтов. Чтобы прочитать выбранную интернет-страницу на русском языке, достаточно указать в левом окне ее адрес.
6. Если нужно узнать перевод только одного слова, то достаточно его просто выделить и нажать на нем клавишу «Shift». Язык при этом программа определяет автоматически. Чтобы перевести сразу же несколько фраз или же предложений, их также следует выделить, а затем нажать на «Shift» в конце выбранного текста.

Для удобства пользователя Яндекс предлагает возможность самостоятельно включать и отключать переводчик. По своему выбору сделать это можно как для всех языков, так и для определенных. Выполняется это следующим образом:

1. Заходим в «Настройки».
2. Ищем кнопку «Показать дополнительные настройки», кликаем на нее.
3. Выбираем раздел языки, в нем ищем пункт «Предлагать перевод страниц на иностранном языке», ставим около него галочку.
4. В случае, когда пользователь уже отказался от использования этой функции, а она ему снова понадобилась, достаточно только щелкнуть правой кнопкой мышки на странице, выбрать в выпавшем меню раздел «Перевести на русский».

Сайт Translate.ru

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

1. Заходим по указанному адресу.
2. Выбираем нужную тематику.
3. Вставляем в левое окно адрес нужного сайта. Если вы знаете, на каком он языке, то в соответствующей вкладке можете указать его вручную, если же нет, то программа определит его автоматически. Рядом будет находиться вкладка выбора языка, на который должен быть переведен текст.
4. Нажимаем на кнопку «Перевести». В правом окне появится результат.
5. Для перевода отдельной части сайта или просто какого-то текста, его нужно скопировать и вставить в левое окно. Дальнейшие действия выполняются точно так же, как это описано выше.
6. Сервис может также проверить орфографию или предложить озвучить текст.

К сожалению, translate.ru способен выполнить перевод не всех страниц. Указание об ошибке может появиться в случаях, когда:

1. Неправильно указан адрес веб-сайта;
2. Сайт защищен разработчиком от выполнения с ним каких-либо действий;
3. На веб-странице есть ошибки, блокирующие работу переводчика;
4. Слишком большой объем страницы. Translate.ru допускает объем, не превышающий 500 kb.
5. Отображение информации происходит через флэш-файл.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если языков мало?

На этой странице есть список всех поддерживаемых языков. Код языка ISO -639 code из таблицы, меняем в параметре data-google-lang .

Скрыть панель Google Translate

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

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

Если Вы хотите внедрить автоматический перевод на поддомен (name.site.ru), то в файле google-translate.js нужно немного подредактировать. Файл хорошо комментирован. Комментарии на русском языке.

Комментарии

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

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

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

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

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

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

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

Вот без фрейма — 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 Вас не забанит за такое, это конечно мое ИМХО, которое основано на личном опыте