Việc cho phép người dùng chia sẻ trang web mà họ đang truy cập là một mẫu ứng dụng web phổ biến mà bạn có thể tìm thấy trên nhiều trang web tin tức, blog hoặc trang web mua sắm. Vì việc liên kết là một trong những thế mạnh của web, nên hy vọng có thể thu hút lưu lượng truy cập từ những người dùng nhìn thấy đường liên kết được chia sẻ trên các trang web mạng xã hội, hoặc những người nhận được đường liên kết đó qua tin nhắn trò chuyện hay thậm chí là qua email.
Phong cách hiện đại
Sử dụng API Chia sẻ web
API Chia sẻ web cho phép người dùng chia sẻ dữ liệu như URL của trang họ đang truy cập, cùng với tiêu đề và văn bản mô tả.
Phương thức navigator.share() của API Chia sẻ web sẽ gọi cơ chế chia sẻ gốc của thiết bị. Phương thức này trả về một lời hứa và lấy một đối số duy nhất cùng với dữ liệu sẽ được chia sẻ. Các giá trị có thể là:
url: Chuỗi đại diện cho URL sẽ được chia sẻ.text: Chuỗi đại diện cho văn bản cần chia sẻ.title: Một chuỗi đại diện cho một tiêu đề cần chia sẻ. Có thể bị trình duyệt bỏ qua.
Cách cổ điển
Sử dụng mục đích chia sẻ của trang web mạng xã hội
Không phải trình duyệt nào cũng hỗ trợ Web Share API. Do đó, phương án dự phòng là tích hợp với các trang web mạng xã hội phổ biến nhất của đối tượng mục tiêu. Một ví dụ phổ biến là Twitter có URL ý định web cho phép chia sẻ văn bản và URL. Phương thức này thường bao gồm việc tạo một URL và mở URL đó trong trình duyệt.
Những điểm cần lưu ý về giao diện người dùng
Bạn nên tôn trọng biểu tượng chia sẻ đã thiết lập của nền tảng theo nguyên tắc giao diện người dùng của các nhà cung cấp hệ điều hành.
- Windows:
- Apple:
- Android và các hệ điều hành khác:
Cải tiến tăng dần
Đoạn mã dưới đây sử dụng API Chia sẻ web khi được hỗ trợ, sau đó quay lại URL mục đích web của Twitter.
// DOM references
const button = document.querySelector('button');
const icon = button.querySelector('.icon');
const canonical = document.querySelector('link[rel="canonical"]');
// Find out if the user is on a device made by Apple.
const IS_MAC = /Mac|iPhone/.test(navigator.platform);
// Find out if the user is on a Windows device.
const IS_WINDOWS = /Win/.test(navigator.platform);
// For Apple devices or Windows, use the platform-specific share icon.
icon.classList.add(`share${IS_MAC? 'mac' : (IS_WINDOWS? 'windows' : '')}`);
button.addEventListener('click', async () => {
// Title and text are identical, since the title may actually be ignored.
const title = document.title;
const text = document.title;
// Use the canonical URL, if it exists, else, the current location.
const url = canonical?.href || location.href;
// Feature detection to see if the Web Share API is supported.
if ('share' in navigator) {
try {
await navigator.share({
url,
text,
title,
});
return;
} catch (err) {
// If the user cancels, an `AbortError` is thrown.
if (err.name !== "AbortError") {
console.error(err.name, err.message);
}
}
}
// Fallback to use Twitter's Web Intent URL.
// (https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent)
const shareURL = new URL('https://twitter.com/intent/tweet');
const params = new URLSearchParams();
params.append('text', text);
params.append('url', url);
shareURL.search = params;
window.open(shareURL, '_blank', 'popup,noreferrer,noopener');
});
Tài liệu đọc thêm
Bản minh hoạ
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>How to let the user share the website they are on</title>
<link rel="stylesheet" href="style.css" />
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <script src="script.js" defer></script> -->
</head>
<body>
<h1>How to let the user share the website they are on</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at libero
eget ante congue molestie. Integer varius enim leo. Duis est nisi,
ullamcorper et posuere eu, mattis sed lorem. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. In at suscipit erat, et sollicitudin lorem.
</p>
<img src="https://placekitten.com/400/300" width=400 height=300>
<p>
In euismod ornare scelerisque. Nunc imperdiet augue ac porttitor
porttitor. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Curabitur eget pretium elit, et
interdum quam.
</p>
<hr />
<button type="button"><span class="icon"></span>Share</button>
</body>
</html>CSS
:root {
color-scheme: dark light;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
img,
video {
height: auto;
max-width: 100%;
}
button {
display: flex;
}
button .icon {
display: inline-block;
width: 1em;
height: 1em;
background-size: 1em;
}
@media (prefers-color-scheme: dark) {
button .icon {
filter: invert();
}
}
.share {
background-image: url('share.svg');
}
.sharemac {
background-image: url('sharemac.svg');
}
JS
// DOM references
const button = document.querySelector('button');
const icon = button.querySelector('.icon');
const canonical = document.querySelector('link[rel="canonical"]');
// Find out if the user is on a device made by Apple.
const IS_MAC = /Mac|iPhone/.test(navigator.platform);
// Find out if the user is on a Windows device.
const IS_WINDOWS = /Win/.test(navigator.platform);
// For Apple devices or Windows, use the platform-specific share icon.
icon.classList.add(`share${IS_MAC? 'mac' : (IS_WINDOWS? 'windows' : '')}`);
button.addEventListener('click', async () => {
// Title and text are identical, since the title may actually be ignored.
const title = document.title;
const text = document.title;
// Use the canonical URL, if it exists, else, the current location.
const url = canonical?.href || location.href;
// Feature detection to see if the Web Share API is supported.
if ('share' in navigator) {
try {
await navigator.share({
url,
text,
title,
});
return;
} catch (err) {
// If the user cancels, an `AbortError` is thrown.
if (err.name !== "AbortError") {
console.error(err.name, err.message);
}
}
}
// Fallback to use Twitter's Web Intent URL.
// (https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent)
const shareURL = new URL('https://twitter.com/intent/tweet');
const params = new URLSearchParams();
params.append('text', text);
params.append('url', url);
shareURL.search = params;
window.open(shareURL, '_blank', 'popup,noreferrer,noopener');
});