Khung bình luận Facebook (Facebook Comments Plugin) là công cụ tuyệt vời giúp tăng tương tác cho website WordPress. Tuy nhiên, nhiều quản trị viên web thường gặp tình trạng khung bình luận đột nhiên bị thu hẹp chiều rộng, co rúm lại một góc hoặc mất tính năng tự động tràn màn hình (Responsive).
Bài viết này ThanhDatMMO sẽ hướng dẫn bạn cách xử lý triệt để lỗi này chỉ trong 1 phút.
🔍 Nguyên Nhân Khung Bình Luận Facebook Bị Lỗi Chiều Rộng
Lỗi này thường xảy ra do hai nguyên nhân chính:
- Thuộc tính
data-width: Cấu hình plugin hoặc đoạn mã nhúng cài đặt chiều rộng cố định (ví dụ: 500px) thay vì tự động (100%). - Xung đột CSS: Giao diện (Theme) mới cập nhật hoặc các plugin tối ưu hóa bộ nhớ đệm (Cache) làm thay đổi thuộc tính hiển thị của thẻ iframe Facebook.
🛠️ 2 Bước Sửa Lỗi Khung Bình Luận Facebook Bị Thu Hẹp
Bước 1: Thay đổi thuộc tính chiều rộng thành 100%
Nếu bạn chèn khung bình luận bằng code tay, hãy tìm đến đoạn mã nhúng HTML của Facebook và sửa lại thuộc tính
data-width.- Mã lỗi thường gặp:
data-width="500px"hoặcdata-width="" - Mã chuẩn cần sửa:
data-width="100%"
Nếu bạn dùng Plugin (như Lazy Social Comments, WpDevArt Facebook Comments), hãy vào phần cài đặt của plugin đó và nhập giá trị chiều rộng là
100%.Bước 2: Thêm đoạn code CSS sửa lỗi triệt để
Nếu đã đổi sang
100% nhưng khung bình luận vẫn bị bóp nghẹt, đó là do CSS của giao diện ép iframe dừng lại. Bạn hãy ép nó tràn ra bằng cách:- Truy cập vào Trình quản lý WordPress (Dashboard).
- Chọn Giao diện (Appearance) -> Tùy biến (Customize) -> CSS bổ sung (Additional CSS).
- Copy và dán đoạn mã dưới đây vào:
css
/* Sửa lỗi responsive khung bình luận Facebook - ThanhDatMMO */
.fb-comments, .fb-comments span, .fb-comments iframe[style] {
width: 100% !important;
}
Hãy thận trọng khi sử dụng mã.
- Nhấn Đăng (Publish) và xóa cache website để kiểm tra kết quả.
💡 Lưu Ý Quan Trọng Khi Sử Dụng Tiện Ích Facebook
Để tránh các lỗi hiển thị hoặc mất bình luận trên website, bạn cần lưu ý:
- Luôn cập nhật chính xác Facebook App ID trong cấu hình.
- Kiểm tra hiển thị trên cả thiết bị di động (Mobile) và máy tính (Desktop).
- Sử dụng các plugin hỗ trợ bản quyền để tránh mã độc làm rò rỉ dữ liệu website.
🛒 Cần Phần Mềm Bản Quyền & Tài Khoản Hỗ Trợ Kỹ Thuật? Đến Ngay ThanhDatMMO!
Nếu bạn đang tối ưu website, làm MMO hoặc xây dựng hệ thống tài nguyên mà thiếu các công cụ hỗ trợ, hãy tham khảo kho sản phẩm của chúng tôi. ThanhDatMMO (Thành lập từ 2019) chuyên cung cấp:
- Tài khoản Game: Xbox, Steam, Battle.net giá hot nhất thị trường.
- Phần mềm bản quyền: Đa dạng tiện ích, key kích hoạt ứng dụng văn phòng, đồ họa, hệ điều hành.
- Giao hàng tức thì: Hệ thống gửi thông tin tài khoản qua email ngay sau khi thanh toán thành công.
📞 Thông Tin Liên Hệ Hỗ Trợ 24/7/365
Đội ngũ kỹ thuật của chúng tôi luôn sẵn sàng giải đáp mọi thắc mắc của bạn:
- Công ty: ThanhDatMMO.,Co LTD
- Địa chỉ: P.2704 – CT1 – Nam Xa La – Hà Đông – Hà Nội.
- Hotline / Zalo: 0795 995 222
- Telegram: @thanhdatmmo68
- Fanpage: fb.com
- Email: [email protected]
Có thể bạn nên xem:
-
Plugin bán chạy: Yoast SEO Premium
Ngày đăng:15/11/2019Đây là bản Premium của công cụ tối ưu SEO On Page phổ biến nhất hiện nay Yoast SEO. Hiện có 5.000.000 tải và kích hoạt, có thể nói là một SEO plugin được yêu thích nhất hiện nay. Với phiên bản này bạn sẽ được bổ sung thêm các tích như: Redirect manager – Quản lý và tự …
90,000đXem chi tiết -
Porto | Responsive WordPress + eCommerce Theme (Có Key)
Ngày đăng:15/11/2019Lưu ý: Mình chỉ cung cấp key cho Gold MemberShip hoặc khách mua lẻ thôi nhé (trừ gói silver).
200,000đXem chi tiết
Xem thêm:
- Sửa lỗi khung bình luận Facebook trên website WordPress đột nhiên bị thu hẹp chiều rộng
- Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome
- Cảnh giác web dính virut khi khôi phục xong không gỡ plugin Duplicator
- Code chèn Hotline và chat Facebook vào chân trang trên giao diện mobile cho website
- Hướng dẫn chèn Breadcrumbs cho website WordPress sử dụng plugin Yoast Seo







