Как создать кнопку переадресации microsoft/google для каждого div отдельно?

Как создать кнопку перехода на Microsoft или Google для каждого div?

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

http://www.bing.com/widget/translator

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

Можно ли сделать то же самое с помощью google translate?
Любой переводчик в порядке со мной. Незлая помощь. Спасибо.

Это как сообщение пользователя появляется на моем веб-сайте.

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

Каждый из моих div имеет id.

Ответ 1

Ниже я расскажу, как начать работу с Microsoft Translator API. Сама же функциональность может быть реализована с помощью Google Translate API, но мне было как-то проще с MS, поскольку они бесплатно предлагают 2M символов/ежемесячный перевод, тогда как Google взимает минимум 1 $за тестирование.

Требования:

Зарегистрируйтесь для бесплатной подписки на Microsoft Translator. Для этого вам будет предложено создать новую учетную запись MS или войти в систему с существующей.
Зарегистрируйте свое приложение на Azure Datamarket.

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

Реализация:

Прежде всего, каждый запрос API должен включать токен доступа. Срок действия составляет 10 минут, поэтому вам придется обновить их до истечения срока их действия. В идеале процесс должен выполняться на стороне сервера, чтобы защитить секрет клиента и результат (токен + время истечения) отправить обратно в веб-приложение.

Node.js пример:

var request = require("request");

var options = { 
  method: 'POST',
  url: 'https://datamarket.accesscontrol.windows.net/v2/OAuth2-13/',
  form: { 
     // Client ID & Client secret values (see screenshot)
     client_id: 'translator_3000',      
     client_secret: 'ZP8LzjZkKuFAb2qa05+3nNq+uOcqzWK7e3J6qCN1mtg=', 
     scope: 'http://api.microsofttranslator.com',
     grant_type: 'client_credentials' 
  } 
};

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  console.log(body);
});

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

{
  "token_type": "http://schemas.xmlsoap.org/ws/2009/11/swt-token-profile-1.0",
  "access_token": "http%3a%2f%2fschemas.xmlsoap.org%2fws%2f2005%2f05%2fidentity%2fclaims%2fnameidentifier=translator_3000&http%3a%2f%2fschemas.microsoft.com%2faccesscontrolservice%2f2010%2f07%2fclaims%2fidentityprovider=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&Audience=http%3a%2f%2fapi.microsofttranslator.com&ExpiresOn=1435405881&Issuer=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&HMACSHA256=st9LJ0F8CKSa6Ls59gQN0EqMWLFed5ftkJiOCVXE4ns%3d",
  "expires_in": "600",
  "scope": "http://api.microsofttranslator.com"
}

Теперь, когда у нас есть токен доступа, это время для запроса на перевод. Примечание. Это запросы JSONP, а токен доступа предоставляется с использованием параметра строки запроса appId в формате Bearer <token> (разделенном пробелом). Строка запроса также включает в себя параметр text - текст вашего сообщения и параметр to - код языка, выбранный пользователем, список всех поддерживаемых кодов и языковых имен, которые вы также можете получить из API.

Вот пример:

var settings = {
  "url": "https://api.microsofttranslator.com/v2/Ajax.svc/Translate",
  "method": "GET",
  "dataType": "jsonp",
  "jsonp" : "oncomplete",
  "data" : {
    "text" : "Good Morning StackOverflow",
    "to" : "uk",
    "appId" : "Bearer http%3a%2f%2fschemas.xmlsoap.org%2fws%2f2005%2f05%2fidentity%2fclaims%2fnameidentifier=translator_3000&http%3a%2f%2fschemas.microsoft.com%2faccesscontrolservice%2f2010%2f07%2fclaims%2fidentityprovider=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&Audience=http%3a%2f%2fapi.microsofttranslator.com&ExpiresOn=1435405881&Issuer=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&HMACSHA256=st9LJ0F8CKSa6Ls59gQN0EqMWLFed5ftkJiOCVXE4ns%3d"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

Ответ - это переводимая строка, которая должна быть заменена исходным текстом:

"Доброго ранку StackOverflow"

И, наконец, все коды языков:

http://api.microsofttranslator.com/V2/Ajax.svc/GetLanguagesForTranslate

и дружественные имена для выбранных кодов:

http://api.microsofttranslator.com/V2/Ajax.svc/GetLanguageNames?locale=en&languageCodes=["en", "de", "es", "uk"]

Официальная документация.

Ответ 2

Используйте элемент класса <div class="micropost293">, показанный ниже.

<div class="micropost293"><p>Тестирование</p>
<div class="micropost293_control" lang="en"></div>
    <script>
function googleSectionalElementInit() {
  new google.translate.SectionalElement({
    sectionalNodeClassName: 'micropost293',
    controlNodeClassName: 'micropost293_control',
    background: '#f4fa58'
  }, 'google_sectional_element');
}
</script>
</div>

//Place this Script at bottom of page.
    <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>