Hướng dẫn tích hợp Google Translate vào Website

Google Translate có thể xem như là một API được hỗ trợ từ Google, Mã code nhúng cũng giống như Google Map, Google Translate được tạo ra và có thể được tích hợp vào website để dịch trang web đó sang thành nhiều thứ tiếng khác nhau dễ dàng và không mất nhiều thời gian.

Các bước để tích hợp Google Translate vào website

Bước 1: Xây dựng giao diện website

CODE HƯỚNG DẪN:

<div class="container">
    <h1>Hướng dẫn tích hợp Google Translate</h1>
 
    <p>Chọn ngôn ngữ muốn hiển thị!</p>
    <div id="translate_select"></div>
     
    <h2>Nội dung trang web</h2>
    <p>
        Nội dung cần dịch.
    </p>
</div>

Note: id=”translate_select” chèn vào nơi bạn muốn dịch trang website nhé.

Bước 2: Tiến hành tích hợp Google Translate vào website

Đầu tiên, bạn cần nhúng mã script của Google Translate vào header của website.

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

Tiếp đến bạn thêm đoạn mã script sau đây vào sau đoạn mã vừa rồi để kích hoạt mở hộp tuỳ chọn ngôn ngữ của google translate nhé.

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

Như vậy là xong việc tích hợp Google Translate vào website rồi nhé, thật đơn giản phải không nào, giờ chạy lên và xem thành quả nhé.

Lời kết

Qua hướng dẫn mình bạn có thế thêm Google Translate vào bất kỳ website nào nhé. Việc thêm Google Translate sẽ giúp bạn tiết kiệm rất nhiều thời gian cho việc code đa ngôn ngữ cho website.

Xem thêm: Hướng dẫn thiết kế website wordpress nhanh chóng