Cách Thêm Hộp Thích Facebook / Hộp Người Hâm Mộ vào WordPress

Mục lục

Bạn có muốn thêm Facebook Like Box vào website WordPress của mình không?

Thêm Facebook Like Box vào website của bạn giúp khán giả dễ dàng thích và theo dõi trang Facebook của bạn. Càng có nhiều lượt thích, thương hiệu của bạn sẽ càng có uy tín và đáng tin cậy đối với người dùng mới.

Trong bài viết này, MuaHosting.com sẽ chỉ cho bạn cách thêm Facebook Like Box vào WordPress.

Cách thêm hộp thích Facebook hoặc hộp người hâm mộ vào WordPress

Tại sao nên thêm hộp thích Facebook vào website WordPress của bạn?

Việc thêm Facebook Like Box vào website WordPress của bạn có một số lợi ích tuyệt vời.

Đầu tiên, nó giúp thu hút mọi người bằng cách cho phép họ dễ dàng thích trang người hâm mộ hoặc trang doanh nghiệp trên Facebook của bạn. Điều này có nghĩa là bài đăng của bạn sẽ hiển thị trên nguồn cấp dữ liệu Facebook của họ, vì vậy bạn có thể tiếp tục tiếp cận mọi người ngoài website của mình.

Ngoài ra, Hộp Thích của trang Facebook cho biết có bao nhiêu người đã thích trang Facebook của bạn. Điều này có thể hoạt động như bằng chứng xã hội và khuyến khích nhiều người dùng nhấp vào ‘Thích’.

Hướng dẫn này sẽ chỉ cho bạn hai cách để thêm Facebook Like Box: một là sử dụng plugin xã hội và cách còn lại là sử dụng code. Bạn có thể sử dụng các link nhanh bên dưới để điều hướng qua bài viết của MuaHosting.com:

Phương pháp đầu tiên này là cách dễ nhất và được khuyến nghị cho người mới bắt đầu để thêm Facebook Like Box vào website của họ. Nó cũng sẽ cho phép bạn hiển thị nguồn cấp dữ liệu Facebook của mình trên website nếu bạn muốn.

Phương pháp này sử dụng Đập Bóng Bayđây là một plugin WordPress tối ưu với người dùng cho phép bạn nhúng nhiều nguồn cấp dữ liệu mạng xã hội khác nhau vào WordPress, cùng với Hộp thích.

Đối với hướng dẫn này, bạn có thể sử dụng plugin nguồn cấp dữ liệu Smash Balloon Social Post miễn phí. Nhưng nếu bạn muốn nhiều tính năng hơn ngoài Like Box (như hiển thị video, ảnh và sự kiện), thì MuaHosting.com khuyên bạn nên nâng cấp lên Phiên bản chuyên nghiệp.

Thiết lập Plugin Nguồn cấp dữ liệu Facebook Smash Balloon

Đầu tiên, bạn cần cài đặt plugin WordPress trong khu vực quản trị. Sau đó, hãy vào Nguồn cấp dữ liệu Facebook » Tất cả các nguồn cấp dữ liệu và nhấp vào ‘Thêm mới’.

Tạo một nguồn cấp dữ liệu Facebook mới trong plugin Smash Balloon miễn phí

Bây giờ, hãy chọn loại nguồn cấp dữ liệu ‘Dòng thời gian’.

Sau đó, chỉ cần nhấp vào nút ‘Tiếp theo’.

Chọn loại Nguồn cấp dữ liệu Facebook Dòng thời gian trong Smash Balloon

Ở giai đoạn này, bạn sẽ cần kết nối trang Facebook của mình với website WordPress.

Những gì bạn cần làm là nhấp vào nút ‘Thêm mới’.

Thêm nguồn Facebook Feed mới vào Smash Balloon

Smash Balloon sẽ chuyển hướng bạn đến một màn hình mới.

Tại đây, chỉ cần chọn ‘Trang’ cho loại nguồn rồi nhấp vào ‘Kết nối với Facebook’.

Kết nối Smash Balloon với Facebook

Bây giờ, bạn cần đăng nhập vào tài khoản Facebook của mình.

Sau đó, chọn trang nào bạn muốn hiển thị Hộp Thích trên blog hoặc website WordPress của mình. Sau đó, nhấp vào ‘Tiếp theo’.

Chọn Trang Facebook để sử dụng làm nguồn trong Smash Balloon

Bây giờ bạn sẽ thấy cài đặt quyền của Smash Balloon. Chúng tôi khuyên bạn nên bật tất cả để đảm bảo mọi thứ hoạt động tốt.

Bây giờ, hãy nhấp vào “Xong”.

Cài đặt quyền Smash Balloon khi kết nối với Facebook

Cửa sổ bật lên cuối cùng sẽ xác nhận rằng bạn đã link Smash Balloon với Facebook thành công.

Chỉ cần nhấp vào ‘OK’ để tiếp tục.

Xác nhận kết nối Smash Balloon và Facebook thành công

Smash Balloon hiện sẽ chuyển hướng bạn đến khu vực quản trị, nơi bạn phải chọn một trang Facebook để sử dụng trong nguồn cấp dữ liệu dòng thời gian của mình.

Chỉ cần chọn một trang và nhấp vào ‘Thêm’.

Chọn trang Facebook để sử dụng làm nguồn trong Smash Balloon

Bây giờ bạn sẽ thấy trang Facebook mà bạn vừa kết nối là một nguồn trong trang plugin Smash Balloon.

Chỉ cần chọn mục đó và nhấp vào ‘Tiếp theo’.

Chọn một trang Facebook để sử dụng làm nguồn cho Nguồn cấp dữ liệu Facebook Smash Balloon trong WordPress

Tùy chỉnh hộp thích của Facebook

Ở giai đoạn này, Smash Balloon sẽ đưa bạn đến trình chỉnh sửa nguồn cấp dữ liệu Facebook.

Bước đầu tiên là nhấp vào ‘Bố cục nguồn cấp dữ liệu’ phía trên option Bảng màu.

Chọn menu Bố cục nguồn cấp dữ liệu trong trình chỉnh sửa Nguồn cấp dữ liệu Facebook Smash Balloon

Chỉ cần cuộn xuống phần ‘Số bài đăng’.

Sau đó, đặt số cho cả Máy tính và Thiết bị di động là 0. Thao tác này sẽ xóa hiển thị tất cả các bài đăng gần đây của bạn và chỉ hiển thị Hộp thích trên nguồn cấp dữ liệu.

Ngoài ra, nếu bạn cũng muốn hiển thị nguồn cấp dữ liệu Facebook của mình cùng với Hộp thích, thì bạn có thể làm theo hướng dẫn của MuaHosting.com về cách tạo nguồn cấp dữ liệu Facebook custom trong WordPress.

Xóa toàn bộ hiển thị bài đăng trên Facebook trong Nguồn cấp dữ liệu Facebook Smash Balloon

Bây giờ, hãy quay trở lại.

Sau đó, nhấp vào ‘Tùy chỉnh’ để quay lại trang biên tập nguồn cấp dữ liệu.

Nhấp vào nút Tùy chỉnh trong Smash Balloon để quay lại trình chỉnh sửa Nguồn cấp dữ liệu Facebook chính

Ở giai đoạn này, bạn có thể xóa tiêu đề của nguồn cấp dữ liệu Facebook.

Những gì bạn cần làm là di chuyển xuống phần ‘Phần’ và chọn ‘Tiêu đề’.

Mở cài đặt phần Header trong Smash Balloon

Thiết lập Tiêu đề này sẽ quyết định tiêu đề nguồn cấp dữ liệu Facebook của bạn sẽ trông như thế nào.

Nhưng trong trường hợp này, bạn cần ẩn nó, vì vậy chỉ cần tắt nút chuyển ‘Bật’.

Vô hiệu hóa tiêu đề Nguồn cấp dữ liệu Facebook trong Smash Balloon

Bây giờ chúng ta hãy quay lại trang biên tập nguồn cấp dữ liệu chính và mở cài đặt ‘Hộp thích’. Sau đó, chỉ cần bật tính năng ‘Hộp thích’.

Trên trang này, bạn cũng có thể điều chỉnh kích thước, vị trí, hiển thị ảnh bìa, chiều rộng custom, văn bản kêu gọi hành động custom, v.v. của Hộp Thích.

Kích hoạt tính năng Facebook Like Box trong Smash Balloon

Sau khi hoàn tất, chỉ cần nhấn nút ‘Lưu’ ở góc trên bên phải.

Nhúng Facebook Like Box vào Trang WordPress hoặc Bài đăng của bạn

Ở giai đoạn này, bạn có thể hiển thị Facebook Like Box trên trang hoặc khu vực có sẵn tiện ích như sidebar.

Để thực hiện việc này, hãy nhấp vào ‘Nhúng’ ở góc trên bên phải. Bây giờ, popup Nhúng Nguồn cấp dữ liệu sẽ xuất hiện, cung cấp cho bạn hai option để hiển thị Hộp thích.

Một là sử dụng code ngắn, và cách còn lại là thêm trực tiếp vào trang hoặc vùng sẵn sàng cho tiện ích. Tùy chọn thứ hai dễ hơn nhiều, vì vậy MuaHosting.com sẽ chỉ cho bạn phương pháp đó trước.

Cửa sổ bật lên Nhúng Nguồn cấp dữ liệu cho Nguồn cấp dữ liệu Facebook trong Smash Balloon

Nếu bạn muốn thêm Hộp thích vào một trang cụ thể, hãy nhấp vào nút ‘Thêm vào trang’.

Bây giờ, chỉ cần chọn trang để thêm tính năng và nhấp vào ‘Thêm’.

Chọn trang để chèn Nguồn cấp dữ liệu Facebook vào Smash Balloon

Bây giờ bạn sẽ đến trình soạn thảo block Gutenberg.

Tiếp tục và nhấp vào nút ‘+ Thêm block’ theo hướng dẫn của Smash Balloon.

Nhấp vào nút Thêm block theo hướng dẫn của Smash Balloon trong trình chỉnh sửa block

Sau khi thư viện chèn block mở ra, bạn cần tìm block Facebook Feed.

Sau đó, chỉ cần kéo và thả nó vào bất cứ nơi nào trông đẹp nhất trên trang.

Tìm block Nguồn cấp dữ liệu Facebook của Smash Balloon trong trình chỉnh sửa block

Trong block, chọn nguồn cấp dữ liệu Facebook có Hộp thích mà bạn vừa tạo trước đó.

Sau đó, block này sẽ hiển thị Hộp Thích.

Chọn Nguồn cấp dữ liệu Facebook Smash Balloon để nhúng vào trình chỉnh sửa block

Nhưng nếu bạn có nhiều trang Facebook và thiết lập Hộp thích cho mỗi trang bằng Smash Balloon thì sao?

Bạn cũng có thể chuyển đổi giữa chúng trong sidebar cài đặt block bằng cách chọn nguồn cấp dữ liệu từ dropdown menu ‘Chọn nguồn cấp dữ liệu’.

Chuyển sang Nguồn cấp dữ liệu Facebook khác trong sidebar cài đặt block Smash Balloon bên trong trình chỉnh sửa block

Bây giờ tất cả những gì bạn cần làm là nhấp vào nút ‘Cập nhật’ để chính thức áp dụng thay đổi.

Đây là giao diện Hộp thích của MuaHosting.com trên website demo:

Một ví dụ về Facebook Like Box được tạo bằng Smash Balloon

Nếu bạn sử dụng theme WordPress dạng block, thì bạn cũng có thể sử dụng Trình chỉnh sửa toàn trang để thêm block Facebook Like Box vào mẫu trang của theme.

Để biết thêm thông tin về Trình chỉnh sửa toàn trang, hãy đọc hướng dẫn dành cho người mới bắt đầu về Trình chỉnh sửa toàn trang.

Nhúng Tiện ích Facebook Like Box vào WordPress

Nếu bạn sử dụng theme WordPress cổ điển, thì bạn có thể muốn hiển thị Facebook Like Box trong một khu vực có sẵn tiện ích, như sidebar, tiêu đề hoặc chân trang. Đây là một cách tuyệt vời để hiển thị Like Box mà không làm người dùng mất tập trung khỏi content chính trên trang.

Trong popup Nhúng nguồn cấp dữ liệu, chọn ‘Thêm vào tiện ích’ để chuyển đến trình chỉnh sửa tiện ích theo block.

Bây giờ, giống như phương pháp trước, chỉ cần nhấp vào nút ‘+ Thêm block’, tìm block Nguồn cấp dữ liệu Facebook và kéo vào khu vực bạn mong muốn.

Trên website demo của mình, MuaHosting.com muốn sử dụng Like Box làm tiện ích sidebar của WordPress.

Tìm tiện ích Smash Balloon Facebook Feed trong trình chỉnh sửa tiện ích

Trong block, chọn Nguồn cấp dữ liệu Facebook có Hộp thích mà bạn đã tạo trước đó.

Sau đó, nhấp vào ‘Cập nhật’ để áp dụng thay đổi.

Chọn Nguồn cấp dữ liệu Facebook Smash Balloon để nhúng vào trình chỉnh sửa tiện ích

Và bạn đã hoàn thành!

Sau đây là giao diện sidebar trên website thử nghiệm của MuaHosting.com với tiện ích Hộp thích:

Một ví dụ về giao diện của tiện ích Facebook Like Box trong sidebar

Nhúng Tiện ích Hộp Thích của Facebook bằng Mã ngắn

Nếu hai phương pháp trên không hiệu quả, MuaHosting.com khuyên bạn nên thêm Facebook Like Box hoặc Fan Box bằng code ngắn.

Chỉ cần sao chép code ngắn từ popup Nhúng nguồn cấp dữ liệu trước đó và thêm vào bất kỳ đâu trên website của bạn.

Sao chép code ngắn nhúng Nguồn cấp dữ liệu Facebook trong Smash Balloon

Để biết thêm thông tin về cách sử dụng code ngắn, bạn có thể đọc hướng dẫn của MuaHosting.com về cách thêm code ngắn vào WordPress.

Phương pháp 2: Thêm hộp Like Facebook bằng code

Nếu bạn chỉ quan tâm đến việc hiển thị Like Box mà không thêm bất kỳ loại nguồn cấp dữ liệu Facebook nào khác, thì việc sử dụng plugin trang Facebook có vẻ như là quá mức cần thiết. Trong trường hợp này, bạn có thể thêm Like Box bằng code thay thế.

Phương pháp này có vẻ đáng sợ đối với người mới bắt đầu, nhưng MuaHosting.com sẽ chỉ cho bạn một cách chắc chắn để chèn code bằng cách sử dụng Mã WP. Đây là plugin WordPress giúp bạn dễ dàng thêm đoạn code custom vào WordPress mà không làm hỏng website của bạn.

Đối với hướng dẫn này, phiên bản WPCode miễn phí là đủ, mặc dù bạn có thể nâng cấp lên phiên bản Pro để có các tính năng nâng cao như chế độ thử nghiệm và thư viện đoạn code dựa trên đám mây.

Đầu tiên, hãy cài đặt plugin trong WordPress. Sau khi plugin hoạt động, hãy vào Đoạn code » + Thêm đoạn code. Sau đó, chọn ‘Thêm code custom của bạn (Đoạn code mới)’ và nhấp vào ‘Sử dụng đoạn code’.

Thêm code custom vào WPCode

Bây giờ bạn sẽ đến trình soạn thảo code. Trước tiên, hãy đặt tên cho đoạn code custom của bạn để bạn có thể dễ dàng nhận dạng sau này. Đối với đoạn code này, chúng ta sẽ đặt tên là ‘Facebook JavaScript SDK’ vì đó là những gì chúng ta sẽ thêm vào đây.

Bây giờ, hãy giữ tab này mở và tạo một tab mới trên trình duyệt của bạn để đi đến Trang dành cho developer Facebook.

Trong menu, nhấp vào ‘Đăng nhập’ để đăng nhập vào tài khoản Facebook của bạn.

Đăng nhập vào trang Nhà phát triển Facebook

Nếu đây là lần đầu tiên bạn truy cập trang này, hãy hoàn tất trình hướng dẫn để tạo tài khoản miễn phí.

Sau đó, bạn sẽ được chuyển hướng đến dashboard Nhà phát triển của Facebook. Hãy nhấp vào nút ‘Tạo ứng dụng’.

Cách tạo ứng dụng Facebook mới

Ở trang tiếp theo, chỉ cần chọn ‘Khác’ cho trường hợp sử dụng.

Sau đó, nhấp vào nút ‘Tiếp theo’.

Chọn trường hợp sử dụng Facebook

Bây giờ, bạn sẽ thấy tất cả các ứng dụng khác nhau mà bạn có thể tạo cho trang Facebook của mình.

Để tạo Hộp thích, bạn chỉ cần chọn ‘Doanh nghiệp’ rồi nhấp vào ‘Tiếp theo’.

Tạo ứng dụng kinh doanh trên Facebook

Bây giờ hãy đặt tên cho ứng dụng của bạn. Bạn có thể đặt bất kỳ tên nào bạn thích vì đây chỉ là để tham khảo. Bạn cũng có thể nhập địa chỉ email và chọn Tài khoản doanh nghiệp option.

Cuối cùng, chỉ cần nhấp vào ‘Tạo ứng dụng’.

Tạo ứng dụng Facebook trong dashboard dành cho developer

Bây giờ chúng ta hãy đi đến Trang dành cho developer Facebook dành cho các plugin xã hội.

Sau đó, cuộn xuống cho đến khi bạn tìm thấy phần như trong ảnh chụp màn hình bên dưới:

Tại đây, hãy đảm bảo điền URL trang Facebook của bạn, để trống trường ‘Tab’ và chỉ định chiều rộng và chiều cao của Hộp Thích nếu cần.

Bạn cũng có thể chọn sử dụng tiêu đề nhỏ hơn, vô hiệu hóa ảnh bìa, v.v. Chúng tôi cũng đã chọn điều chỉnh Hộp thích cho phù hợp với chiều rộng của hộp chứa để kích thước sẽ điều chỉnh theo vị trí được đặt trên website.

Sau khi hoàn tất, hãy nhấp vào nút ‘Lấy code’. Sau đó, bạn sẽ thấy một popup hiển thị cho bạn hai loại đoạn code: JavaScript SDK và iFrame. Cả hai đều sẽ hiển thị Hộp thích của bạn, nhưng nhìn chung, JavaScript SDK là lựa chọn tốt hơn nhiều.

Mã JavaScript SDK để nhúng Facebook Like Box

JavaScript SDK thường nhanh hơn vì chúng được nhúng trực tiếp vào website, cho phép chúng tải như một phần của tài liệu chính. iFrame yêu cầu tải toàn bộ tài liệu HTML, điều này có thể làm chậm thời gian tải trang.

Trong tab JavaScript SDK, hãy đảm bảo tên ứng dụng bạn đã tạo trước đó đã được chọn.

Sau đó, hãy tiếp tục và sao chép code JavaScript SDK API từ Bước 2. Bây giờ, hãy giữ tab này mở nhưng chuyển sang tab WPCode và dán code vào đó.

Bạn có thể để Loại code là ‘Đoạn code HTML’.

Dán API JavaScript của Facebook vào WPCode

Bây giờ, hãy cuộn xuống phần ‘Chèn’.

Phương pháp chèn có thể được giữ nguyên là ‘Chèn tự động’, trong khi Vị trí nên được thay đổi thành ‘Toàn bộ website’.

Cuối cùng, chỉ cần kích hoạt code và nhấp vào ‘Lưu đoạn code’.

Chọn Tự động chèn và Site Wide Body cho cài đặt Chèn code trong WPCode

Tiếp theo, bạn sẽ tạo một đoạn code thứ hai. Bạn có thể làm theo các bước tương tự như trước và gọi nó là ‘Facebook Like Box’.

Sau đó, chuyển sang trang Facebook Developers dành cho các plugin xã hội ở trên và sao chép code từ Bước 3.

Điều hướng đến tab WPCode một lần nữa và dán code Bước 3 vào hộp Xem trước code. Loại code có thể là ‘HTML Snippet’.

Dán đoạn code custom Facebook Like Box vào WPCode

Chúng ta hãy cuộn xuống phần ‘Chèn’.

Nếu bạn sử dụng ‘Tự động chèn’, bạn có thể làm cho Hộp thích tự động xuất hiện ở nhiều nơi phù hợp với category Vị trí.

Trong ví dụ này, MuaHosting.com quyết định chọn vị trí ‘Site Wide Footer’, nghĩa là Hộp thích sẽ xuất hiện ở chân trang.

Ngoài ra còn có các option khác, như Chèn trước bài đăng, để hiển thị Hộp thích trước tất cả các bài đăng trên blog WordPress của bạn.

Chọn vị trí Side Wide Footer trong WPCode

Mặt khác, phương pháp ‘Shortcode’ cho phép bạn tạo một shortcode custom.

Sau đó, bạn có thể thêm nó vào các phần cụ thể của website bằng cách sử dụng block code ngắn.

Tạo code ngắn custom bằng WPCode

Sau khi cấu hình xong cài đặt Chèn, chỉ cần kích hoạt code và nhấp vào ‘Lưu đoạn code’.

Vậy là xong! Sau đó, bạn có thể truy cập website của mình để xem Like Box trông như thế nào:

Một ví dụ về Facebook Like Box được thêm vào với WPCode

Để biết thêm hướng dẫn về cách hiển thị nguồn cấp dữ liệu mạng xã hội trên trang WordPress của bạn, hãy xem bài viết của MuaHosting.com về cách thêm nguồn cấp dữ liệu mạng xã hội vào WordPress.

Chúng tôi hy vọng bài viết này đã giúp bạn biết cách thêm Facebook Like Box hoặc Fan Box vào WordPress. Bạn cũng có thể muốn xem qua bảng hướng dẫn mạng xã hội tối ưu và danh sách các plugin mạng xã hội tốt nhất cho WordPress.

Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi MuaHosting.com Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy MuaHosting.com trên TwitterFacebook.

5/5 - (128 bình chọn)
Facebook
Twitter
LinkedIn
Telegram
Email
Đội Ngũ Biên Tập
WordPress

Cách tạo và quản lý file Ads.txt trong WordPress

Bảo vệ website WordPress của bạn khỏi gian lận quảng cáo là rất quan trọng, nhưng không nhất thiết phải phức tạp. Tệp ads.txt là một công cụ đơn giản nhưng mạnh mẽ có thể bảo vệ doanh thu quảng cáo và danh tiếng của bạn. Chúng tôi đã tham

Đọc tiếp »