如何为每个div单独创建微软/谷歌翻译按钮？

Question

如何为每个div创建微软或谷歌翻译按钮？

每个div都有不同语言的内容，我想为每个div添加一个翻译按钮，并使其仅响应该div，就像以下链接中的按钮一样。

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

但是当我使用上面链接中提到的代码时，它会翻译整个网页。我希望通过点击相应的翻译按钮来单独翻译每个div。
是否可以使用谷歌翻译轻松完成相同的事情？
任何翻译器都可以。请帮忙。谢谢。
这是在我的网站上用户发布的内容的样子。
我想为每个div添加一个翻译按钮，以便用户可以将每个div翻译成他们想要的任何语言。
我的每个div都有一个id。

- LovingRails

---

你可以根据一些 JavaScript 函数得到结果。 - Mitul

也许您会对此感兴趣 Google Translate API。 - Givi

很遗憾，这不再适用于微软绝望的服务域https://datamarket.accesscontrol.windows.net/v2/OAuth2-13/，并已转移到Azure https://portal.azure.com/。 更多信息请参见此处http://docs.microsofttranslator.com/text-translate.html。 需要手机号码和信用卡信息以完成最终账户创建。 - Metacowboy

Answer 1

以下是如何使用Microsoft Translator API入门的说明。Google Translate API也可以实现相同的功能，但对我来说，由于Microsoft提供每月免费翻译200万个字符，而Google则最少收取1美元进行测试，因此使用MS更加容易。

先决条件：

1. 在Microsoft Translator上注册免费订阅。您将被要求创建新的MS帐户或使用现有帐户登录。

2. 在Azure Datamarket上注册您的应用程序。

注册示例。注意：这里有两个重要字段“客户端ID”和“客户端密钥”，您需要它们来请求访问令牌。

实施：

首先，每个对API的请求都应包含访问令牌。过期时间为10分钟，因此您需要在其到期之前更新它们。理想情况下，这个过程应该在后端完成，以保护您的客户端秘密，并将结果（令牌+过期时间）发送回Web应用程序。

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"]

官方文档已包含。

- Andriy Horen

Answer 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>

- pool pro