How to add google translate button on a Website/Blogger using javascript

Question

Sophia January 21, 2023 › #Blogger › #GoogleTranslate

❌

How to add google translate button on a Website/Blogger using javascript

You must add Google Translate button in your website so that the viewers can easily read your article using their own language.

Benefit : It will increase the number of viewers and also revenues.

How to add google translate button on Your Website

There are only three steps to implement a custom google translate button on your website.

At first you need to add a <div> element with the id "google_translate_element" such as [id="google_translate_element"].

  
Example  
<html>
  <head><title>Google Translate Button</title> 
 </head>
 <body>
  <h2>This is a simple web page.</h2>
  <div id="google_translate_element"></div>
 </body>
</html>

Next Add a reference to the translate API .

  
Example  
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Next add a javascript function.

   
Example  
<script type="text/javascript">
 function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
 }
</script>

{pageLanguage: 'en'} here 'en' is your webpage Language. You can change it if your webpage language is different. Like :- Hindi = hi, Bengali = bn , German = de

Finally, Google translate button is ready to translate the content of your page.

  Example 
<html>
  <head>
    <title>Google Translate Button</title> 
  </head>
 <body>
 <h2>This is a simple web page.</h2>
 <p>This is a simple web page and you can translate the content of this page by selecting your language in the select box</p>
 <div id="google_translate_element"></div>
 <script type="text/javascript">
  function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
  </script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 </body>
</html>

Button Modes

There are currently three type of buttons for the Google Translate button.

   
Horizontally

<!DOCTYPE html>
<html>
 <head>
  <title>Google Translate Button</title> 
 </head>
<body>
 <h2>This is a simple web page.</h2>
 <p>
  This is a simple web page and you can translate the content of this page by selecting your language in the select box
 </p>
 <div id='google_translate_element'></div>
 <script>
  function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en',
        autoDisplay: 'true',
        layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
      }, 'google_translate_element');
    }
  </script>
 <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
 <p>
  This example displays a HORIZONTAL translate button.
 </p>
 </body>
</html>

Try It Yourself

  
Vertically

<!DOCTYPE html>
<html>
 <head>
  <title>Google Translate Button</title> 
 </head>
<body>
 <h2>This is a simple web page.</h2>
 <p>This is a simple web page and you can translate the content of this page by selecting your language in the select box</p>
 <div id='google_translate_element'></div>
 <script>
  function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en',
        autoDisplay: 'true',
        layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
      }, 'google_translate_element');
    }
  </script>
 <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
 <p>This example displays a VERTICAL translate button.</p>
</body>
</html>

Try It Yourself

    
Dropdown Button

<!DOCTYPE html>
<html>
 <head>
  <title>Google Translate Button</title> 
 </head>
<body>
 <h2>This is a simple web page.</h2>
 <p>This is a simple web page and you can translate the content of this page by selecting your language in the select box</p>
 <div id='google_translate_element'></div>
 <script>
  function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en',
        autoDisplay: 'true',
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
      }, 'google_translate_element');
    }
  </script>
 <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
 <p>This example displays a VERTICAL translate button.</p>
</body>
</html>

Try It Yourself

how to google translate a website,how to add google translate button on a Website/Blogger,translate google,how to use google translate,how to translate a web page,how to google translate a page,how to translate a website to english,how to translate google page,how to google translate a website,how to translate language in google

Write Your Answer

Apu Thursday, January 14, 2021
2023-01-21T14:54:55+05:30

2

<!DOCTYPE html>
<html>
<head>
<title>Live Messages</title>
</head>
<body>
<h1>Live Messages</h1>
</body>
</html>

Reply Delete
Share
Anonymous Thursday, November 17, 2022
2023-01-21T14:54:55+05:30

2

thanks alot

Reply Delete
Share

Sophia · Accepted Answer · 2023-01-21T14:54:55+05:30

You must add Google Translate button in your website so that the viewers can easily read…