<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Share buttons with JS</title>
</head>
<body>
<div class="share-icons">
<span data-js="facebook-share">FACEBOOK</span>
<span data-js="twitter-share">TWITTER</span>
<span data-js="whatsapp-share">WHATSAPP</span>
</div>
<script>
//Required JS
let initShareIcons = function() {
let twitterShare = document.querySelector('[data-js="twitter-share"]');
twitterShare.onclick = function(e) {
e.preventDefault();
let twitterWindow = window.open('https://twitter.com/share?url=' + document.URL, 'twitter-popup', 'height=350,width=600');
if(twitterWindow.focus) { twitterWindow.focus(); }
return false;
}
let facebookShare = document.querySelector('[data-js="facebook-share"]');
facebookShare.onclick = function(e) {
e.preventDefault();
let facebookWindow = window.open('https://www.facebook.com/sharer/sharer.php?u=' + document.URL, 'facebook-popup', 'height=350,width=600');
if(facebookWindow.focus) { facebookWindow.focus(); }
return false;
}
let whatsappShare = document.querySelector('[data-js="whatsapp-share"]');
whatsappShare.onclick = function(e) {
e.preventDefault();
let whatsappWindow = window.open('https://api.whatsapp.com/send?text=' + document.URL,'whatsapp-popup', 'height=350,width=600');
if(whatsappWindow.focus) { whatsappWindow.focus(); }
return false;
}
};
$(document).ready(function()
{
initShareIcons();
});
</script>
</body>
</html>
An example code is shown where JQuery has not been imported.
JQuery is necessary for the example to work correctly!!!!
JQuery is necessary for the example to work correctly!!!!
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.