Kullanıcıların bulundukları web sitesini paylaşmalarına yardımcı olun

Thomas Steiner

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 uygulaması modelidir. Bağlantı oluşturma, web'in süper güçlerinden biri olduğundan sosyal ağ sitelerinde paylaşılan bağlantıyı gören veya sohbet mesajlarında, hatta e-postayla alan kullanıcılardan trafik elde etmeyi umuyoruz.

Web Share API'yi kullanma

Web Share API, kullanıcının bulunduğu sayfanın URL'si gibi verileri başlık ve açıklayıcı metinle birlikte paylaşmasına olanak tanır. Web Share API'nin navigator.share() yöntemi, cihazın paylaşım mekanizmasını çağırır. Bir söz 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 yoksayılabilir.

Browser Support

  • Chrome: 128.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 12.1.

Source

Sosyal ağ sitesinin paylaşım niyetini kullanma

Web Share API henüz tüm tarayıcılar tarafından desteklenmemektedir. Bu nedenle, hedef kitlenizin en popüler sosyal ağ siteleriyle entegrasyon yapmanız gerekir. Popüler bir örnek olan Twitter'ın Web Intent URL'si, metin ve URL paylaşımına olanak tanır. Bu yöntem genellikle bir URL oluşturup tarayıcıda açmaktan ibarettir.

Kullanıcı arayüzüyle ilgili dikkat edilmesi gereken noktalar

Platformun, işletim sistemi sağlayıcılarının kullanıcı arayüzü yönergelerine uygun olarak oluşturduğu paylaşım simgesine uymak en iyi uygulamadır.

    Windows simgesi

    Apple simgesi

    Android ve diğer işletim sistemleri

Progresif geliştirme

Snippet, desteklendiğinde Web Share API'yi kullanır, ardından Twitter Web Intent 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 isMac = navigator.platform.toLowerCase().includes('mac');

// Find out if the user is on a Windows device.
const isWin = navigator.platform.toLowerCase().includes('win');

// For Apple devices or Windows, use the platform-specific share icon.
icon.classList.add(`share${isMac? 'mac' : (isWin? '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.
  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');
});

Demo

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;
    background: #9c9c9c;
    padding: 12px;
    color:  #fff;
    border: 1px solid #9c9c9c;
    border-radius: 8px;
}

button .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: 1em;
}

button:hover {
  background: #5089d3ff;
}

@media (prefers-color-scheme: dark) {
  button .icon {
    filter: invert();
  }
}

.share {
  background-image: url('windows.svg');
  color: #fff;
}

.sharemac {
  background-image: url('mac.svg');
  color: #fff;
}

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 isMac = navigator.platform.toLowerCase().includes('mac');

// Find out if the user is on a Windows device.
const isWin = navigator.platform.toLowerCase().includes('win');

// For Apple devices or Windows, use the platform-specific share icon.
icon.classList.add(`share${isMac? 'mac' : (isWin? '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.
  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');
});