Chia sẻ

Bạn có thể bấm vào nút trên để xem demo nhé. Tính năng chia sẻ tích hợp sẵn giúp người dùng gửi liên kết bài viết qua các ứng dụng như Zalo, Messenger, Email, hoặc mạng xã hội chỉ với một thao tác.

Lợi ích khi dùng navigator.share

Web Share API là một phần của tiêu chuẩn HTML5 hiện đại, cho phép website gọi hộp thoại chia sẻ tích hợp của trình duyệt hoặc hệ điều hành. Đây là những lợi ích chính:

• Giao diện chia sẻ tích hợp sẵn của hệ điều hành (iOS, Android, Windows)
• Không cần tích hợp SDK từ các mạng xã hội
• Hỗ trợ chia sẻ tiêu đề, mô tả và liên kết bài viết
• Trải nghiệm người dùng liền mạch, gọn nhẹ, thân thiện

HTML

Bạn có thể gọi hộp thoại chia sẻ liên kết bằng bất kỳ phần tử HTML nào. Ví dụ:

<button id="nav-share-btn">Chia sẻ</button>

JavaScript

Đây là đoạn mã thuần JavaScript để xử lý hành vi chia sẻ:

document.getElementById('nav-share-btn').addEventListener('click', function (e) {
    e.preventDefault();
    if (navigator.share) {
        navigator.share({
            title: 'Init HTML',
            text: 'Chia sẻ kiến thức thiết kế, lập trình web, server, dự án web...',
            url: 'https://inithtml.com/'
        }).catch((error) => console.log('Lỗi khi chia sẻ:', error));
    } else {
        alert('Trình duyệt không hỗ trợ tính năng chia sẻ.');
    }
});

Lưu ý

• Chỉ hoạt động trên HTTPS: Web Share API yêu cầu website phải được bảo mật SSL
• Hỗ trợ tốt trên thiết bị di động: Android (Chrome, Edge, Brave, Samsung Internet), iOS (Safari)
• Chưa hỗ trợ đầy đủ trên desktop: Một số trình duyệt như Chrome desktop có thể hoạt động, nhưng không đảm bảo

Demo và Ứng dụng thực tế

Tính năng này cực kỳ hữu ích trong nhiều tình huống:

• Chia sẻ bài viết blog đến bạn bè qua Zalo, Facebook, Telegram, v.v.
• Chia sẻ sự kiện, mã giảm giá, bài học hoặc bài viết tài liệu
• Dễ dàng tích hợp vào các nút nổi, popup hoặc call-to-action trên mobile

Chúc bạn triển khai thành công! Việc tích hợp navigator.share sẽ giúp trang web thân thiện hơn với người dùng di động, đồng thời nâng cao khả năng chia sẻ tự nhiên trên mạng xã hội.