Ngọc Thanh - 105
- 23/12/2024
Ngọc Thanh 
Web Mới hướng dẫn các bạn cách Tích hợp Google Translate vào Website, sẽ giúp cho website của bạn được tùy chọn chuyển qua bất kỳ ngôn ngữ nào, chi tiết như nào hãy cùng chúng tôi phân tích:
Tích hợp Google Translate vào Website
Mục Lục [Ẩn]
Tích hợp Google Translate vào Website là gì?
Tích hợp Google Translate vào Website là hình thức website chỉ có một ngôn ngữ và muốn dịch ngôn ngữ gốc ra nhiều ngôn ngữ khác trên khắp thế giới mà không cần làm gì nhiều, chỉ cần tích hợp nút Google Translate vào Website là dịch được toàn bộ website, bạn chỉ cần chọn ngôn ngữ cần chuyển.
Các thao tác để Tích hợp Google Translate vào Website
Đăng ký lấy mã Google Translate
Bạn phải đăng ký biểu mẫu của Google Translate.
Nhớ đăng nhập gmail của bạn trước, nhấn vào 2 nút chấp nhận chính sách Google Translate, sau đó nhấn Tiếp.
Bạn nhập URL của website cần tích hợp và gmail làm việc, ở đây mình nhập tên miền https://webmoi.vn/ và gmail webthuduc0705@gmail.com.
Ở đây sẽ có 2 bước:
Step 1: Determine the language code of your website pages.
Go to https://translate.google.com/, choose your site's language as the source language, then the "sl" parameter is the language code to be used.
For example, English language code is "en", and Japanese is "ja".
Họ kêu lấy mã ngôn ngữ của website gốc hiện tại để cập nhật vô nội dung đoạn mã lấy về, lát sau mình sẽ nói cách lấy.
Step 2: Copy the following code to the appropriate part of your site. Replace the language code 'en' with the one you get from step 1, if needed.
<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>
Bước 2 là copy đoạn mã cần lấy về để nhúng vô website, chính xác là lấy đoạn dưới này:
<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>
Để ngay vị trí cần gắn trên website, chổ {pageLanguage: 'en'} bạn tìm ngôn ngữ gốc của website đang dùng để thay thể vào chữ en, tốt nhất là kiểm tra code bằng cách nhấn ctrl U kiểm tra thẻ ngôn ngữ đang sử dụng.
Tùy vào website mà họ cấu hình thẻ ngôn ngữ trong thẻ html hoặc thẻ meta languages, website mình đang cấu hình trong thẻ html <html lang="vi-VN" >, mình sẽ lấy đoạn vi-VN thay vào chổ en ở trên.
<div id="google_translate_element"> </div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'vi-VN'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
Lưu ý: là phải lấy đúng ngôn ngữ mà web hiện tại cấu hình thì mới dịch hết toàn bộ trang được, nếu nhập không khớp với ngôn ngữ hiện tại thì chỉ dịch được sơ sài, chính xác là không dùng được. Tuy là ngôn ngữ tiếng việt nhưng có web cấu hình "vi-VN", nhưng có web lại cấu hình "vi", cho nên phải lấy khớp với web hiện tại.
Css lại nút Google Translate
Dưới đây là mình CSS lại nút Google Translate vì Google họ không có CSS.
#google_translate_element {
width: 100%;
padding: 0px 3px;
background: #57b952;
margin-top: 5px;
border-radius: 3px;
}
#google_translate_element select {
width: 100%;
height: 25px;
border: 1px solid #ddd;
}
Mình cho nút #google_translate_element có chiều rộng 100%, cho nên bạn phải có 1 div ngoài để quy định chiều rộng cho nguyên một nút, mình CSS lại nút Select cho dễ nhìn hơn, chỉ cần Css lại 2 chổ này là được
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Tích hợp Google Translate vào Website.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
