I worked a little with chatGPT and arrived to this solution that authorize native sharing on small devices and keeps the three main social networks on bigger devices without native sharing
Code:
<div class="mb-2 fw-bold">
Partager cet article
</div>
<div class="mb-5" data-share="device facebook twitter linkedin" data-share-label="Share on" data-share-device="Share using device sharing"></div>
<script>
function Share(element) {
const options = element.dataset.share.split(' ');
const shareIndex = options.findIndex(option => {
return option === 'device'
});
let isMobileDevice = window.matchMedia("(max-width: 767px)").matches;
function handleMatchMedia(mql) {
isMobileDevice = mql.matches;
}
const mediaQueryList = window.matchMedia("(max-width: 767px)");
mediaQueryList.addEventListener('change', handleMatchMedia);
if (shareIndex > -1 && !isMobileDevice) {
options.splice(shareIndex, 1);
}
if (shareIndex > -1 && isMobileDevice && 'share' in window.navigator) {
const shareButton = h('button', {
'aria-label': `${element.dataset.shareDevice}`,
'data-share-item': ''
}, [h('i')]);
shareButton.addEventListener('click', () => {
navigator.share({
title: document.title,
url: location.href
}).catch(() => {
return
});
})
element.appendChild(shareButton);
} else {
options.forEach(option => {
const shareLink = h('a', {
'aria-label': `${element.dataset.shareLabel} ${option}`,
'data-share-item': option,
href: option === 'facebook' ? 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(location.href) : option === 'linkedin' ? 'https://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(location.href) : option === 'twitter' ? 'https://twitter.com/share?url=' + encodeURIComponent(location.href) : '',
onclick: option === 'facebook' ? 'window.open(\'https://www.facebook.com/sharer/sharer.php?u=\' + encodeURIComponent(location.href), \'social-share-dialog\', \'height=\' + Math.min(436, screen.availHeight) + \',width=\' + Math.min(626, screen.availWidth) + \',left=\' + Math.max(0, ((document.documentElement.clientWidth - 626) / 2 + window.screenX)) + \',top=\' + Math.max(0, ((document.documentElement.clientHeight - 436) / 2 + window.screenY))); return false;' : option === 'linkedin' ? 'window.open(\'https://www.linkedin.com/sharing/share-offsite/?url=\' + encodeURIComponent(location.href), \'social-share-dialog\', \'height=\' + Math.min(436, screen.availHeight) + \',width=\' + Math.min(626, screen.availWidth) + \',left=\' + Math.max(0, ((document.documentElement.clientWidth - 626) / 2 + window.screenX)) + \',top=\' + Math.max(0, ((document.documentElement.clientHeight - 436) / 2 + window.screenY))); return false;' : option === 'twitter' ? 'window.open(\'https://twitter.com/share?url=\' + encodeURIComponent(location.href), \'social-share-dialog\', \'height=\' + Math.min(436, screen.availHeight) + \',width=\' + Math.min(626, screen.availWidth) + \',left=\' + Math.max(0, ((document.documentElement.clientWidth - 626) / 2 + window.screenX)) + \',top=\' + Math.max(0, ((document.documentElement.clientHeight - 436) / 2 + window.screenY))); return false;' : '',
rel: 'noopener noreferrer',
target: '_blank'
}, [h('i')])
element.appendChild(shareLink);
})
}
}
function h(type, attributes, children = []) {
const element = document.createElement(type);
for (let key in attributes) {
element.setAttribute(key, attributes[key]);
}
if (children.length) {
children.forEach(child => {
if (typeof child === 'string') {
element.appendChild(document.createTextNode(child));
} else {
element.appendChild(child);
}
});
}
return element;
}
const shares = document.querySelectorAll(`[data-share]`);
shares.forEach(element => {
Share(element);
});
</script>
Code:
/* share function */
:root {
--ico-share: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.5 11c-0.706 0-1.342 0.293-1.797 0.763l-6.734-3.367c0.021-0.129 0.032-0.261 0.032-0.396s-0.011-0.267-0.032-0.396l6.734-3.367c0.455 0.47 1.091 0.763 1.797 0.763 1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5-2.5 1.119-2.5 2.5c0 0.135 0.011 0.267 0.031 0.396l-6.734 3.367c-0.455-0.47-1.091-0.763-1.797-0.763-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5c0.706 0 1.343-0.293 1.797-0.763l6.734 3.367c-0.021 0.129-0.031 0.261-0.031 0.396 0 1.381 1.119 2.5 2.5 2.5s2.5-1.119 2.5-2.5c0-1.381-1.119-2.5-2.5-2.5z"></path></svg>');
--ico-facebook: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.5 3h2.5v-3h-2.5c-1.93 0-3.5 1.57-3.5 3.5v1.5h-2v3h2v8h3v-8h2.5l0.5-3h-3v-1.5c0-0.271 0.229-0.5 0.5-0.5z"></path></svg>');
--ico-linkedin: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 6h2.767v1.418h0.040c0.385-0.691 1.327-1.418 2.732-1.418 2.921 0 3.461 1.818 3.461 4.183v4.817h-2.885v-4.27c0-1.018-0.021-2.329-1.5-2.329-1.502 0-1.732 1.109-1.732 2.255v4.344h-2.883v-9z"></path><path d="M1 6h3v9h-3v-9z"></path><path d="M4 3.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path></svg>');
--ico-twitter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 3.538c-0.588 0.263-1.222 0.438-1.884 0.516 0.678-0.406 1.197-1.050 1.444-1.816-0.634 0.375-1.338 0.65-2.084 0.797-0.6-0.638-1.453-1.034-2.397-1.034-1.813 0-3.281 1.469-3.281 3.281 0 0.256 0.028 0.506 0.084 0.747-2.728-0.138-5.147-1.444-6.766-3.431-0.281 0.484-0.444 1.050-0.444 1.65 0 1.138 0.578 2.144 1.459 2.731-0.538-0.016-1.044-0.166-1.488-0.409 0 0.013 0 0.028 0 0.041 0 1.591 1.131 2.919 2.634 3.219-0.275 0.075-0.566 0.116-0.866 0.116-0.212 0-0.416-0.022-0.619-0.059 0.419 1.303 1.631 2.253 3.066 2.281-1.125 0.881-2.538 1.406-4.078 1.406-0.266 0-0.525-0.016-0.784-0.047 1.456 0.934 3.181 1.475 5.034 1.475 6.037 0 9.341-5.003 9.341-9.341 0-0.144-0.003-0.284-0.009-0.425 0.641-0.459 1.197-1.038 1.637-1.697z"></path></svg>');
}
[data-share] {
--bdrs: 50%;
--bgc: lightgrey;
--bxsh: 0 0 0 2px hsla(210, 24%, 15%, 0.65);
--icon: var(--ico-share);
--icon-bgc: hsl(210, 24%, 35%);
--icon-size: 60%;
--m: 0 0.5rem;
--size: 3rem;
min-height: var(--size);
}
[data-share-item] {
background-color: var(--bgc);
border: 0;
border-radius: var(--bdrs);
display: inline-block;
height: var(--size);
margin: var(--m);
outline: none;
width: var(--size);
}
[data-share-item] i {
background-color: var(--icon-bgc);
display: inline-block;
height: 100%;
mask: no-repeat center center/var(--icon-size) var(--icon);
-webkit-mask: no-repeat center center/var(--icon-size) var(--icon);
width: 100%;
}
[data-share-item]:focus,
[data-share-item]:hover {
box-shadow: var(--bxsh);
}
krileon
