Google translate установить на сайт

Узнайте, как добавить кнопку Google Translate на веб-страницу.

Пример

Google перевести кнопку

Начните с простой базовой веб-страницы.

Добавьте элемент с идентификатором «google_translate_element»:

Пример

My Web Page

Добавьте ссылку на API Translate в Google.com:

Пример

Добавьте функцию JavaScript:

Пример

function googleTranslateElementInit() new google.translate.TranslateElement(, ‘google_translate_element’);
>

And you are ready to translate the content of your page:

Пример

My Web Page

Translate this page:

function googleTranslateElementInit() new google.translate.TranslateElement(, ‘google_translate_element’);
>

Режимы кнопок

Есть в настоящее время три различных режима дизайна для Google Translate кнопку.

Источник: html5css.ru

Как переводить сайты с помощью Google Translate

Предисловие.

Раньше (примерно до 2019 года) эта задача решалась просто: ставишь код от Гугл Транслейт на сайт и все работает. Сейчас Google Translate прикрыл эту возможность, а другие сервисы стали делать это только за деньги.
Я начал разбираться в теме, но ответов как сделать это на Тильде я не нашел. Но нашел статью https://adminway.ru/avtomaticheskii-perevod-vashego-saita-s-pomoshchyu-js-skripta-google-translate где рассказывается как это можно сделать с помощью Ява скрипта или Кверри. Про Кверри я вообще ничего не знаю так как не программист, но с Java script работал еще с начала 2000х, когда делал собственный сайт https://pavel-lyakhov.ru/ (тогда кстати и влез в тему HTML и всего что с ним связано – сайт до сих пор работает, возможно надо перевести его на динамичную CMS, но пока не вижу необходимости)
Не буду описывать всех коллизий моего творческого поиска, пишу что в итоге, в сухом остатке.

Установка Google recaptcha на битрикс

Процесс установки авто переводчика на сайт, сделанный в Tilda конструкторе.

Итак, я взял за основу кейс от Vitalii P (https://github.com/get-web/google-translate-custom-widget ), «который написал небольшой код, умеющий переводить сайты на автомате. Используется все тот же инструмент от Google Translate. Разработчики из Google прикрыли только добавление новых сайтов в эту систему, а старые сайты все также могут пользоваться скриптом автоматического перевода сайтов. Этим и воспользовался Виталий.»

В данном примере есть одна загвоздка, не совместимая с Tilda: на Тильда нельзя выложить никакие файлы, а в нашем случае надо куда-то поместить файл google-translate.js (эта ссылка на оригинальный файл от Виталия, но я это файл в итоге переделал, ссылка на него будет дальше).

Что я делал:

1. Файл google-translate.js я выложил на другой сервер и изображения флагов тоже.

2. Изменил в файле google-translate.js одну строку: domain: «Get-Web.Site» на domain: «inpren.ru»- вы пишите туда свой домен без www как у меня в примере (воспользовался рекомендациями из подсказок оригинального файла от Vitalii P). Получилось вот что: https://pavel-lyakhov.ru/js/google-translate.js

ПЕРЕВОДИ В 1 КЛИК! — СТАВИМ РАСШИРЕНИЕ В CHROME/ Add Google Translate extension in Chrome

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

3. Далее танцы с Тильдой (заходим в админку сайта на Тильде и я показываю скриншоты и пояснения).

4. Заходим в меню «Настройки сайта» и прописываем наши JS крипты в поле

В левом фрейме в низу нажимаем «ещё» и находим «HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD».

Нажимаем кнопку «Редактировать код» и вставляем туда код:

Обращаю ваше внимание, что в четвертой строке мы прописываем адрес, куда вы поместили файл со скриптом, в моем случае это https://pavel-lyakhov.ru/js/google-translate.js (см пункт 2)

Google cast что это в телевизоре Samsung

5. Прописываем стили в таблице CSS. Доступ в CSS в Тильда там-же: заходим в меню «Настройки сайта» => левый фрейм «ещё» и видим справа ПОЛЬЗОВАТЕЛЬСКИЕ CSS-СТИЛИ => нажимаем кнопку «Редактировать CSS»

Сюда вставляем код стиля:

/* language */

.language position: fixed;
left: 10px;
top: 5%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
z-index:99999999;
>

.language__img margin: 2px;
cursor: pointer;
opacity: .5;
>

.language__img:hover,
.language__img_active opacity: 1;
>

/* Эта часть отвечает за то чтобы кнопки находились фиксировано на странице*/

.page_fix top: 0 !important;
position: static !important;
>

/* Эта часть отвечает за то чтобы не было видно надписи – Переводчик Google */

.skiptranslate display: none !important;
>

Этот код стиля я изменил: так как в тильде структура сайта послойная, а кнопки смены языков мы вставляем в «Header» (об этом речь пойдет далее), я столкнулся с тем, что кнопки смены языков на некоторых боках были активными, на некоторых нет. Я догадался, что это связано со слоями и нагуглил (блин я фанат Яндекса а не Гугла, но слово «нагуглил» заменить нечем – искал в Яндексе J: https://ru.stackoverflow.com/questions/493552/css-блок-поверх-всего-контента ) что в таблице CSS можно также управлять тем на какой высоте по оси Z находится то явление, которым мы этим стилем управляем. В итоге в коде добавилась строчка:

Еще одно пояснение касательно положения кнопок по вертикали: в исходнике по умолчанию кнопки находятся в центре страницы слева. У меня меню в верху страницы + сайт работает в полосе прокрутке и мне удобнее было поставить кнопки перевода в верхнем левом углу в рамках основного меню. Для этого мен необходимо поднять кнопки по оси Y, за этот параметр отвечает оператор «Top» и отчет он ведет с верху вниз (в оригинале было « top: 50%; » ), я соответственно методом подбора остановился на « top: 5%; »

Отключить подписку Google диск

6. Все, подготовку мы сделали: поселили на свой сервер картинки флагов, файл Java Script, в админке Тильда прописали скрипты в о разделе всего сайта и списали стили которые отвечают за поведение кнопок либо текстовых надписей. Теперь нам надо поставить сами кнопки смены языка (есть вариант «флаги» или тестовый «РУС» «ENG» и тд. – я выбрал картинки флагов)

7. Вставляем кнопки смены языков в Tilda. В моем случае «Шапка» (Header) и «Подвал» (Footer) на всем сайте общие, поэтому я вставляю кнопки в шапку. Если у вас «Шапки» разные, то надо будет в каждую шапку код кнопок вставить.

Заходим в Header

Добавляем блок «HTML код» (T123), я поставил его сразу после меню, но скорее всего это не важно, так как в таблице CSS координаты расположения кнопок.

Как я писал ранее, я выбрал изображения флагов. Кстати их можно менять (берем любое изображение, присеваем ему то же имя, что прописано в коде и сохраняем в папке на вашем сервере, в моем случае в папке https://pavel-lyakhov.ru/images

В итоге мой код для трех языков с флагами стран:

ru en de

8. Нажимаем «Опубликовать все страницы» в меню сайта

Дополнительная информация.

Если хотите поставить другие языки – вот таблица с обозначением языков, которые надо будет подставить в фрагмент кода data-google-lang=»ru» блока «HTML код» (T123) после =. Красивые флаги можно взять здесь – lang.zip

ru en de

ISO-639-1 Code

Источник: pavel-lyakhov.ru

Google переводчик для сайта

Google переводчик для сайта

Опубликовано: 23.12.2015 Версия: 0.0.2 Установлено: 500 — 999 раз Подходящие редакции: «Первый сайт», «Старт», «Стандарт», «Малый бизнес», «Бизнес» Адаптивность: Нет Поддержка Композита: Нет Совместимо с Сайты24 Нет Совместимо с PHP 8.1 Нет

Google не видит сайт

Описание

Добавляет на сайт возможность перевода с помощью google переводчика сайта. При выборе языка происходит переход на google переводчик в котором уже будет переведена страница.

Обсуждения (2)
Авторизуйтесь, чтобы оставить отзыв или задать вопрос разработчику.
Пользователь 823865 7 декабря 2021 13:18
Модуль не работает
Пользователь 228203 24 июня 2016 00:18

Установил, очень интересная и нужная штука, Мне очень понравилса ваш Google переводчик для сайта.
Но после перевода на сайте меняется шрифты, перечеркивает цены, и меняет картинки (например в разделе полезная информация), и хочется чтобы компонент был установлен в верхнем углу.

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

Другие решения разработчика

еще 3 решения

Решение добавлено в корзину

Перейдите в корзину и оформите заказ или продолжите покупки
Продолжить покупки

Готовые решения

Все решения

Для Битрикс24

О маркетплейсе

Как установить

Контакты

Авторы

Блоги разработчиков

Для разработчиков

Добавить свое решение

Стать партнером

Источник: marketplace.1c-bitrix.ru

Рейтинг
Загрузка ...