如何在網頁上新增 Google 翻譯按鈕?


我們可以透過使用 Google 翻譯 API 在我們的網頁上新增 Google 翻譯按鈕。我們需要建立一個呼叫 API 並將按鈕新增到我們網頁的指令碼。新增後,使用者將能夠將我們的網頁翻譯成他們喜歡的語言。

以下是如何使用 Google 翻譯 API 將 Google 翻譯按鈕新增到您的網頁的示例:

  • 要建立新專案,請點選選擇專案,然後將顯示以下部分:

  • 建立專案後,導航到“API 和服務”部分,然後點選“啟用 API 和服務”。

  • 搜尋“Google 翻譯 API”併為您的專案啟用它。

  • 轉到“憑據”部分並建立一個新的 API 金鑰。

  • 複製 API 金鑰並將其新增到以下程式碼片段中,將“YOUR_API_KEY”替換為您實際的金鑰:

<!DOCTYPE html>
<html>
<head>
   <title>Google Translate Button</title>
</head>
<body>
   <div id="google_translate_element"></div>
   <script type="text/javascript">
      function googleTranslateElementInit() {
         new google.translate.TranslateElement({
            pageLanguage: 'en', layout: 
            google.translate.TranslateElement.InlineLayout.HORIZONTAL, autoDisplay: 
            false, includedLanguages: 'fr,de,es', gaTrack: true, gaId: 'YOUR_API_KEY'
            }, 'google_translate_element');
      }
   </script>
   <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>

現在,將程式碼貼上到您希望按鈕出現在網頁的 HTML 中。

您可以自定義程式碼以選擇您希望作為翻譯選項提供的語言以及按鈕的佈局。

儲存更改並重新整理網頁以檢視 Google 翻譯按鈕。測試按鈕以確保其正常工作,並且按預期翻譯網頁。如有必要,更新程式碼以反映您網站或語言的任何更改。

注意:由於 API 是付費服務,您將根據您的使用情況付費。

輸出

配置 API_KEY 後,按鈕將新增到您的網頁。

更新於: 2023 年 2 月 9 日

12K+ 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.