Thêm floating share box WordPress

6 tháng ago, WordPress Plugin, Views
Thêm floating share box WordPress

Giới Thiệu Về Floating Share Box WordPress

Trong thế giới trực tuyến ngày nay, việc chia sẻ nội dung là một yếu tố quan trọng để tăng cường sự lan tỏa và tiếp cận của trang web. Một trong những cách hiệu quả để khuyến khích người đọc chia sẻ nội dung của bạn là sử dụng Floating Share Box (Hộp Chia Sẻ Nổi). Floating Share Box là một thanh chia sẻ nhỏ gọn, luôn hiển thị trên màn hình khi người dùng cuộn trang, giúp họ dễ dàng chia sẻ bài viết của bạn lên các mạng xã hội khác nhau.

Bài viết này sẽ hướng dẫn chi tiết cách thêm Floating Share Box vào trang web WordPress của bạn, từ việc sử dụng plugin đến cách tự tùy chỉnh mã nguồn.

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

Việc sử dụng Floating Share Box mang lại nhiều lợi ích cho trang web của bạn, bao gồm:

  • Tăng khả năng chia sẻ nội dung: Floating Share Box luôn hiển thị, giúp người đọc dễ dàng chia sẻ bài viết của bạn chỉ với một cú nhấp chuột.
  • Cải thiện trải nghiệm người dùng: Thanh chia sẻ nổi không gây cản trở cho việc đọc nội dung, mà còn giúp người dùng dễ dàng tìm thấy các tùy chọn chia sẻ.
  • Tăng lưu lượng truy cập: Khi người đọc chia sẻ bài viết của bạn, nó sẽ tiếp cận được nhiều người hơn, từ đó tăng lưu lượng truy cập cho trang web.
  • Nâng cao độ nhận diện thương hiệu: Việc chia sẻ nội dung trên mạng xã hội giúp lan tỏa thương hiệu của bạn đến nhiều người hơn.

Các Phương Pháp Thêm Floating Share Box Vào WordPress

Có hai phương pháp chính để thêm Floating Share Box vào trang web WordPress của bạn:

  • Sử dụng plugin WordPress
  • Tự tùy chỉnh mã nguồn

Chúng ta sẽ đi sâu vào từng phương pháp trong các phần tiếp theo.

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

Đây là phương pháp đơn giản và phổ biến nhất. Có rất nhiều plugin WordPress miễn phí và trả phí cung cấp tính năng Floating Share Box. Một số plugin phổ biến bao gồm:

  • Social Warfare
  • Shared Counts
  • AddtoAny Share Buttons
  • Sumo
  • Easy Social Share Buttons for WordPress

Trong hướng dẫn này, chúng ta sẽ sử dụng plugin AddtoAny Share Buttons, vì nó miễn phí, dễ sử dụng và có nhiều tùy chọn tùy chỉnh.

Cài Đặt và Kích Hoạt Plugin AddtoAny Share Buttons

Để cài đặt plugin AddtoAny Share Buttons, hãy làm theo các bước sau:

  1. Đăng nhập vào trang quản trị WordPress của bạn.
  2. Chọn Plugins > Add New.
  3. Tìm kiếm “AddtoAny Share Buttons”.
  4. Nhấp vào nút Install Now.
  5. Sau khi cài đặt xong, nhấp vào nút Activate.

Cấu Hình Plugin AddtoAny Share Buttons

Sau khi kích hoạt plugin, bạn sẽ thấy một mục mới có tên là AddtoAny trong menu WordPress của bạn. Để cấu hình plugin, hãy làm theo các bước sau:

  1. Chọn AddtoAny từ menu WordPress.
  2. Trong tab Standard, bạn có thể chọn các nút chia sẻ bạn muốn hiển thị. Kéo và thả các nút vào vị trí mong muốn.
  3. Trong tab Floating, bạn có thể bật/tắt Floating Share Box.
  4. Tùy chỉnh vị trí của Floating Share Box bằng cách chọn Placement (trái, phải).
  5. Điều chỉnh khoảng cách từ trên xuống (Offset from Top) và từ dưới lên (Offset from Bottom).
  6. Chọn các nút chia sẻ bạn muốn hiển thị trong Floating Share Box.
  7. Nhấp vào nút Save Changes để lưu các thiết lập.

Sau khi cấu hình xong, hãy truy cập trang web của bạn để kiểm tra Floating Share Box. Bạn có thể điều chỉnh các thiết lập để phù hợp với giao diện và nhu cầu của trang web.

Tự Tùy Chỉnh Mã Nguồn để Thêm Floating Share Box

Nếu bạn là một nhà phát triển hoặc muốn có nhiều quyền kiểm soát hơn đối với Floating Share Box, bạn có thể tự tùy chỉnh mã nguồn để thêm tính năng này vào trang web WordPress của bạn. Phương pháp này đòi hỏi kiến thức về HTML, CSS và PHP.

Tạo File CSS cho Floating Share Box

Trước tiên, bạn cần tạo một file CSS để định dạng Floating Share Box. Bạn có thể đặt tên file là floating-share.css và lưu vào thư mục theme của bạn.

Dưới đây là một ví dụ về nội dung của file floating-share.css:

    .floating-share {
      position: fixed;
      top: 50%;
      left: 20px; /* Điều chỉnh vị trí bên trái */
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      z-index: 999;
    }

    .floating-share a {
      display: block;
      margin-bottom: 5px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #3b5998; /* Màu nền mặc định cho Facebook */
      text-align: center;
      line-height: 40px;
      color: white;
      font-size: 20px;
      text-decoration: none;
    }

    .floating-share a:hover {
      opacity: 0.8;
    }

    /* Tùy chỉnh màu sắc cho từng mạng xã hội */
    .floating-share a.facebook {
      background-color: #3b5998;
    }

    .floating-share a.twitter {
      background-color: #1da1f2;
    }

    .floating-share a.linkedin {
      background-color: #0077b5;
    }

    .floating-share a.pinterest {
      background-color: #e60023;
    }

Thêm Mã HTML vào Theme

Tiếp theo, bạn cần thêm mã HTML vào theme của bạn để tạo Floating Share Box. Bạn có thể thêm mã này vào file single.php (cho bài viết) hoặc page.php (cho trang).

Dưới đây là một ví dụ về mã HTML:

    <div class="floating-share">
      <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" class="facebook" target="_blank"><i class="fab fa-facebook-f"></i></a>
      <a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?&text=<?php the_title(); ?>" class="twitter" target="_blank"><i class="fab fa-twitter"></i></a>
      <a href="https://www.linkedin.com/shareArticle?url=<?php the_permalink(); ?&title=<?php the_title(); ?>" class="linkedin" target="_blank"><i class="fab fa-linkedin-in"></i></a>
      <a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) ); ?>&description=<?php the_title(); ?>" class="pinterest" target="_blank"><i class="fab fa-pinterest"></i></a>
    </div>

Lưu ý: Đoạn mã trên sử dụng Font Awesome để hiển thị các biểu tượng mạng xã hội. Bạn cần đảm bảo rằng Font Awesome đã được cài đặt và kích hoạt trên trang web của bạn.

Thêm Mã CSS vào Header

Cuối cùng, bạn cần thêm liên kết đến file CSS vào header của trang web của bạn. Bạn có thể thêm mã này vào file header.php của theme.

    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/floating-share.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="SHA512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Lưu Ý Quan Trọng Khi Tùy Chỉnh Mã Nguồn

Khi tùy chỉnh mã nguồn, hãy nhớ những điều sau:

  • Sao lưu theme của bạn trước khi thực hiện bất kỳ thay đổi nào.
  • Sử dụng theme con để tránh mất các thay đổi khi theme chính được cập nhật.
  • Kiểm tra kỹ mã nguồn trước khi lưu để tránh gây ra lỗi cho trang web.

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

Để Floating Share Box hoạt động hiệu quả, hãy xem xét các lời khuyên sau:

  • Chọn các nút chia sẻ phù hợp: Hãy chọn các mạng xã hội phổ biến và phù hợp với đối tượng mục tiêu của bạn.
  • Đặt vị trí phù hợp: Vị trí của Floating Share Box phải dễ thấy nhưng không gây cản trở cho việc đọc nội dung.
  • Tùy chỉnh giao diện: Hãy tùy chỉnh giao diện của Floating Share Box để phù hợp với giao diện chung của trang web.
  • Kiểm tra hiệu quả: Theo dõi số lượng chia sẻ để đánh giá hiệu quả của Floating Share Box và điều chỉnh khi cần thiết.

Kết Luận

Floating Share Box là một công cụ hữu ích để tăng khả năng chia sẻ nội dung và thu hút lưu lượng truy cập cho trang web WordPress của bạn. Bạn có thể dễ dàng thêm Floating Share Box bằng cách sử dụng plugin hoặc tự tùy chỉnh mã nguồn. 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!

Related Topics by Tag
, , , ,

..