How to Add floating social share buttons in Blogger & WordPress websites?

As a blogger or website owner, you know the importance of social media in driving traffic to your site. But, how can you encourage your readers to share your content with their followers?

That’s where social share buttons come in!

Social share buttons allow your readers to easily share your content on their social media accounts, increasing your visibility and reach. And, if you want to take it a step further and make it even easier for your readers to share, you can add floating social share buttons to your website. These buttons follow your readers as they scroll down your page, making sharing a seamless experience.

In this article, we’ll show you how to add floating social share buttons to your Blogger or WordPress website and share some best practices for using them effectively. So, let’s get started!

Step-by-step guide on how to add floating social share buttons in Blogger websites

To add the social share buttons in Blogger, you need to copy and paste the below code into the body section of your website. (Just before closing the body tag )

HTML Code

<div class="social-share">

  <a href="#" class="facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.05,0H3.95A3.952,3.952,0,0,0,0,3.95V20.05A3.952,3.952,0,0,0,3.95,24H12.63V14.71H9.62v-3H12.63v-1.5c0-3.6,2.2-5.55,5.38-5.55a28.475,28.475,0,0,1,3.18.16v3L18.79,9c-1.7,0-2,.81-2,1.95v1.5h4.05l-.53,3.05H16.8V24H20.05A3.952,3.952,0,0,0,24,20.05V3.95A3.952,3.952,0,0,0,20.05,0Z"/></svg>
</a>

   <a href="#" class="whatsapp"><svg viewBox="0 0 64 64"><path d="M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z"></path></svg></a>

  <a href="#" class="pinterest"><svg viewBox="0 0 64 64"><path d="M14.4,53.8c2.4,2,6.1,0.6,6.8-2.4l0-0.1c0.4-1.8,2.4-10.2,3.2-13.7c0.2-0.9,0.2-1.8-0.1-2.7 C24.2,34,24,32.8,24,31.5c0-4.1,2.4-7.2,5.4-7.2c2.5,0,3.8,1.9,3.8,4.2c0,2.6-1.6,6.4-2.5,9.9c-0.7,3,1.5,5.4,4.4,5.4 c5.3,0,8.9-6.8,8.9-14.9c0-6.1-4.1-10.7-11.6-10.7c-8.5,0-13.8,6.3-13.8,13.4c0,2.4,0.7,4.2,1.8,5.5c0.5,0.6,0.6,0.9,0.4,1.6 c-0.1,0.5-0.4,1.8-0.6,2.2c-0.2,0.7-0.8,1-1.4,0.7c-3.9-1.6-5.7-5.9-5.7-10.7c0-8,6.7-17.5,20-17.5c10.7,0,17.7,7.7,17.7,16 c0,11-6.1,19.2-15.1,19.2c-1.9,0-3.8-0.7-5.2-1.6c-0.9-0.6-2.1-0.1-2.4,0.9c-0.5,1.9-1.1,4.3-1.3,4.9c-0.1,0.5-0.3,0.9-0.4,1.4 c-1,2.7,0.9,5.5,3.7,5.7c2.1,0.1,4.2,0,6.3-0.3c12.4-2,22.1-12.2,23.4-24.7C61.5,18.1,48.4,4,32,4C16.5,4,4,16.5,4,32 C4,40.8,8.1,48.6,14.4,53.8z"></path></svg></a>

  <a href="#" class="linkedin"><svg viewBox="0 0 64 64"><path d="M8,54.7C8,55.4,8.6,56,9.3,56h9.3c0.7,0,1.3-0.6,1.3-1.3V23.9c0-0.7-0.6-1.3-1.3-1.3H9.3 c-0.7,0-1.3,0.6-1.3,1.3V54.7z"></path><path d="M46.6,22.3c-4.5,0-7.7,1.8-9.4,3.7c-0.4,0.4-1.1,0.1-1.1-0.5l0-1.6c0-0.7-0.6-1.3-1.3-1.3h-9.4 c-0.7,0-1.3,0.6-1.3,1.3c0.1,5.7,0,25.4,0,30.7c0,0.7,0.6,1.3,1.3,1.3h9.5c0.7,0,1.3-0.6,1.3-1.3V37.9c0-1,0-2,0.3-2.7 c0.8-2,2.6-4.1,5.7-4.1c4.1,0,6,3.1,6,7.6v15.9c0,0.7,0.6,1.3,1.3,1.3h9.3c0.7,0,1.3-0.6,1.3-1.3V37.4C60,27.1,54.1,22.3,46.6,22.3 z"></path><path d="M13.9,18.9L13.9,18.9c3.8,0,6.1-2.4,6.1-5.4C19.9,10.3,17.7,8,14,8c-3.7,0-6,2.3-6,5.4 C8,16.5,10.3,18.9,13.9,18.9z"></path></svg></a>
 
</div>

CSS code

<style> .social-share{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:9999;}.social-share a{display:flex;justify-content:center;align-items:center;margin-bottom:10px;width:40px;height:40px;border-radius:50%;background-color:#fff;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);transition:all 0.3s ease-in-out;}.social-share a:hover{transform:translateY(-5px);box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}.social-share a svg{width:20px;height:20px;fill:#555;vertical-align:middle;}.social-share a.facebook svg{fill:#3b5998;}.social-share a.whatsapp svg{fill:#25d366;}.social-share a.pinterest svg{fill:#bd081c;}.social-share a.linkedin svg{fill:#0077b5;}@media only screen and (max-width:600px){.social-share{display:none;}}</style>

Javascript Code

<script>
  var socialShareButtons = document.querySelectorAll('.social-share a');

function shareOnFacebook() {
  var title = document.title;
  var url = window.location.href;
  var shareUrl = 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}

function shareOnWhatsApp() {
  var title = document.title;
  var url = window.location.href;
  var shareUrl = 'https://wa.me/?text=' + encodeURIComponent(title + ' ' + url);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}

function shareOnPinterest() {
  var title = document.title;
  var url = window.location.href;
  var shareUrl = 'https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(url) + '&media=&description=' + encodeURIComponent(title);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}

function shareOnLinkedIn() {
  var title = document.title;
  var url = window.location.href;
  var shareUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}

socialShareButtons.forEach(function(button) {
  button.addEventListener('click', function(event) {
    event.preventDefault();
    var shareType = this.classList[0];
    switch(shareType) {
      case 'facebook':
        shareOnFacebook();
        break;
      case 'whatsapp':
        shareOnWhatsApp();
        break;
      case 'pinterest':
        shareOnPinterest();
        break;
      case 'linkedin':
        shareOnLinkedIn();
        break;
    }
  });
});
</script>

Here, I have added Facebook, Whatsapp, Pinterest, and Linkedin buttons in this floating social share widget.

How to Add More Icons in this floating Share button

Suppose you want to add more icons like Telegram then you need to modify each code above.

You can add the HTML code like this in between the parent div tag. (Check the Bold Text)

<a href="#" class="telegram"><svg viewBox="0 0 64 64"><path d="M56.4,8.2l-51.2,20c-1.7,0.6-1.6,3,0.1,3.5l9.7,2.9c2.1,0.6,3.8,2.2,4.4,4.3l3.8,12.1c0.5,1.6,2.5,2.1,3.7,0.9 l5.2-5.3c0.9-0.9,2.2-1,3.2-0.3l11.5,8.4c1.6,1.2,3.9,0.3,4.3-1.7l8.7-41.8C60.4,9.1,58.4,7.4,56.4,8.2z M50,17.4L29.4,35.6 c-1.1,1-1.9,2.4-2,3.9c-0.2,1.5-2.3,1.7-2.8,0.3l-0.9-3c-0.7-2.2,0.2-4.5,2.1-5.7l23.5-14.6C49.9,16.1,50.5,16.9,50,17.4z"></path></svg></a>

Here, we have added a class name “telegram” and changed the SVG code.

Now let’s add the CSS code for telegram as well.

.social-share a.telegram svg{fill:#0088cc;}

Here, we have added the color of the telegram icon.

Now you need to modify the Javascript code for the telegram button to work. (case sensitive)

<script>
  var socialShareButtons = document.querySelectorAll('.social-share a');

function shareOnFacebook() {
  var title = document.title;
  var url = window.location.href;
  var shareUrl = 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}

function shareOnWhatsApp() {
  var title = document.title;
  var url = window.location.href;
  var shareUrl = 'https://wa.me/?text=' + encodeURIComponent(title + ' ' + url);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}

function shareOnPinterest() {
  var title = document.title;
  var url = window.location.href;
  var shareUrl = 'https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(url) + '&media=&description=' + encodeURIComponent(title);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}

function shareOnLinkedIn() {
  var title = document.title;
  var url = window.location.href;
  var shareUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}

function shareOnTelegram() {
  var title = document.title;
  var url = window.location.href;
  var shareUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}
  
  function shareOnTelegram() {
  var title = document.title;
  var url = window.location.href;
  var shareUrl = 'https://t.me/share/url?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(title);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}
  
socialShareButtons.forEach(function(button) {
  button.addEventListener('click', function(event) {
    event.preventDefault();
    var shareType = this.classList[0];
    switch(shareType) {
      case 'facebook':
        shareOnFacebook();
        break;
      case 'whatsapp':
        shareOnWhatsApp();
        break;
      case 'pinterest':
        shareOnPinterest();
        break;
      case 'linkedin':
        shareOnLinkedIn();
        break;
        
        case 'telegram':
        shareOnTelegram();
        break;
    }
  });
});
</script>

Suppose you want to add an email button that you can modify the js code like this. And follow the same process for adding HTML & CSS code as well.

function shareOnEmail() {
  var title = document.title;
  var url = window.location.href;
  var shareUrl = 'mailto:?subject=' + encodeURIComponent(title) + '&body=' + encodeURIComponent(url);
  window.location.href = shareUrl;
}

I hope you understood how you can add more social share icons.

How to add floating social share buttons in Wordpress

In Wordpress, the coding is the same as discussed above. You can directly paste the code above the </body> tag in the footer.php file.

Or you can use a code manager plugin like WP Code – Insert Headers and Footers.

Conclusion

In conclusion, adding floating social share buttons to your website can be a simple yet effective way to increase your social media presence and drive more traffic to your website. With the right placement and selection of platforms, social share buttons can help you take your content marketing to the next level.

Let me know if you have any difficulty during the installation of this floating social share button in your Blogger and Wordpress websites.