如何分别为每个div创建microsoft/google翻译按钮？

Question

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

每个div都有不同语言的内容,我想为每个div添加一个翻译按钮,并使其仅响应该div,如下面链接中的按钮.

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

但是,当我使用上面链接中提到的代码时,它会翻译整个网页.我想通过单击相应的翻译按钮分别翻译每个div.

使用谷歌翻译可以轻松完成同样的事情吗？
任何翻译对我都没问题.请帮助.谢谢.

这个用户的帖子如何出现在我的网站上.

我希望每个div都有一个翻译按钮,以便用户可以将每个div翻译成他们想要的任何语言.

我的每个div都有一个id.

Answer 1

下面我将解释如何开始使用Microsoft Translator API.同样的功能可以通过谷歌翻译API实现,但是对于我来说它对我来说更容易,因为他们免费提供2M字符/每月翻译,而谷歌收取最低1美元的测试费用.

先决条件:

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

包括官方文件.