Kullanıcının bulunduğu web sitesini paylaşmasına izin vermek, birçok haber sitesinde, blogda veya alışveriş sitesinde bulabileceğiniz yaygın bir web uygulamaları kalıbıdır. Bağlantı oluşturma web'in süper güçlerinden biri olduğundan, sosyal ağ sitelerinde paylaşılan bağlantıyı gören veya bağlantıyı sohbet mesajları ve hatta e-posta ile alan kullanıcılardan trafik elde etmeyi umut ediyoruz.
Modern yöntem
Web Share API'yi kullanma
Web Share API, kullanıcının bir başlık ve açıklayıcı metinle birlikte bulunduğu sayfanın URL'si gibi verileri paylaşmasına olanak tanır.
Web Share API'nin navigator.share() yöntemi, cihazın yerel paylaşım mekanizmasını çağırır. Bir vaat döndürür ve paylaşılacak verileri içeren tek bir bağımsız değişken alır. Olası değerler:
url: Paylaşılacak URL'yi temsil eden bir dize.text: Paylaşılacak metni temsil eden bir dize.title: Paylaşılacak bir başlığı temsil eden dize. Tarayıcı tarafından yok sayılabilir.
Klasik yöntem
Bir sosyal ağ sitesinin paylaşım amacını kullanma
Web Share API'yi henüz tüm tarayıcılar desteklememektedir. Yani bir yedek, hedef kitlenizin en popüler sosyal ağ siteleriyle entegre olur. Bunun popüler bir örneği olan Twitter, Web Amacı URL'si metin ve URL'nin paylaşılmasına olanak tanır. Yöntem genellikle bir URL oluşturup bunu bir tarayıcıda açmaktan oluşur.
Kullanıcı arayüzüyle ilgili dikkat edilmesi gereken noktalar
İşletim sistemi satıcılarının kullanıcı arayüzü yönergelerine göre, platformun yerleşik paylaşım simgesine saygı göstermek güzel bir dokunuştur.
- Windows:
- Apple:
- Android ve diğer işletim sistemleri:
Progresif geliştirme
Aşağıdaki snippet, desteklendiğinde Web Paylaşımı API'sini kullanır, ardından Twitter'ın Web Amacı URL'sine geri döner.
// 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');
});
Daha fazla bilgi
Demografi
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');
});