<h1 class="entry-title">Web Share API with fallback</h1>
<div class="content">
  <p>View this pen with Chrome on Android to see Web Share API in action.</p>
</div>

<div class="share">
  <div id="sharethis" class="share-btn web-share">Share</div>
  <div id="sharefallback" class="share-buttons">
    <a class="share-btn fb" href="https://facebook.com/sharer/sharer.php?u=https://pakin.me/blog/create-share-button-with-web-share-api/" target="_blank">Share</a>
    <a class="share-btn tw" href="https://twitter.com/intent/tweet/?text=Web+Share+API+with+fallback&url=https://pakin.me/blog/create-share-button-with-web-share-api/&via=pknme" target="_blank">Tweet</a>
    <a class="share-btn gp" href="https://plus.google.com/share?url=https://pakin.me/blog/create-share-button-with-web-share-api/" target="_blank">+1</a>
    <a class="share-btn ln" href="https://lineit.line.me/share/ui?url=https%3A%2F%2Fpakin.me%2Fblog%2Fcreate-share-button-with-web-share-api%2F" target="_blank">LINE it!</a>
  </div>
</div>
html {
  box-sizing: border-box;
}

*, ::after, ::before {
  box-sizing: inherit;
}

body {
  font-family: system-ui, sans-serif;
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
}

.share {
  margin: 2em 0;
}

.share-buttons {
  display: none;
  justify-content: space-between;
}

.share-btn {
  display: inline-block;
  padding: 8px 20px;
  background: #00ad45;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  flex-grow: 1;
  text-align: center;
}

.share-btn:hover {
  opacity: .85;
  color: #fff;
}

.share-btn.web-share {
  cursor: pointer;
  width: 100%;
}

.share-btn.tw {
  background: #1da1f2;
}

.share-btn.fb {
  background: #3b5998;
  margin: 0 8px;
}
  
.share-btn.gp {
  background: #dd4b39;
  margin: 0 8px;
}

.share-btn-.ln {
  background: #00c300;
}
/**
 *
 * สร้างปุ่มแชร์ด้วย Web Share API
 * https://pakin.me/blog/create-share-button-with-web-share-api/
 *
 */

var shareBtn = document.getElementById('sharethis');
    shareFallback = document.getElementById('sharefallback');
    pageTitle = document.querySelector('h1.entry-title').textContent;
    pageUrl = "https://pakin.me/blog/create-share-button-with-web-share-api/";

shareBtn.addEventListener("click", function(ev) {
  if (navigator.share) {
    navigator.share({
        title: pageTitle,
        url: pageUrl
      });
  } else {
    shareFallback.style.display = 'flex';
    shareBtn.style.display = 'none';
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.