Thêm nút chat Zalo, Facebook, gọi điện thoại… cho website WordPress mà không cần dùng plugin.
Trong các bài viết trước đây, tôi đã từng hướng dẫn cho các bạn cách tích hợp Facebook Messenger, Zalo Chat, nút gọi điện thoại… vào website WordPress rồi phải không nào? Tuy nhiên, điểm hạn chế của việc tích hợp trực tiếp code của Facebook, Zalo… vào website là chúng ảnh hưởng nhiều tới tốc độ load web. Nếu bạn đang tìm kiếm một giải pháp đơn giản và nhẹ nhàng (không cần sử dụng plugin) để tích hợp nút chat Zalo, Facebook, gọi điện thoại… vào website thì đây chính là hướng dẫn dành cho bạn.
Tham khảo thêm:
- Tạo nút call now trong WordPress một cách dễ dàng
- Tích hợp Facebook Chat cho website không cần dùng plugin
- Hướng dẫn chèn Zalo Chat vào website WordPress
Thêm nút chat Zalo, Facebook, gọi điện cho WordPress
Trên thực tế, những nút này được tạo bằng HTML và CSS nên các bạn có thể thêm chúng vào bất cứ website nào, không riêng gì website WordPress.
1. Đầu tiên, download bộ icon tại đây và upload chúng lên website của bạn, copy lấy link hình ảnh.
2. Chèn đoạn code sau đây vào footer của theme mà bạn đang sử dụng. Nếu theme không hỗ trợ sẵn tính năng chèn code vào footer, các bạn có thể tham khảo bài viết “Chèn code vào header và footer của website WordPress“.
<div class="float-contact">
<div class="chat-zalo">
<a href="https://zalo.me/0123456789" target="_blank"><img title="Chat Zalo" src="https://wpcanban.com/zalo-icon.png" alt="zalo-icon" width="40" height="40" /></a>
</div>
<div class="chat-facebook">
<a href="https://m.me/wpcanban" target="_blank"><img title="Chat Facebook" src="https://wpcanban.com/facebook-icon.png" alt="facebook-icon" width="40" height="40" /></a>
</div>
<div class="call-hotline">
<a href="tel:0123456789"><img title="Call Hotline" src="https://wpcanban.com/phone-icon.png" alt="phone-icon" width="40" height="40" /></a>
</div>
</div>Trong đó:
- Thay
https://zalo.me/0123456789bằng link Zalo của bạn, với0123456789là số điện thoại đăng ký Zalo. - Thay
https://m.me/wpcanbanbằng link Facebook Messenger của bạn, vớiwpcanbanlà ID (copy trên link Facebook Profile hoặc Facebook Page). - Thay
0123456789trongtel:0123456789bằng số điện thoại của bạn. - Ngoài ra, thay link của các icon mà bạn đã copy ở bước 1 cho phù hợp.
3. Chèn đoạn code CSS sau đây vào file style.css của theme hoặc child theme mà bạn đang sử dụng. Các bạn cũng có thể thêm nó vào Appearance => Customize => Additional CSS để tránh code bị xóa mất khi update theme.
.float-contact {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo, .chat-facebook, .call-hotline {
display: block;
margin-bottom: 6px;
line-height: 0;
}Kết quả mà các bạn nhận được sẽ trông tương tự như thế này:
4. Nếu bạn muốn xoay ngang các nút chat Zalo, Facebook, gọi điện… trên giao diện mobile, hãy thêm tiếp đoạn code CSS sau:
@media (max-width: 480px) {
.chat-zalo, .chat-facebook, .call-hotline {
display: inline-block;
}
}Kết quả sẽ trông giống thế này:
Còn nếu muốn ẩn luôn chúng đi trên giao diện mobile nhìn cho gọn, hãy thay thế bằng code CSS sau:
@media (max-width: 480px) {
.float-contact {
display: none;
}
}Các bạn hoàn toàn có thể tùy biến code theo mẫu để thêm hoặc bớt các nút bấm theo nhu cầu sử dụng. Không quá phức tạp phải không nào? Chúc các bạn thành công!
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Làm sao để khoảng cách giữa các nút rộng ra trên giao diện mobile vậy ạ?
Ý bạn là rộng ra theo chiều ngang hay chiều dọc nhỉ? Nếu là chiều dọc thì sửa
0trong codeline-height: 0;thành giá trị mà bạn muốn. Còn nếu là chiều ngang thì thêm dòngmargin-right: 10px;vào, sửa10thành giá trị mà bạn muốn.Em muốn chỉnh chiều ngang. Em làm theo hướng dẫn của a chỉnh được r ạ. Cảm ơn anh.
Cảm ơn Hiếu đang cần dùng nó, mà cái này mình chỉ cho hiển thị trên 1 số bài viết thôi được không nhỉ
Nếu thế thì bạn cần kết hợp thêm plugin Header Footer Custom Html để chèn code nhé.
Bạn có làm đc cái dấu x để ẩn nó đi không nhỉ ? cái này nữa thì là tuyệt vời luôn !
Muốn làm thế thì cần phải có JS bạn ạ. Mà JS thì gây nặng web. Nếu bạn muốn làm có thể tham khảo hướng dẫn tại đây.
Mình thấy trên bài viết của một trang web, người ta bỏ nút chat zalo, chat facebook trong bài viết đó luôn. Bạn có thể hướng dẫn mình được không?
Cái đó thì bạn chỉ cần upload mấy cái icon Zalo, Facebook vào bài viết rồi chèn link đến website của Zalo, Facebook là được mà? Cần gì phải code cho nó nặng. :P
hiếu ơi cho mình xin code và css trên mobile kiểu biểu tượng: Trang chủ – gọi điện – zalo – chat fanpage và khi cuộn trang thì thanh ngang chứa các nút này mới hiện lên nhé. cảm ơn nhiều ( chỉ mobile thôi)
Bên mình không có sẵn code nào như vậy bạn nhé. Hướng dẫn rất lằng nhằng và mất thời gian. Bạn chịu khó lên Google tìm giúp mình nhé. :P
Thấy không cần thiết lắm, làm site load chậm thêm tý :( bữa viết bài đăng ký facebook rồi chèn thử plugin callbuttuon quick chat zalo thì thấy nặng
Xài plugin thì chả nặng? Mấy cái icon này tính ra tổng dung lượng chỉ khoảng 1.5KB nếu được nén bằng plugin và tạo định dạng ảnh WebP. :P
nhắc tới webP mới nhớ, lúc dầu còn chạy dc. sau này Gửi tối ưu hóa hình anh nó cứ hiện error: “Bạn có quá nhiều hình ảnh được yêu cầu, vui lòng thử lại sau vài phút.” :(
Mỗi tháng LiteSpeed Cache nó chỉ hỗ trợ nén nhanh miễn phí 10000 ảnh (bao gồm cả ảnh gốc + ảnh con). Nếu ông nén vượt quá thì phải chờ sang tháng khác. Xem trong Litespeed Cache => Dashboard => QUIC.cloud Service Usage Statistics => Image Optimization ấy.
nó đang ở USE QUICK QUEUE 0 of 10000. Nhưng vào Dashboard -> LiteSpeed Cache optimizes images thì gửi yêu cầu tối ưu thì nó báo lỗi “You have too many requested images, please try again in a few minutes.”
Nếu thế thì là do nhiều ảnh đã yêu cầu nhưng chưa nén xong.
anh ơi! sao em chèn đoạn css để hiện thị ngang trên mobile lại k được ạ.
Bạn chèn code CSS vào đâu trên website vậy?
e chèn vào chỗ mục tuỳ biến -> css bổ xung ạ
Chắc xung đột với code CSS nào đó trên web của bạn rồi. Bạn thử copy code bỏ vào trong file
style.csscủa theme xem được không.dạ. thanks a !
Muốn chuyển các nút sang bên phải thì chỉnh code sao vậy ạ?
Ở bước 3, dòng code số 4, bạn sửa
left: 20px;thànhright: 20px;là được nhé.Em muốn chuyển riêng nút chat-facebook sang bên phải làm thế nào anh nhỉ?
Bạn nhân bản code HTML lên thành 2 cái riêng biệt: 1 div
float-contact-left, 1 divfloat-contact-right. Trong divfloat-contact-leftthì xóa bỏ divchat-facebookđi. Trong divfloat-contact-rightthì xóa bỏ các divchat-zalovàcall-hotlineđi. Làm tương tự với CSS. Sau đó, với.float-contact-right, bạn sửa dòng số 4left: 20px;thànhright: 20px;là được.Em đã làm được rồi… Cảm ơn anh!
Xin hỏi muốn chuyển tất cả sang bên phải thì code như nào bạn nhỉ ?
Bạn sửa
left: 20px;thànhright: 20px;là được nhé.Cảm ơn bạn. Để mình áp dụng blog của mình
Đơn giản mà hay. Cảm ơn Hiếu!
Triển khai liền bạn ơi. :D