<h1>This is a demo of the web share button</h1>
<p>
Here is an image that you can <a class='web-share' href='https://placekitten.com/200/287'>share the URL</a>:
</p>
<p>
<img src="http://placekitten.com/200/287" alt="Place holder image">
</p>
body {
padding: 1em;
}
a.web-share {
background: yellow;
padding: .3em;
}
a.web-share:hover {
background: blue;
color: yellow;
}
View Compiled
let shareButtons = document.querySelectorAll("a.web-share");
for (button of shareButtons) {
button.addEventListener('click', function(e){
let href = this.getAttribute('href');
let alt = this.getAttribute('alt');
if (navigator.share) {
navigator.share({
title: alt,
url: href
});
e.preventDefault();
}
});
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.