‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

Thomas Steiner

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

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

שימוש ב-Web Share API

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

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

Browser Support

Source

הדרך הקלאסית

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

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

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

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

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

שיפור הדרגתי

קטע הקוד שלמטה משתמש ב-Web Share API אם הוא נתמך, ואם לא, הוא חוזר לכתובת ה-URL של Web Intent של טוויטר.

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

קריאה נוספת

Web Share API

הדגמה (דמו)

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

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