Cách Dễ Nhất Để Thêm Facebook Chat vào Website WordPress
Trong hướng dẫn này, mình sẽ hướng dẫn bạn cách thêm tính năng Chat của Facebook trong WordPress với cả hai loại có plugin và không cần plugin.
Ngoài ra, chúng tôi sẽ cố gắng tối ưu hóa hộp trò chuyện Messenger của Facebook bằng cách trì hoãn JavaScript trò chuyện với khách hàng để đáp ứng các yêu cầu của Core Web Vitals.
Trong hướng dẫn này, bạn sẽ học cách:
- Chèn mã Messenger vào Theme: GeneratePress, Genesis, Astra.
- Sử dụng Flying Scripts để delay JS code.
- Sử dụng plugin WP Rocket delay JS code.
- Sử dụng Official Facebook Chat Plugin.
Thêm Facebook Chat vào WordPress bằng Plugin
Nếu bạn muốn có một giải pháp nhanh chóng và đơn giản để thêm hộp trò chuyện nhắn tin trực tiếp trong WordPress thì cài đặt plugin là cách dễ nhất.
- Đi tới Trang tổng quan của bạn.
- Đi tới Plugins> Add New.
- Tìm kiếm Official Facebook Chat Plugin.
- Cài đặt và kích hoạt plugin.
- Bây giờ, hãy chuyển đến menu Customer Chat có sẵn ngay bên dưới Cài đặt trong WordPress Backend.
- Bây giờ, hãy nhấp vào plugin Setup Chat. Nó sẽ được chuyển hướng đến Facebook.
- Đăng nhập vào tài khoản của bạn và chọn trang mong muốn và Thiết lập nó cho đến khi Hoàn tất.
- Bây giờ bạn sẽ có thể nhìn thấy Icon Chat của Facebook trên website của bạn.
Thêm Facebook Chat vào WordPress không cần plugin
Nếu bạn muốn thêm Chat box vào trang web WordPress mà không cần bất kỳ plugin nào thì việc thực hiện sẽ dễ dàng hơn.
Lưu ý: Ở đây, không có plugin nghĩa là không có Official Facebook Chat Plugin.
Trước khi thực hiện mọi thứ, bạn phải lấy mã Messenger Chat trước.
- Truy cập Trang Facebook của bạn.
- Bây giờ, đi tới Cài đặt Trang Facebook> Tùy chọn Nhắn tin.
- Bây giờ bạn có thể thấy Thêm Messenger vào trang web của mình.
- Nhấp vào Bắt đầu.
- Bây giờ nhấp vào Thiết lập, ở bước 3 sao chép mã.
- Tiếp theo, thiết lập mọi thứ theo nhu cầu của bạn bao gồm Tin nhắn chào mừng, Câu hỏi thường gặp…
- Bây giờ, hãy nhấp vào nút Xuất bản.
Đoạn Code sẽ tương tự như thế này:
<! – Messenger Chat Plugin Code – >
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v10.0'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<! – Chat Plugin code của bạn – >
<div class="fb-customerchat"
attribution="biz_inbox"
page_id="137563143590xxx">
</div>Bây giờ, bạn có thể dán đoạn code messenger của mình vào Footer(chân trang) của bạn.
Ngày nay, hầu hết các chủ đề đều cung cấp vị trí để chèn tập lệnh vào đầu trang, nội dung và chân trang. Nếu bạn đang sử dụng các loại chủ đề này thì bạn không cần phải dùng thêm plugin hỗ trợ.
Đối với Genesis Theme:
Đi tới hộp Dashboard > Genesis > Theme Settings > Footer scripts box và dán mã.
Đối với Astra Theme:
- Đối với người dùng Astra Pro, hãy chuyển đến tùy chọn Astra bên trong Appearance và Bật Custom Layouts Module
- Đi tới Appearance> Custom Layouts.
- Nhấp vào Add new và dán mã code của bạn.
- Bây giờ đi tới Custom Layout Settings.
- Ở Layout Chọn Hook và Action Chọn wp_footer.
- Tiếp theo Display On Chọn Entire Website.
- Nhấn nút Publish(Xuất bản).
Nếu chủ đề của bạn không có các tính năng có sẵn ở trên thì bạn có thể thêm plugin Insert Headers and Footers. Sau khi cài đặt và kích hoạt xong, đi tới Settings > Insert Headers and Footers. Đặt mã messenger trong phần Footer và nhấn Save.
Thêm Facebook Chat vào GeneratePress
Nếu bạn dùng GeneratePress WordPress Premium Theme thì việc chèn mã chatbox sẽ dễ dàng hơn.
Đầu tiên hãy kích hoạt mô-đun Elements, chuyển đến Appearance> GeneratePress và nhấp vào Kích hoạt đến mô-đun Elements.
Bây giờ, hãy làm theo quy trình đơn giản dưới đây.
Đi tới Appearance > Elements..
Nhấp vào Add Elements > Choose Element Type là Hook.
Bây giờ hãy dán mã Messenger vào hộp.
Bây giờ, Chọn Hook là wp_footer.
Trên Display Rules, Chọn Location là Entire Site.
OK, hãy nhấn nút Publish.
Lazy Load Facebook Chat vào WordPress
Bạn có đang tìm cách tối ưu hóa hộp thoại Facebook Messenger trong WordPress? Nếu có, thì có một số cách đơn giản để Lazy Load hộp thoại trò chuyện Facebook.
Về cơ bản, trì hoãn việc thực thi mã giúp đạt điểm cao trong Thông tin chi tiết về tốc độ trang của Google, tức là chúng ta có thể đáp ứng các yêu cầu đối với Core Web Vitals 2021 của Google.
Ở đây, tôi sẽ chia sẻ một số cách miễn phí và trả phí để làm được việc đó.
Dùng WP Rocket
Nếu bạn đang sử dụng plugin cache trả phí như WP Rocket thì rất dễ dàng delay JavaScript của Facebook Chat bằng cách sử dụng các tính năng có sẵn trong plugin.
WP Rocket đã có một danh sách các tập lệnh được sắp xếp để delay. Bạn chỉ cần kích hoạt tùy chọn Delay JavaScript Execution.
- Truy cập Trang tổng quan WordPress của bạn.
- Đi tới Settings > WP Rocket.
- Trong File Optimization > Delay JavaScript Execution
- Bật Tùy chọn bằng cách đánh dấu vào hộp.
- Kiểm tra xem xfbml.customerchat.js có được đặt trong hộp hay không.
- Nhấn Save Changes.
- Kiểm tra lại trang web của bạn và xác nhận các thay đổi.
Plugin Flying Scripts
Nếu bạn muốn có một giải pháp miễn phí để delay JavaScript của Facebook Chat thì bạn có thể sử dụng Plugin WordPress miễn phí Flying Scripts.
- Truy cập Trang tổng quan WordPress của bạn.
- Đi tới Plugins> Add New.
- Tìm kiếm Flying Scripts.
- Cài đặt và kích hoạt plugin.
- Đi tới Cài đặt> Nhấp vào Flying Scripts.
- Bây giờ, hãy bao gồm từ khóa customerchat.js để trì hoãn việc thực thi.
- Sau khi thiết lập, nhấn Save Changes.
- Kiểm tra tốc độ trang web của bạn để đảm bảo mọi thứ hoạt động.
Kết Luận
Hy vọng bây giờ bạn có thể thêm Chat box của Facebook vào trang web WordPress của bạn bằng cách sử dụng plugin và không cần plugin. Bạn có thể muốn xem bài hướng dẫn chi tiết của Mình về cách thêm Comment Facebook vào website WordPress chỉ với 4 bước đơn giản.
Nếu bạn có bất kỳ thắc mắc nào thì hãy bình luận bên dưới. Mình sẽ cố gắng trả lời nhanh nhất có thể.
