Thêm floating share box WordPress

3 giờ ago, WordPress Plugin, 1 Views

Thêm Floating Share Box WordPress: Hướng Dẫn Chi Tiết A-Z

Trong kỷ nguyên số, chia sẻ nội dung là yếu tố then chốt để lan tỏa thông tin và thu hút độc giả. Việc tích hợp các nút chia sẻ mạng xã hội vào website WordPress trở nên vô cùng quan trọng. Bài viết này sẽ hướng dẫn bạn cách thêm floating share box (hộp chia sẻ nổi) vào website WordPress một cách chi tiết, giúp độc giả dễ dàng chia sẻ nội dung của bạn lên các nền tảng mạng xã hội phổ biến.

Tại Sao Nên Sử Dụng Floating Share Box?

Floating share box là một thanh công cụ chứa các nút chia sẻ mạng xã hội, luôn hiển thị trên màn hình khi người dùng cuộn trang. Điều này mang lại nhiều lợi ích:

Tăng khả năng hiển thị: Luôn hiển thị, thu hút sự chú ý của người đọc.
Dễ dàng chia sẻ: Người đọc có thể chia sẻ nội dung bất kỳ lúc nào, không cần phải tìm kiếm các nút chia sẻ.
Cải thiện trải nghiệm người dùng: Tiện lợi, trực quan, giúp người dùng thao tác nhanh chóng.

Các Cách Thêm Floating Share Box Vào WordPress

Có nhiều cách để thêm floating share box vào website WordPress. Chúng ta sẽ xem xét các phương pháp phổ biến nhất:

Sử dụng plugin WordPress: Cách đơn giản và phổ biến nhất, phù hợp với người mới bắt đầu.
Thêm code thủ công: Yêu cầu kiến thức về HTML, CSS và JavaScript, nhưng cho phép tùy biến sâu hơn.
Sử dụng theme có tích hợp sẵn: Một số theme WordPress đã tích hợp sẵn tính năng floating share box.

Sử Dụng Plugin WordPress Để Thêm Floating Share Box

Đây là cách đơn giản và được khuyến nghị cho hầu hết người dùng. Có rất nhiều plugin WordPress miễn phí và trả phí cung cấp tính năng floating share box. Dưới đây là một số plugin phổ biến:

Social Warfare: Plugin mạnh mẽ với nhiều tùy chọn tùy chỉnh, hỗ trợ nhiều mạng xã hội và cung cấp các thống kê chi tiết.
Shared Counts: Plugin nhẹ nhàng, tập trung vào tốc độ tải trang, hiển thị số lượng chia sẻ một cách chính xác.
AddToAny Share Buttons: Plugin miễn phí, dễ sử dụng, hỗ trợ rất nhiều mạng xã hội và cung cấp các tùy chọn tùy chỉnh cơ bản.

Hướng Dẫn Cài Đặt và Cấu Hình Plugin Social Warfare

Cài đặt plugin: Trong trang quản trị WordPress, đi đến “Plugins” -> “Add New”. Tìm kiếm “Social Warfare” và cài đặt plugin. Sau khi cài đặt, kích hoạt plugin.
Cấu hình plugin: Sau khi kích hoạt, bạn sẽ thấy một menu mới “Social Warfare” trong trang quản trị. Truy cập vào menu này để cấu hình các tùy chọn.
Chọn mạng xã hội: Trong tab “Display”, chọn các mạng xã hội bạn muốn hiển thị trong floating share box.
Thiết lập vị trí: Chọn vị trí của floating share box (ví dụ: bên trái hoặc bên phải màn hình).
Tùy chỉnh giao diện: Tùy chỉnh màu sắc, biểu tượng và các thành phần khác để phù hợp với thiết kế website của bạn.
Lưu thay đổi: Sau khi hoàn tất cấu hình, hãy nhớ lưu lại các thay đổi.

Hướng Dẫn Cài Đặt và Cấu Hình Plugin Shared Counts

Cài đặt plugin: Tương tự như Social Warfare, tìm kiếm “Shared Counts” trong trang “Add New” và cài đặt plugin. Sau đó kích hoạt plugin.
Cấu hình plugin: Truy cập “Settings” -> “Shared Counts” trong trang quản trị.
Chọn mạng xã hội: Chọn các mạng xã hội bạn muốn hiển thị.
Thiết lập vị trí: Chọn vị trí của floating share box. Bạn có thể chọn hiển thị ở trên, dưới hoặc cả hai vị trí của bài viết.
Tùy chỉnh giao diện: Tùy chỉnh màu sắc và kích thước của các nút chia sẻ.
Lưu thay đổi: Lưu lại các thay đổi sau khi cấu hình.

Hướng Dẫn Cài Đặt và Cấu Hình Plugin AddToAny Share Buttons

Cài đặt plugin: Tìm kiếm “AddToAny Share Buttons” trong trang “Add New” và cài đặt plugin. Sau đó kích hoạt plugin.
Cấu hình plugin: Truy cập “Settings” -> “AddToAny” trong trang quản trị.
Chọn mạng xã hội: Thêm hoặc xóa các mạng xã hội bạn muốn hiển thị. Plugin này hỗ trợ rất nhiều mạng xã hội khác nhau.
Thiết lập vị trí: Chọn vị trí của floating share box. Bạn có thể chọn hiển thị ở trên, dưới hoặc cả hai vị trí của bài viết, hoặc sử dụng shortcode để hiển thị ở vị trí tùy chỉnh.
Tùy chỉnh giao diện: Tùy chỉnh kích thước, biểu tượng và các tùy chọn khác.
Lưu thay đổi: Lưu lại các thay đổi sau khi cấu hình.

Thêm Floating Share Box Bằng Code Thủ Công

Nếu bạn muốn tùy chỉnh sâu hơn và không muốn sử dụng plugin, bạn có thể thêm floating share box bằng code thủ công. Cách này đòi hỏi kiến thức về HTML, CSS và JavaScript.

Bước 1: Tạo HTML cho Floating Share Box

Tạo một file HTML chứa các nút chia sẻ mạng xã hội. Bạn có thể sử dụng các biểu tượng Font Awesome hoặc các thư viện biểu tượng khác.


 <div class="floating-share-box">
  <a href="#" class="share-button facebook"><i class="fab fa-facebook-f"></i></a>
  <a href="#" class="share-button twitter"><i class="fab fa-twitter"></i></a>
  <a href="#" class="share-button linkedin"><i class="fab fa-linkedin-in"></i></a>
  <a href="#" class="share-button pinterest"><i class="fab fa-pinterest"></i></a>
 </div>

Bước 2: Thêm CSS Để Định Dạng Floating Share Box

Sử dụng CSS để định dạng floating share box, đảm bảo nó hiển thị đúng vị trí và có giao diện phù hợp.


 .floating-share-box {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 999;
 }

 .share-button {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 20px;
  text-decoration: none;
 }

 .facebook { background-color: #3b5998; }
 .twitter { background-color: #1da1f2; }
 .linkedin { background-color: #0077b5; }
 .pinterest { background-color: #e60023; }

Bước 3: Thêm JavaScript Để Cập Nhật Liên Kết Chia Sẻ

Sử dụng JavaScript để cập nhật liên kết chia sẻ với URL và tiêu đề của trang hiện tại.


 <script>
  document.addEventListener('DOMContentLoaded', function() {
   var pageUrl = encodeURIComponent(document.URL);
   var pageTitle = encodeURIComponent(document.title);

   var facebookButton = document.querySelector('.facebook');
   facebookButton.href = 'https://www.facebook.com/sharer/sharer.php?u=' + pageUrl;

   var twitterButton = document.querySelector('.twitter');
   twitterButton.href = 'https://twitter.com/intent/tweet?url=' + pageUrl + '&text=' + pageTitle;

   var linkedinButton = document.querySelector('.linkedin');
   linkedinButton.href = 'https://www.linkedin.com/shareArticle?url=' + pageUrl + '&title=' + pageTitle;

   var pinterestButton = document.querySelector('.pinterest');
   pinterestButton.href = 'https://pinterest.com/pin/create/button/?url=' + pageUrl + '&description=' + pageTitle;
  });
 </script>

Bước 4: Thêm Code Vào Theme WordPress

Thêm code HTML, CSS và JavaScript vào theme WordPress của bạn. Bạn có thể thêm code vào file functions.php để thêm HTML và JavaScript, và thêm CSS vào file style.css hoặc tạo một file CSS riêng.

Sử Dụng Theme Tích Hợp Sẵn Floating Share Box

Một số theme WordPress đã tích hợp sẵn tính năng floating share box. Nếu bạn đang sử dụng một theme như vậy, bạn có thể dễ dàng kích hoạt và cấu hình floating share box trong cài đặt theme.

Kiểm tra tài liệu của theme bạn đang sử dụng để biết cách kích hoạt và cấu hình floating share box.

Lời Khuyên Khi Sử Dụng Floating Share Box

Chọn vị trí phù hợp: Vị trí của floating share box nên dễ thấy nhưng không gây cản trở cho người đọc.
Chọn các mạng xã hội phổ biến: Chọn các mạng xã hội mà độc giả của bạn thường xuyên sử dụng.
Đảm bảo tốc độ tải trang: Floating share box không nên làm chậm tốc độ tải trang của bạn.

Kết Luận

Thêm floating share box vào website WordPress là một cách hiệu quả để tăng khả năng chia sẻ nội dung và thu hút độc giả. Bạn có thể sử dụng plugin WordPress, thêm code thủ công hoặc sử dụng theme có tích hợp sẵn tính năng này. Hãy chọn phương pháp phù hợp với trình độ kỹ thuật và nhu cầu của bạn. Chúc bạn thành công!

floating share button, nút chia sẻ nổi, plugin chia sẻ wordpress, share box wordpress, tải plugin share

admin

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa