How to Add a System Social Share button in Blogger & WordPress Website

 Are you looking for a powerful social sharing option in your Blogger or Wordpress website? Well, That’s what I am gonna share with you here.

In this article, I will share with you the step-by-step method to add a system social sharing button in any website using HTML, CSS & JavaScript. 

How to Add a Social sharing button

To Add this social sharing button, follow the below steps. 

Open your Blogger dashboard and Go to the theme section. 

Now click on the edit HTML option and search for the closing Body tag. 

Now paste the code just above the </body> tag. 

HTML CODE

<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>

CSS Code

<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>
 

JavaScript code

 <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> 

Now save the theme after pasting all the codes and your social sharing button will be added to your Blogger website. You can also use the same code in wordpress as well. Just paste the code in the footer section using any code manager plugin Like WPCode Code Snippets Plugin. 

How to customize this social share button

You can customize the social share buttons by modifying the above code.

You can change the position of the social floating button from the bottom right-hand corner to the left-hand side by changing the CSS value .share-button { position: fixed; bottom: 20px; right: 20px; z-index:49;} from right:20px; to left:20px;.

You can also increase the Z-index value if anything is showing above this button on the webpage. You can also change the background color, hover color, SVG icons, etc.

You can also limit the loading of this Code in specific posts or pages by using the Blogger conditional tag. Or you can limit the loading of this script to Desktop only or mobile only by following this video. 

I hope this article helps you add a social floating share button to your blogger and wordpress website. If you have any doubts regarding this you can ask me on the Telegram Group or Email Me.