كيفية السماح للمستخدم بمشاركة الموقع الإلكتروني الذي يتصفّحه

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