Tạo hộp thoại chia sẻ liên kết của hệ thống với JavaScript

14/09/2024 0 21 2 phút đọc Demo

Bạn đang tìm cách thêm tính năng chia sẻ liên kết nhanh gọn, không cần tạo riêng từng nút mạng xã hội? JavaScript đã có sẵn API để bạn thực hiện điều đó chỉ với vài dòng code. Đây là cách để kích hoạt hộp thoại chia sẻ mặc định của trình duyệt hoặc hệ điều hành, hỗ trợ tốt trên thiết bị di động.

Tạo hộp thoại chia sẻ liên kết của hệ thống với JavaScript

Mục lục

Lợi ích khi dùng navigator.share
HTML
JavaScript
Lưu ý
Demo và Ứng dụng thực tế

Chia sẻ

Bạn có thể bấm vào nút trên để xem demo nhé.

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

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ẻ nội dung, tiêu đề và liên kết
Rất gọn nhẹ, thân thiện UX

HTML

Bạn có thể gọi hộp thoại chia sẻ liên kết bằng bất kì thẻ nào, ví dụ.

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

JavaScript

Đơn giản như sau.

$('#nav-share-btn').click(function() {
    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/'
    });
});