How to add Social Share Button on Blogger & Wordpress | Html
In this tutorial, we'll walk you through the steps to add social share buttons to your Blogger blog. Social share buttons allow your readers to easily share your content on their social media profiles, which can help increase your blog's visibility and reach.
<div class="share-button">
<button onclick="share()">
<svg
height="24" viewbox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0 0h24v24H0V0z" fill="none"></path>
<path d="M18 16.1c-.8 0-1.4.3-2
.8l-7.1-4.2c.1-.2.1-.5.1-.7s0-.5-.1-.7L16 7.2c.5.5 1.2.8 2 .8 1.7 0 3-1.3
3-3s-1.3-3-3-3-3 1.3-3 3c0 .2 0 .5.1.7L8 9.8C7.5 9.3 6.8 9 6 9c-1.7 0-3 1.3-3
3s1.3 3 3 3c.8 0 1.5-.3 2-.8l7.1 4.2c-.1.2-.1.4-.1.6 0 1.6 1.3 2.9 2.9
2.9s2.9-1.3 2.9-2.9-1.2-2.9-2.8-2.9z"
fill="currentColor"></path>
</svg>
</button>
</div>
<style>
.share-button {
position: fixed;
bottom: 20px;
right: 20px;
z-index:49;
}
svg.share-button {
width:1.3em;
height:1.3em;
fill:
currentcolor;
transform:
translateY(-0.2ex);
}
.share-button
button{
background-color: #2c333F;
color:white;
border:none;
border-radius:50%;
padding:16px;
font-size:
20px;
cursor:pointer;
box-shadow: 2px
2px 5px rgba(0, 0, 0, 0.2);
display:flex;
align-items:
center;
justify-content:center;
}
.share-button
button:hover{
background-color:
#3e8e41;
}
</style>
<script>
const shareButton
= document.querySelector('.share-button');
if (navigator.share) {
shareButton.addEventListener('click', (event) => {
event.preventDefault();
navigator.share({
title:
document.title,
url:
window.location.href
})
.then(()
=> console.log('Successful share'))
.catch((error) => console.log('Error sharing:', error));
});
} else {
console.log('Web
Share API not supported');
}
</script>
That's it! By following these steps, you should now have social sharing buttons on your Blogger blog. With these buttons, your readers can easily share your content on their social media profiles, helping you to reach a wider audience.
إرسال تعليق