Web Share API is not working when button is clicked

Question

I am trying to use the web share API in order to allow users to share the links of article URLs. I want it to be that when a user clicks on the "Share Article" button, the user receives multiple social media and apps that they can share to and when they select the preferred app it sends the URL that I have provided. Im not sure what the issue is, I run the website on GitHub pages but I don't believe that is the issue. Any suggestions or solutions? I will add the code below.

HTML

        <article class="blog__card">
            <div class="blog__image">
                <img src="/assets/img/1in4collegestudents.webp" alt="1 in 4 college students has an STI… We need to do something" class="blog__img">
                <a href="/articles/1-in-4-college-students-has-an-STI…-We-need-to-do-something...html" class="blog__button">
                    <i class='bx bx-right-arrow-alt'></i>
                </a>
            </div>

            <div class="blog__data">
                <h2 class="blog__title">
                    1 in 4 college students has an STI… We need to do something.
                </h2>
                <p class="blog__description">
                    1 in 4 college students has an STI. An extremely alarming statistic that is being ignored. Are you protected? Learn the facts about STIs, prevention tips, and Safe Choice's revolutionary plan.
                </p>

                

                <div class="blog__footer">
                    
                    <div class="blog__reaction-share">
                        <a href="/articles/1-in-4-college-students-has-an-STI…-We-need-to-do-something...html"><button class="aboutus-button"><span>Read Article</span></button></a>
                        <a><button class="aboutus-button" id="share-button2"><span>Share Article</span></button></a>

                    </div>

                </div>
            </div>
        </article>




        <article class="blog__card">
            <div class="blog__image">
                <img src="/articles/img/article banner/Sexually transmitted diseases are highest in the LGBTQ community.webp" alt="Blog article about us 3" class="blog__img">
                <a href="/articles/Sexually transmitted diseases are highest in the LGBTQ community.html" class="blog__button">
                    <i class='bx bx-right-arrow-alt'></i>
                </a>
            </div>

            <div class="blog__data">
                <h2 class="blog__title">
                    Sexually transmitted diseases are highest in the LGBTQ community
                </h2>
                <p class="blog__description">
                    The LGBTQ community is at risk for sexually transmitted diseases. Read about the shocking statistics regarding STD prevalence in the LGBTQ community and how Safe Choice is making sex safer for everyone.
                </p>

                

                <div class="blog__footer">
                    
                    <div class="blog__reaction-share">
                        <a href="/articles/Sexually transmitted diseases are highest in the LGBTQ community.html"><button class="aboutus-button"><span>Read Article</span></button></a>
                        <a><button class="aboutus-button" id="share-button3"><span>Share Article</span></button></a>

                    </div>

                </div>
            </div>
        </article>

Javascript

    // Add event listeners to each share button
    var shareButton2 = document.getElementById('share-button2');
    shareButton2.addEventListener('click', function() {
      // Share the link for the 1 in 4 college students article
      var urlToShare = 'https://safechoiceusa.com/articles/1-in-4-college-students-has-an-STI-We-need-to-do-something...html';
      var title = '1 in 4 college students has an STI… We need to do something.';
      shareLink(urlToShare, title);
    });

    var shareButton3 = document.getElementById('share-button3');
    shareButton3.addEventListener('click', function() {
      // Share the link for the STDs in the LGBTQ community article
      var urlToShare = 'https://safechoiceusa.com/articles/Sexually%20transmitted%20diseases%20are%20highest%20in%20the%20LGBTQ%20community.html';
      var title = 'Sexually transmitted diseases are highest in the LGBTQ community';
      shareLink(urlToShare, title);
    });

    function shareLink(urlToShare, title) {
      // Use the Web Share API (if it's available) to share the link
      if (navigator.share) {
        navigator.share({
          title: title,
          url: urlToShare
        })
          .then(function() {
            console.log('Thanks for sharing!');
          })
          .catch(function(error) {
            console.log('Error sharing:', error);
          });
      } else {
        // If the Web Share API is not available, fall back to a URL-based approach
        var shareUrl = 'https://twitter.com/share?url=' + encodeURIComponent(urlToShare);
        window.open(shareUrl, '_blank');
      }
    }

Answer 1

It work's just fine for me: https://shotor.github.io/web-share-api/

Make sure you run it in a browser that supports it: https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API#api.navigator.share

In my case, it doesn't work on desktop chrome/firefox. But works fine on android chrome.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Share API</title>
  </head>
  <body>
    <button
      class="share-button"
      data-share-title="Web Share API @ MDN"
      data-share-url="https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API"
    >
      Share MDN
    </button>

    <button
      class="share-button"
      data-share-title="Web Share API @ Google"
      data-share-url="https://web.dev/web-share/"
    >
      Share Google
    </button>

    <script>
      document.querySelectorAll('.share-button').forEach((button) => {
        button.addEventListener('click', async () => {
          const title = button.getAttribute('data-share-title')
          const url = button.getAttribute('data-share-url')

          if (navigator.share) {
            await navigator.share({
              title,
              url,
            })
            console.log('Thanks for sharing!')
            return
          }

          const shareUrl = `https://twitter.com/share?url=${encodeURIComponent(
            url
          )}`
          window.open(shareUrl, '_blank')
        })
      })
    </script>
  </body>
</html>