Hướng Dẫn Tạo Nút Chia Sẻ Mạng Xã Hội Trượt Dọc WordPress (2025)

Một trong những cách hiệu quả để tăng tương tác và khuyến khích độc giả lan tỏa nội dung của bạn là tạo nút mạng xã hội trượt dọc trong website. Thanh chia sẻ này luôn hiển thị khi người dùng cuộn trang, giúp họ dễ dàng chia sẻ bài viết hay lên Facebook, Twitter, LinkedIn… bất cứ lúc nào.

Trong bài viết này, dichvuthietkewebwordpress.com sẽ hướng dẫn bạn 2 phương pháp chi tiết: cách dễ dàng nhất bằng plugin và cách thủ công dành cho người dùng nâng cao.

Tại sao nên thêm nút chia sẻ trượt dọc vào website?

Trước khi đi vào hướng dẫn, hãy cùng xem xét những lợi ích mà thanh chia sẻ nổi (floating social share bar) mang lại:

• Cải thiện trải nghiệm người dùng (UX): Nút chia sẻ luôn trong tầm mắt, giúp người đọc hành động ngay khi họ cảm thấy nội dung hữu ích mà không cần cuộn lên đầu hay xuống cuối trang.
• Tăng lượt chia sẻ và traffic: Việc chia sẻ trở nên tiện lợi hơn, từ đó tăng khả năng bài viết của bạn được lan truyền trên các nền tảng mạng xã hội, kéo theo lượng truy cập mới.
• Tăng nhận diện thương hiệu: Khi nội dung được chia sẻ nhiều, thương hiệu của bạn cũng tiếp cận được nhiều người hơn.

Cách 1: Dùng Plugin (Khuyên dùng & Dễ nhất)

Đối với hầu hết người dùng WordPress, sử dụng plugin là phương pháp an toàn, nhanh chóng và hiệu quả nhất. Bạn không cần đụng đến code, tránh được rủi ro gây lỗi website và có nhiều tùy chọn nâng cao.

Một số plugin tạo nút chia sẻ mạng xã hội tốt nhất:

Hướng dẫn chi tiết với plugin Sassy Social Share

Chúng tôi sẽ lấy ví dụ với Sassy Social Share vì đây là plugin miễn phí mạnh mẽ và được yêu thích.

Checklist các bước thực hiện:

• [ ] Bước 1: Cài đặt và kích hoạt plugin

  • Tại trang quản trị WordPress, vào Plugins -> Add New.
  • Gõ “Sassy Social Share” vào ô tìm kiếm.
  • Nhấn Install Now và sau đó Activate.

• [ ] Bước 2: Cấu hình thanh chia sẻ trượt dọc

  • Sau khi kích hoạt, bạn sẽ thấy mục Sassy Social Share ở menu bên trái.
  • Chọn tab Floating Interface.
  • Tick vào ô Enable Floating Interface.

• [ ] Bước 3: Tùy chỉnh giao diện và vị trí

  • Trong cùng tab Floating Interface, bạn có thể tùy chỉnh:
    • Rearrange & Add/Remove Services: Kéo thả để sắp xếp hoặc thêm/bớt các icon mạng xã hội.
    • Shape and Size: Chọn hình dạng (tròn, vuông) và kích thước cho icon.
    • Position: Chọn vị trí hiển thị (trái hoặc phải màn hình).
  • Cuối cùng, kéo xuống và nhấn Save Changes.

Cách 2: Tạo nút chia sẻ bằng Code (Dành cho người dùng nâng cao)

⚠️ Cảnh báo: Phương pháp này yêu cầu kiến thức cơ bản về code và cách hoạt động của theme WordPress. Việc chỉnh sửa sai file functions.php có thể làm hỏng website của bạn. Hãy luôn sao lưu website trước khi thực hiện.

Phương pháp này sử dụng jQuery để tạo thanh chia sẻ trượt, phù hợp cho các trang web tin tức hoặc các website muốn kiểm soát hoàn toàn giao diện.

1. Tải và chuẩn bị các file cần thiết

Đầu tiên, bạn cần tải các file của plugin jQuery (thường bao gồm file .js và .css). Bạn có thể tìm các thư viện như “jQuery floating social share” trên GitHub hoặc sử dụng bộ code gốc của bài viết (nếu còn hoạt động).

Sau khi tải về, giải nén và upload các file vào thư mục theme bạn đang sử dụng (ví dụ: wp-content/themes/your-theme).

2. Sửa file script

Mở file fshare-script.js (hoặc tên tương tự) để cấu hình. Bạn sẽ thấy một đoạn code như sau:

$(document).ready(function () {
    $('#floating-bar').fshare({
        theme: 'default',
        speed: 200, // Tốc độ trượt
        facebook: true,
        twitter:  false,
        stumbleupon: false,
        linkedin: false,
        googleplus: true,
        upperLimitElementId: 'content', // ID của vùng nội dung chính
        lowerLimitElementId: 'colophon' // ID của vùng chân trang (footer)
    });
});

Giải thích:

• Đổi false thành true để hiện và ngược lại để ẩn nút mạng xã hội tương ứng.
• upperLimitElementId: ID của thành phần HTML mà thanh chia sẻ sẽ bắt đầu xuất hiện bên cạnh (thường là content hoặc main).
• lowerLimitElementId: ID của thành phần mà thanh chia sẻ sẽ dừng lại khi cuộn tới (thường là footer hoặc colophon).
• Để tìm ID, bạn có thể dùng công cụ Inspect Element (nhấn F12) trên trình duyệt.

3. Chèn script và CSS vào theme

Thêm đoạn code sau vào cuối file functions.php của theme:

// Making jQuery Google API
function modify_jquery() {
        if (!is_admin()) {
                wp_deregister_script('jquery');
                wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.1');
                wp_enqueue_script('jquery');
        }
}
add_action('init', 'modify_jquery');

// Float Social Share scripts
function float_social_share() {
    // Thay fshare.js và fshare.css bằng tên file chính xác của bạn
    wp_enqueue_script('float-social', get_template_directory_uri(). '/fshare.js', array('jquery'), true);
    wp_enqueue_style('float-social-style', get_template_directory_uri(). '/fshare.css', array(), null);
    // Thay fshare-script.js bằng tên file cấu hình của bạn
    wp_enqueue_script('float-social-script', get_template_directory_uri(). '/fshare-script.js', array('jquery'), true);
}
add_action( 'wp_enqueue_scripts', 'float_social_share' );

Tiếp theo, mở file header.php và chèn đoạn HTML này ngay sau thẻ <body>:

<div id="floating-bar"></div>

Cuối cùng, để tùy chỉnh thêm giao diện, bạn có thể thêm CSS vào file style.css của theme:

.fshare-default {
     background: #F1F1F1;
     margin-top: 10px;
     border: 1px solid #e8e8e8;
     padding: 5px;
     border-radius: 5px;
}

Câu hỏi thường gặp (FAQ)

1. Nút chia sẻ trượt dọc có làm chậm website không?

Nếu sử dụng plugin được tối ưu tốt (như Sassy Social Share, AddToAny) thì ảnh hưởng là không đáng kể. Tuy nhiên, nếu dùng code thủ công hoặc plugin kém chất lượng, nó có thể làm tăng thời gian tải trang. Luôn kiểm tra tốc độ website sau khi cài đặt.

2. Nên dùng plugin hay code thủ công?

• Nên dùng plugin: Nếu bạn là người mới, muốn sự tiện lợi, an toàn và nhiều tính năng.
• Nên dùng code: Nếu bạn là lập trình viên, muốn kiểm soát 100% giao diện và hành vi, đồng thời không muốn cài thêm plugin.

3. Tôi có thể dùng AI để tạo code này không?

Có. Bạn có thể yêu cầu các AI như ChatGPT hoặc Gemini tạo một đoạn code jQuery/JavaScript để làm thanh chia sẻ nổi. Ví dụ, bạn có thể dùng prompt: “Write a jQuery code snippet to create a floating social share bar on the left side of my website. It should include Facebook, Twitter, and LinkedIn share buttons.” Tuy nhiên, bạn vẫn cần biết cách tích hợp code đó vào theme WordPress một cách chính xác.

Lời kết

Việc tạo nút mạng xã hội trượt dọc là một thủ thuật nhỏ nhưng mang lại lợi ích lớn về tương tác và traffic. Với hướng dẫn trên, hy vọng bạn có thể dễ dàng áp dụng cho website của mình. Phương pháp sử dụng plugin được khuyến khích vì tính an toàn và đơn giản.

Nếu bạn cần thêm các mẹo và kiến thức website hữu ích khác, hãy thường xuyên ghé thăm chuyên mục Kiến thức của chúng tôi. Chúc bạn thành công!