تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

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

Thomas Steiner

إنّ السماح للمستخدم بمشاركة الموقع الإلكتروني الذي يتصفّحه هو نمط شائع في تطبيقات الويب، ويمكنك العثور عليه في العديد من المواقع الإخبارية أو المدوّنات أو مواقع التسوّق. بما أنّ الربط هو إحدى الميزات الأساسية للويب، نأمل في جذب زيارات من المستخدمين الذين يرون الرابط الذي تمت مشاركته على مواقع التواصل الاجتماعي، أو الذين يتلقّونه عبر رسائل المحادثة أو حتى عبر البريد الإلكتروني التقليدي.

الطريقة الحديثة

استخدام Web Share API

تتيح Web Share API للمستخدم مشاركة بيانات مثل عنوان URL للصفحة التي يتصفّحها، بالإضافة إلى عنوان ونص وصفي. تستدعي طريقة navigator.share() في Web Share API آلية المشاركة الأصلية للجهاز. تعرض هذه الطريقة وعدًا وتأخذ وسيطة واحدة تتضمّن البيانات المطلوب مشاركتها. القيم المحتمَلة هي:

url: سلسلة تمثّل عنوان URL المطلوب مشاركته
text: سلسلة تمثّل النص المطلوب مشاركته
title: سلسلة تمثّل العنوان المطلوب مشاركته قد يتجاهله المتصفّح.

Browser Support

Source

الطريقة الكلاسيكية

استخدام هدف المشاركة في أحد مواقع التواصل الاجتماعي

لا تتيح جميع المتصفّحات استخدام Web Share API بعد. لذلك، يمكنك استخدام حل بديل وهو التكامل مع مواقع التواصل الاجتماعي الأكثر شيوعًا لدى جمهورك المستهدَف. أحد الأمثلة الشائعة هو Twitter، الذي يتيح عنوان URL لـ Web Intent مشاركة نص وعنوان 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');
});

محتوى إضافي للقراءة

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

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