如何在您的网页上添加谷歌翻译按钮？

如今随着全球化的发展，多语言网站逐渐成为趋势。为了方便用户，您可能想在您的网页上添加谷歌翻译按钮。本文将为您介绍添加谷歌翻译按钮的方法。

第一步：在您的网页中添加 Google 翻译 API

要使用 Google 翻译，您需要在您的网页中添加相应的 API。您可以通过以下代码如下所示实现：

<script src="https://translate.google.com/translate_a/element.j...></script>

第二步：添加翻译按钮

在您网页中添加一个翻译按钮。您可以通过以下代码实现：

<button onclick="googleTranslateElementInit()">Translate</button>

请注意，此代码对应的是简单的 HTML 按钮。显然，您可以根据您的需求自定义按钮样式。

第三步：添加翻译脚本

现在是时候在您的网页上添加正式的翻译脚本了。通过下述代码，您可以实现您的网站的翻译功能。

function googleTranslateElementInit() {
  new google.translate.TranslateElement(
    { pageLanguage: 'en' }, 
    'google_translate_element'
  );
}

请注意，此处的 pageLanguage 是您网页的默认语言。您可以将它的值设为您网站中的主要语言。

第四步：将按钮动态添加到您的页面中

现在，我们需要在您的网页中添加翻译按钮。通过以下代码，您可以动态地将翻译按钮添加到您的网页上。

<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      includedLanguages: 'en,es,fr',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, 'google_translate_element');
  }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

请注意，以上代码将在您的网页上添加一个简单的翻译按钮。它支持英语、西班牙语和法语之间的翻译。

综上，这是添加谷歌翻译按钮的最简单方法。我们希望本文能够对您有所帮助，使您网站上的用户能够享受到更好的使用体验。

代码片段

<script src="https://translate.google.com/translate_a/element.j...></script>

<button onclick="googleTranslateElementInit()">Translate</button>

function googleTranslateElementInit() {
  new google.translate.TranslateElement(
    { pageLanguage: 'en' }, 
    'google_translate_element'
  );
}

<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      includedLanguages: 'en,es,fr',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, 'google_translate_element');
  }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>