share-api-polyfill-cloudeight
Version:
This is a polyfill for the `Web Share API` that can be used in desktop too, so your users can share in their twitter, facebook, messenger, linkedin, sms, e-mail, print, telegram or whatsapp.
81 lines (71 loc) • 3.03 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="javascript, ecma, html, share, api, polyfill" />
<meta name="author" content="Felipe Nascimento de Moura">
<meta name="description" itemprop="description" content="A polyfill for the sharing that can be used in desktop too, so your users can shere in their twitter, facebook, messenger, linkedin, sms, e-mail, print, telegram or whatsapp."/>
<meta property="og:description" content="A polyfill for the sharing that can be used in desktop too, so your users can shere in their twitter, facebook, messenger, linkedin, sms, e-mail, print, telegram or whatsapp." />
<meta property="og:image" content="https://github.com/NascHQ/share-api-polyfill/blob/master/demo/share-api-screenshot.png?raw=true" />
<meta name="twitter:image:src" content="https://github.com/NascHQ/share-api-polyfill/blob/master/demo/share-api-screenshot.png?raw=true">
<meta name="twitter:image" content="https://github.com/NascHQ/share-api-polyfill/blob/master/demo/share-api-screenshot.png?raw=true">
<meta itemprop="image" content="https://github.com/NascHQ/share-api-polyfill/blob/master/demo/share-api-screenshot.png?raw=true">
<title>Demo for the web sharing api polyfill</title>
<style>
body {
background-color: #424242;
}
.the-share-button {
border: none;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 200px;
height: 40px;
background-color: #EEE;
color: #424242;
cursor: pointer;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<input type="button" value="Share it" class="the-share-button" onclick="shareTheLink()" />
<script src="https://unpkg.com/share-api-polyfill/dist/share-min.js"></script>
<!-- <script src="../dist/share-min.js"></script> -->
<script>
function shareTheLink () {
navigator.share({
title: 'Web Share API Polyfill',
text: 'A polyfill for the Share API. Use it to share in both desktops and mobile devices.',
url: location.href,
fbId: '136223956547034',
hashtags: ['javascript', 'shareAPI', 'Polyfill']
},
{
// change this configurations to hide specific unnecessary icons
copy: true,
email: true,
print: true,
sms: true,
messenger: true,
facebook: true,
whatsapp: true,
twitter: true,
linkedin: true,
telegram: true,
skype: true,
language: 'pt'
})
.then( _ => console.log('Yay, you shared it :)'))
.catch( error => console.log('Oh noh! You couldn\'t share it! :\'(\n', error));
}
</script>
</body>
</html>