How to create microsoft/google translate button for each div separately?

Question

How to create microsoft or google translate button for each div?

Each div has content in different language and I would like to add a translate button for each div and make it respond to only that div like the button in the following link.

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

But when I use the code mentioned in the link above, it translates the whole webpage. I would like to translate each div separately by clicking on the respective translate button.

Can the same thing be done easily using google translate?
Any translator is fine with me. Kindly help. Thanks.

This how the users' post appear on my website.

I would like to have a translate button for each of the divs so that the users can translate each div into any language they want.

Each of my div has an id.

Answer 1

Below I'm explaining how to get started with Microsoft Translator API. The very same functionality can be implemented via Google Translate API however it was somehow easier for me with MS as they offer 2M characters/monthly translation for free whereas Google charges minimum of 1$ for testing.

Prerequisites:

1. Sign up for free subscription on Microsoft Translator. For that you will be asked to create new MS account or login with existing one.

2. Register your application on Azure Datamarket.

   Registration example. Note: There are two important fields here Client ID and Client secret you will need them for access token requests.

   

Implementation:

First things first, every request to the API should include access token. Expiration time is 10 minutes so you will have to renew them before they expire. Ideally the process should be done on the back-end side to protect your Client secret and result (token + expiration time) send back to web application.

Node.js example:

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);
});

Response contains few fields including access_token, use its value for further requests.

{
  "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"
}

Now when we have access token it's time for translation request. Note: These are JSONP requests and access token is supplied using query string parameter appId in the format Bearer <token> (separated by space). Query string also includes text parameter - text of your post and to parameter - language code selected by user, list of all supported codes and language friendly names you can get from API as well.

Here is example:

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);
});

Response is translated string to be replaced with post original text:

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

And lastly, all language codes:

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

and friendly names for selected codes:

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

Official documentation included.

Answer 2

Use the Class element <div class="micropost293"> shown below.

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