איך לאפשר למשתמש לשתף את האתר שבו הוא נמצא

Thomas Steiner

האפשרות לאפשר למשתמש לשתף את האתר שבו הוא נמצא היא דפוס נפוץ של אפליקציות אינטרנט שניתן למצוא באתרי חדשות, בבלוגים או באתרי קניות רבים. מאחר שקישור הוא אחד מכוחות העל של האינטרנט, התקווה היא למשוך תנועה ממשתמשים שרואים את הקישור המשותף באתרי רשתות חברתיות, או שמקבלים אותו בהודעות צ'אט או אפילו דרך השירות הישן באימייל.

הדרך המודרנית

שימוש ב-Web Share API

ה-Web Share API מאפשר למשתמש לשתף נתונים כמו כתובת ה-URL של הדף שבו הוא נמצא, יחד עם כותרת וטקסט תיאורי. השיטה navigator.share() של Web Share API מפעילה את מנגנון השיתוף המקורי של המכשיר. היא מחזירה הבטחה ולוקחת ארגומנט יחיד עם הנתונים שיש לשתף. הערכים האפשריים הם:

  • url: מחרוזת שמייצגת את כתובת ה-URL שרוצים לשתף.
  • text: מחרוזת שמייצגת את הטקסט לשיתוף.
  • title: מחרוזת שמייצגת כותרת לשיתוף. ייתכן שהדפדפן יתעלם.

תמיכה בדפדפן

  • 89
  • 93
  • 12.1

מקור

הדרך הקלאסית

שימוש בכוונת שיתוף של אתר רשת חברתית

לא כל הדפדפנים עדיין תומכים ב-Web Share API. אפשרות אחרת היא לשלב את האתרים עם האתרים הפופולריים ביותר ברשתות החברתיות של קהל היעד שלך. דוגמה פופולרית היא Twitter, שכתובת ה-URL של כוונות האינטרנט שלו מאפשרת לשתף טקסט וכתובת URL. השיטה כוללת בדרך כלל יצירת כתובת URL ופתיחתה בדפדפן.

שיקולים בממשק המשתמש

מומלץ לכבד את סמל השיתוף הקיים של הפלטפורמה בהתאם להנחיות לגבי ממשק המשתמש של ספקי מערכות ההפעלה.

  • Windows:
  • Apple:
  • Android ומערכות הפעלה אחרות:

שיפור הדרגתי

קטע הקוד שלמטה משתמש ב-Web Share API אם יש בו תמיכה, ולאחר מכן הוא חוזר לכתובת ה-URL של Web Intent ב-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');
});

קריאה נוספת

הדגמה (דמו)

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');
});