How to Add System Share Button in Blogger and WordPress websites

By using this share button, you website users can share your article to their social media or any other, by doing so your page views will increase and new users will attract to that article and your users will become permanent users.

Read this article carefully and completely to get clear understanding about adding system share buttons in blogger, WordPress and other websites easily in just few minutes without any issues or errors.

Steps to Add System Share button

First of all to add this system share button in your website, you need to follow the below provided steps.

Before going to the process make sure, you have backup code with you, if any error occurs while executing the code, then you can restore the code again and can repeat the same process carefully.

First of all you need to open blogger theme section or WordPress theme editor or your website theme editor.

Add HTML Code

You have to copy below provided HTML code and paste the copied HTML code just above closing body tag or </body> tag.

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

Add CSS Code

Now you need to copy below provided CSS code and paste the copied CSS code just below the above HTML 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>

Add JavaScript Code

Now again copy below provided JavaScript code and paste the copied JavaScript code just below the above CSS 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 you have to save the theme after adding all the above provided codes and your social sharing button will be successfully added to your Blogger or wordpress or other websites. 

You can also use the same code in WordPress as well as other websites. Just paste the code in the footer section using any code manager plugin Like WP-code or any other you use.

Customization of the Share Button

After adding the code, you can also customize it by changing few lines inside the above given CSS code.

You can also 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;.

Even you can increase the Z index value, if anything is showing above this button on the webpage and 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 blogger conditional tags.

I hope that you all have understood about adding system share button in blogger, WordPress and other websites easily without any issue or error.

If you have any error or issues with the codes, then you can ask me on mail or through contact page.