SHARE: Cool Share Button, Uses Native Share UI if Available

HTML: This can easily be customized to whatever. Note that we're using bootstrap 5 icons here, can easily be font awesome or whatever.

<div id="share-btn" class="prod-resources__link" role="button">
	<span class="bi bi-share"></span> Share
	<span id="feedback" class="feedback" hidden>Copied!</span>
</div>

JS: This is the important part. It copies the URL if the share UI is not available. If share UI is available (based on browser and device) it brings up a share dialog. Note that we're using bootstrap 5 icons here, but that bit can easily be changed to font awesome or whatever.

<mvt:comment>
#
# standalone sharing script- brings up the share dialog of the device/browser supports it, otherwise the url is copied
#
</mvt:comment>
<script>
const shareBtn = document.getElementById('share-btn');
const feedback = document.getElementById('feedback');
const shareData = {
  title: document.title,
  text: document.querySelector('meta[name="description"]')?.content || '',
  url: window.location.href
};
const canShare = !!navigator.share;
// Set button label based on capability
shareBtn.innerHTML = canShare ? '<span class="bi bi-share"></span> Share' : '<span class="bi bi-share"></span> Copy Link';
shareBtn.addEventListener('click', async () => {
  if (canShare) {
	try {
	  await navigator.share(shareData);
	} catch (err) {
	  // User cancelled or share failed — do nothing
	}
  } else {
	try {
	  await navigator.clipboard.writeText(shareData.url);
	  showFeedback();
	} catch (err) {
	  fallbackCopy(shareData.url);
	  showFeedback();
	}
  }
});
function showFeedback() {
  feedback.hidden = false;
  setTimeout(() => {
	feedback.hidden = true;
  }, 2000);
}
function fallbackCopy(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}
</script>