ব্যবহারকারীদেরকে তারা যে ওয়েবসাইটে আছেন তা শেয়ার করতে সাহায্য করুন।

টমাস স্টেইনার

ব্যবহারকারীকে তার বর্তমান ওয়েবসাইটটি শেয়ার করার সুযোগ দেওয়া ওয়েব অ্যাপসের একটি প্রচলিত রীতি, যা অনেক সংবাদ সাইট, ব্লগ বা শপিং সাইটে দেখা যায়। যেহেতু লিঙ্কিং হলো ওয়েবের অন্যতম প্রধান শক্তি, তাই আশা করা হয় যে, সোশ্যাল নেটওয়ার্কিং সাইটে শেয়ার করা লিঙ্কটি দেখে, চ্যাট মেসেজে বা এমনকি সাধারণ ইমেইলের মাধ্যমেও ব্যবহারকারীরা ট্র্যাফিক পাবে।

ওয়েব শেয়ার এপিআই ব্যবহার করুন

ওয়েব শেয়ার এপিআই ব্যবহারকারীকে তার বর্তমান পেজের ইউআরএল, একটি শিরোনাম এবং বর্ণনামূলক টেক্সটের মতো ডেটা শেয়ার করার সুযোগ দেয়। ওয়েব শেয়ার এপিআই-এর navigator.share() মেথডটি ডিভাইসের শেয়ারিং মেকানিজমকে সক্রিয় করে। এটি একটি প্রমিজ রিটার্ন করে এবং শেয়ার করার জন্য ডেটা সহ একটিমাত্র আর্গুমেন্ট গ্রহণ করে। সম্ভাব্য মানগুলো হলো:

  • url : যে URL-টি শেয়ার করা হবে, তার একটি স্ট্রিং।
  • text : শেয়ার করার জন্য একটি স্ট্রিং।
  • title : শেয়ার করার জন্য একটি শিরোনাম। ব্রাউজার এটি উপেক্ষা করতে পারে।

Browser Support

  • ক্রোম: ১২৮।
  • প্রান্ত: ৯৩।
  • ফায়ারফক্স: একটি ফ্ল্যাগের আড়ালে।
  • সাফারি: ১২.১।

Source

একটি সামাজিক নেটওয়ার্কিং সাইটের শেয়ার ইন্টেন্ট ব্যবহার করুন

এখনও সব ব্রাউজার ওয়েব শেয়ার এপিআই সমর্থন করে না। তাই এর একটি বিকল্প উপায় হলো আপনার লক্ষ্য দর্শকদের সবচেয়ে জনপ্রিয় সোশ্যাল নেটওয়ার্কিং সাইটগুলোর সাথে সংযোগ স্থাপন করা। একটি জনপ্রিয় উদাহরণ হলো টুইটার, যার ওয়েব ইনটেন্ট ইউআরএল-এর মাধ্যমে একটি টেক্সট এবং একটি ইউআরএল শেয়ার করা যায়। এই পদ্ধতিতে সাধারণত একটি ইউআরএল তৈরি করে ব্রাউজারে সেটি খুলতে হয়।

UI বিবেচনা

অপারেটিং সিস্টেম সরবরাহকারীদের UI নির্দেশিকা অনুযায়ী প্ল্যাটফর্মের নির্ধারিত শেয়ার আইকনকে সম্মান করা একটি উত্তম রীতি।

    উইন্ডোজ আইকন

    অ্যাপল আইকন

    অ্যান্ড্রয়েড এবং অন্যান্য অপারেটিং সিস্টেম

প্রগতিশীল উন্নয়ন

কোড স্নিপেটটি সমর্থিত থাকলে ওয়েব শেয়ার এপিআই ব্যবহার করে, এবং এরপর টুইটার ওয়েব ইনটেন্ট ইউআরএল-এ ফিরে আসে।

// 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 isMac = navigator.platform.toLowerCase().includes('mac');

// Find out if the user is on a Windows device.
const isWin = navigator.platform.toLowerCase().includes('win');

// For Apple devices or Windows, use the platform-specific share icon.
icon.classList.add(`share${isMac? 'mac' : (isWin? '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.
  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');
});

ডেমো

এইচটিএমএল 

<!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>

সিএসএস 


        :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;
    background: #9c9c9c;
    padding: 12px;
    color:  #fff;
    border: 1px solid #9c9c9c;
    border-radius: 8px;
}

button .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: 1em;
}

button:hover {
  background: #5089d3ff;
}

@media (prefers-color-scheme: dark) {
  button .icon {
    filter: invert();
  }
}

.share {
  background-image: url('windows.svg');
  color: #fff;
}

.sharemac {
  background-image: url('mac.svg');
  color: #fff;
}

জেএস 


        // 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 isMac = navigator.platform.toLowerCase().includes('mac');

// Find out if the user is on a Windows device.
const isWin = navigator.platform.toLowerCase().includes('win');

// For Apple devices or Windows, use the platform-specific share icon.
icon.classList.add(`share${isMac? 'mac' : (isWin? '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.
  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');
});