• Trang chủ
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Hosting và Domain
  • Kiếm tiền
  • Đánh giá
  • Khuyến mãi
  • Thông báo
  • Giới thiệu
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
  • Dịch vụ WordPress Hosting
  • Dịch vụ tối ưu WordPress
  • Dịch vụ quét mã độc WordPress
  • Mua Paradise child theme
Trang chủ » WordPress » Thủ thuật WordPress » Thêm nút chat Zalo, Facebook, gọi điện không cần dùng plugin
hosting-tot-nhat-danh-cho-wordpress

Thêm nút chat Zalo, Facebook, gọi điện không cần dùng plugin

Cập nhật: 29/06/2022 Trung Hiếu 33 Bình luận

Mục lục Hiện
  • 1. Thêm nút chat Zalo, Facebook, gọi điện cho WordPress

Thêm nút chat Zalo, Facebook, gọi điện thoại… cho website WordPress mà không cần dùng plugin.

them-nut-chat-zalo-facebook-goi-dien-khong-can-dung-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/0123456789 bằng link Zalo của bạn, với 0123456789 là số điện thoại đăng ký Zalo.
  • Thay https://m.me/wpcanban bằng link Facebook Messenger của bạn, với wpcanban là ID (copy trên link Facebook Profile hoặc Facebook Page).
  • Thay 0123456789 trong tel:0123456789 bằ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:

demo-nut-chat-zalo-facebook-goi-dien-tren-desktop

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:

demo-nut-chat-zalo-facebook-goi-dien-tren-mobile

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. :)

  • Chia sẻ lên Facebook
  • Chia sẻ lên Twitter
  • Chia sẻ lên LinkedIn

Bài viết liên quan

Sửa lỗi không hiện hình ảnh và mô tả khi share link lên Zalo
Sửa lỗi không hiện hình ảnh và mô tả khi share link lên Zalo
Tích hợp Facebook oEmbed và Instagram oEmbed cho WordPress
Tích hợp Facebook oEmbed và Instagram oEmbed cho WordPress
Khắc phục website bị Facebook chặn link
Khắc phục website bị Facebook chặn link

Chuyên mục: Thủ thuật WordPress Thẻ: Facebook/ Zalo

dich-vu-wordpress-hosting-chong-ddos-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Tôi là người sáng lập và đứng sau mọi hoạt động của WP Căn bản. Tìm hiểu thêm về tôi tại đây.

Bài viết trước « Sử dụng tính năng Email Routing của CloudFlare
Bài viết sau Tắt lựa chọn ngôn ngữ trong trang đăng nhập WordPress »

Reader Interactions

Bình luận

    Để lại một bình luận Hủy

    Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

  1. Vũ Hiền 3 bình luậnviết

    08/01/2025 lúc 23:10

    Cảm ơn bạn mình đã cài được cho web của mình. Trân trọng cảm ơn.

    Bình luận
« 1 2

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Tham gia cùng 10.000+ người khác.

Theo dõi qua mạng xã hội

Facebook Group

wpcanban-facebook-group

Bạn đang tìm gì?

WordPress căn bản

Bảo mật WordPress

Tăng tốc WordPress

Sửa lỗi WordPress

Thủ thuật Genesis

Thủ thuật SEO

Thủ thuật CloudFlare

Thủ thuật LiteSpeed

Thủ thuật WooCommerce

Sử dụng theme Paradise

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-wordpress-mien-phi

Dịch vụ quét mã độc miễn phí

dich-vu-quet-ma-doc-wordpress-mien-phi

Footer

Bài viết mới nhất

  • Năm 2025 rồi, có nên viết blog nữa không? 07/05/2025
  • Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản 16/04/2025
  • Tính năng Crawl Optimization của plugin Yoast SEO 31/03/2025
  • Vô hiệu hóa WooCommerce Brands để tăng tốc độ 09/03/2025

Bình luận mới nhất

  • Trung Hiếu trong Năm 2025 rồi, có nên viết blog nữa không?
  • Tuấn Kỷ Nguyên Blog trong Năm 2025 rồi, có nên viết blog nữa không?
  • Trung Hiếu trong Năm 2025 rồi, có nên viết blog nữa không?
  • Tịnh Nguyễn Blog trong Năm 2025 rồi, có nên viết blog nữa không?

Thông tin hữu ích

  • Giới thiệu bản thân
  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

9 Chuyên mục - 999 Bài viết - 35.502 Bình luận

Bản quyền © 2014 - 2025 · WP Căn bản (tiền thân là eBooksvn.com) · Sử dụng Paradise child theme và dịch vụ WordPress Hosting