Add Social share button in Blogger and WordPress Website Social share buttons HTML code

Seemab Shah
1 Dec, 2024
Do you want to add a strong social sharing option to your blogger or WordPress website? Well, that is what I am going to share with you here. In this article, I will be sharing with you the step-by-step method of adding a system social sharing button to any website using HTML CSS and JavaScript.
Social share buttons HTML code
Social share buttons HTML code

 How to add a social sharing button

Add the below steps for adding the social sharing button.

  • Open the dashboard for the blogger and move towards the theme part.
  • Click on edit HTML option, then look out for the closing body tag
  • Then copy and paste just above the <body> tag. 

Html Code

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

CSS Code

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

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

You can change the above code to customize the social share buttons. You can easily move the social floating button from the right hand corner of the button to the left hand side by changing the value in the CSS.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 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 websites. If you have any doubts regarding this you can ask me on the Youtube or Email Me.

Social Share Buttons FAQs

How can I add social share buttons on my blogger or wordspress website?
Here is a basic example of social share buttons for Instagram, Facebook, Twitter, and WhatsApp:

<script>
<div class="social-share">
  <a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_URL" target="_blank">Share on Facebook</a>
  <a href="https://twitter.com/share?url=YOUR_URL&text=YOUR_TEXT" target="_blank">Share on Twitter</a>
  <a href="https://api.whatsapp.com/send?text=YOUR_TEXT%20YOUR_URL" target="_blank">Share on WhatsApp</a>
</div>

 </script>
Replace YOUR_URL with URL of your page and YOUR_TEXT with content that you like to share on website.

How can I style the social share buttons?

You can apply styles to those buttons using CSS:
<script>
<style>
.social-share a {
  display: inline-block;
  margin: 5px;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.social-share a:nth-child(1) { background-color: #3b5998; } /* Facebook */
.social-share a:nth-child(2) { background-color: #1da1f2; } /* Twitter */
.social-share a:nth-child(3) { background-color: #25d366; } /* WhatsApp */
</style>

 </script>

Can I add share buttons with icon?

Yes, you can use Font Awesome or custom icons for better view presentation.
<script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

<div class="social-share">
  <a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_URL" target="_blank">
    <i class="fab fa-facebook-f"></i>
  </a>
  <a href="https://twitter.com/share?url=YOUR_URL&text=YOUR_TEXT" target="_blank">
    <i class="fab fa-twitter"></i>
  </a>
  <a href="https://api.whatsapp.com/send?text=YOUR_TEXT%20YOUR_URL" target="_blank">
    <i class="fab fa-whatsapp"></i>
  </a>
</div>

<style>
.social-share a {
  display: inline-block;
  margin: 5px;
  font-size: 24px;
  color: white;
  text-decoration: none;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
}

.social-share a:nth-child(1) { background-color: #3b5998; } /* Facebook */
.social-share a:nth-child(2) { background-color: #1da1f2; } /* Twitter */
.social-share a:nth-child(3) { background-color: #25d366; } /* WhatsApp */
</style>
 </script>

How do I make the share buttons responsive? 

Use flexbox to ensure buttons are responsive: 
<script>
<style>
.social-share {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
</style>

 </script>

How can I track clicks on share buttons? 

Add Google Analytics tracking to your buttons using onclick attributes: 
<script>
<a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_URL" target="_blank" 
   onclick="ga('send', 'event', 'Social', 'Share', 'Facebook');">Share on Facebook</a>

 </script>

Can I use JavaScript for dynamic sharing? 

Yes, JavaScript can set a share URL and text dynamically: 
<script>
<script>
  const url = window.location.href;
  const text = "Check out this amazing content!";
  
  document.querySelector('.facebook-share').href = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
  document.querySelector('.twitter-share').href = `https://twitter.com/share?url=${url}&text=${text}`;
  document.querySelector('.whatsapp-share').href = `https://api.whatsapp.com/send?text=${text}%20${url}`;
</script>

<div class="social-share">
  <a class="facebook-share" target="_blank">Share on Facebook</a>
  <a class="twitter-share" target="_blank">Share on Twitter</a>
  <a class="whatsapp-share" target="_blank">Share on WhatsApp</a>
</div>

 </script>

How do I deal with unsupported browsers for some?

Using the Web Share API for newer browsers and fallback links for older browsers that don't support sharing:
  
<script>
<script>
if (navigator.share) {
  document.querySelector('.web-share').addEventListener('click', () => {
    navigator.share({
      title: document.title,
      text: "Check out this amazing content!",
      url: window.location.href
    }).catch(console.error);
  });
} else {
  document.querySelector('.web-share').style.display = 'none';
}
</script>

<button class="web-share">Share</button>

 </script>
Next Post Previous Post
No Comment
Add Comment
comment url