چگونه به کاربر اجازه دهیم وب سایتی را که در آن است به اشتراک بگذارد

توماس اشتاینر

اجازه دادن به کاربر به اشتراک گذاری وب سایتی که در آن است یک الگوی رایج برنامه های وب است که می توانید آن را در بسیاری از سایت های خبری، وبلاگ ها یا سایت های خرید پیدا کنید. از آنجایی که لینک‌سازی یکی از قدرت‌های فوق‌العاده وب است، امید به جذب ترافیک از کاربرانی است که پیوند اشتراک‌گذاری شده را در سایت‌های شبکه‌های اجتماعی می‌بینند، یا آن‌ها را از طریق پیام‌های چت یا حتی مدرسه قدیمی از طریق ایمیل دریافت می‌کنند.

روش مدرن

با استفاده از Web Share API

Web Share API به کاربر این امکان را می دهد که داده هایی مانند URL صفحه ای را که در آن قرار دارد، همراه با عنوان و متن توصیفی به اشتراک بگذارد. متد navigator.share() Web Share API مکانیسم اشتراک گذاری بومی دستگاه را فراخوانی می کند. یک وعده را برمی‌گرداند و یک آرگومان واحد با داده‌های به اشتراک گذاشته می‌شود. مقادیر ممکن عبارتند از:

  • url : رشته ای که نشان دهنده URL مورد نظر برای اشتراک گذاری است.
  • text : رشته ای که نشان دهنده متنی است که باید به اشتراک گذاشته شود.
  • title : رشته ای که عنوانی را برای اشتراک گذاری نشان می دهد. ممکن است توسط مرورگر نادیده گرفته شود.

پشتیبانی مرورگر

  • 89
  • 93
  • 12.1

منبع

روش کلاسیک

استفاده از هدف اشتراک گذاری یک سایت شبکه اجتماعی

هنوز همه مرورگرها از Web Share API پشتیبانی نمی کنند. بنابراین، یک بک گراند ادغام با محبوب ترین سایت های شبکه اجتماعی مخاطب هدف شما است. یک مثال محبوب توییتر است که آدرس وب هدف آن امکان به اشتراک گذاری یک متن و یک URL را می دهد. این روش معمولاً شامل ایجاد یک URL و باز کردن آن در یک مرورگر است.

ملاحظات UI

احترام گذاشتن به نماد اشتراک گذاری ایجاد شده پلتفرم طبق دستورالعمل های UI فروشندگان سیستم عامل بسیار خوب است.

  • پنجره ها:
  • سیب:
  • اندروید و سایر سیستم عامل ها:

افزایش پیشرونده

قطعه زیر در صورت پشتیبانی از 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');
});

بیشتر خواندن

نسخه ی نمایشی

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