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!

Floating social share buttons in Blogger (Step-by-step)

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

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

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

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

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

New Floating Social Share Buttons (2026)

Youtube video — Sticky Floating Social Share Buttons

<!-- Blogger Sticky Social Share Buttons -->
<style type='text/css'>
#sticky-share-buttons {
  position: fixed;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#sticky-share-buttons .share-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
  transition: transform .2s ease, box-shadow .2s ease;
}

#sticky-share-buttons .share-button:hover {
  transform: scale(1.12);
  box-shadow: 0 5px 15px rgba(0,0,0,0.28);
}

#sticky-share-buttons svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: currentColor;
}

.share-facebook {
  background: #1877f2;
}

.share-x {
  background: #000000;
}

.share-whatsapp {
  background: #25d366;
}

.share-linkedin {
  background: #0a66c2;
}

.share-telegram {
  background: #229ed9;
}

.share-copy {
  background: #555555;
}


/* Copy notification */
#share-copy-notice {
  position: fixed;
  left: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: #222222;
  color: #ffffff;
  padding: 8px 13px;
  border-radius: 7px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  z-index: 10000;
}

#share-copy-notice.show {
  opacity: 1;
  visibility: visible;
}


/* Mobile */
@media screen and (max-width: 768px) {

  #sticky-share-buttons {
    left: 50%;
    top: auto;
    bottom: 15px;
    transform: translateX(-50%);
    flex-direction: row;
    background: #ffffff;
    padding: 8px 10px;
    border-radius: 40px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  }

  #sticky-share-buttons .share-button {
    width: 40px;
    height: 40px;
  }

  #sticky-share-buttons svg {
    width: 19px;
    height: 19px;
  }

  #share-copy-notice {
    left: 50%;
    top: auto;
    bottom: 75px;
    transform: translateX(-50%);
  }
}
</style>

<div id='sticky-share-buttons'>

  <!-- Facebook -->
  <button type='button'
          class='share-button share-facebook'
          onclick='shareFacebook()'
          title='Share on Facebook'
          aria-label='Share on Facebook'>

    <svg xmlns='http://www.w3.org/2000/svg'
         viewBox='0 0 24 24'
         aria-hidden='true'>
      <path d='M13.5 22v-9h3l.5-3.5h-3.5V7.25c0-1.01.28-1.7 1.75-1.7H17V2.4c-.3-.04-1.35-.13-2.58-.13-2.55 0-4.3 1.56-4.3 4.43v2.8H7.25V13h2.87v9h3.38Z'></path>
    </svg>

  </button>

  <!-- X -->
  <button type='button'
          class='share-button share-x'
          onclick='shareX()'
          title='Share on X'
          aria-label='Share on X'>

    <svg xmlns='http://www.w3.org/2000/svg'
         viewBox='0 0 24 24'
         aria-hidden='true'>
      <path d='M18.244 2H21.5l-7.12 8.14L22.76 22H16.2l-5.14-6.72L5.18 22H1.92l7.62-8.71L1.5 2h6.73l4.64 6.13L18.244 2Zm-1.14 18h1.8L7.25 3.9H5.32L17.104 20Z'></path>
    </svg>

  </button>

  <!-- WhatsApp -->
  <button type='button'
          class='share-button share-whatsapp'
          onclick='shareWhatsApp()'
          title='Share on WhatsApp'
          aria-label='Share on WhatsApp'>

    <svg xmlns='http://www.w3.org/2000/svg'
         viewBox='0 0 24 24'
         aria-hidden='true'>
      <path d='M12.04 2A9.84 9.84 0 0 0 3.6 16.9L2 22l5.22-1.56A9.96 9.96 0 1 0 12.04 2Zm0 17.9a8.1 8.1 0 0 1-4.12-1.13l-.3-.18-3.1.92.94-3.02-.2-.31a8 8 0 1 1 6.78 3.72Zm4.44-6.06c-.24-.12-1.44-.71-1.66-.79-.22-.08-.38-.12-.54.12-.16.24-.62.79-.76.95-.14.16-.28.18-.52.06-.24-.12-1.02-.37-1.94-1.2-.72-.64-1.2-1.43-1.34-1.67-.14-.24-.02-.37.1-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.2-.47-.4-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.69 2.58 4.1 3.62.57.25 1.02.4 1.37.51.58.18 1.1.16 1.51.1.46-.07 1.44-.59 1.64-1.16.2-.57.2-1.06.14-1.16-.06-.1-.22-.16-.46-.28Z'></path>
    </svg>

  </button>

  <!-- LinkedIn -->
  <button type='button'
          class='share-button share-linkedin'
          onclick='shareLinkedIn()'
          title='Share on LinkedIn'
          aria-label='Share on LinkedIn'>

    <svg xmlns='http://www.w3.org/2000/svg'
         viewBox='0 0 24 24'
         aria-hidden='true'>
      <path d='M5.3 3.7A2.3 2.3 0 1 1 .7 3.7a2.3 2.3 0 0 1 4.6 0ZM1.1 7.5h4.2V21H1.1V7.5Zm6.8 0h4v1.84h.06c.56-1.06 1.92-2.18 3.96-2.18 4.24 0 5.02 2.79 5.02 6.42V21h-4.18v-6.58c0-1.57-.03-3.59-2.19-3.59-2.19 0-2.52 1.71-2.52 3.47V21H7.9V7.5Z'></path>
    </svg>

  </button>

  <!-- Telegram -->
  <button type='button'
          class='share-button share-telegram'
          onclick='shareTelegram()'
          title='Share on Telegram'
          aria-label='Share on Telegram'>

    <svg xmlns='http://www.w3.org/2000/svg'
         viewBox='0 0 24 24'
         aria-hidden='true'>
      <path d='M21.7 3.3 18.5 19c-.24 1.1-.87 1.37-1.76.85l-4.87-3.59-2.35 2.26c-.26.26-.48.48-.98.48l.35-4.96 9.03-8.16c.39-.35-.09-.55-.61-.2L6.15 12.72 1.34 11.2c-1.05-.33-1.07-1.05.22-1.55L20.37 2.4c.87-.32 1.63.2 1.33.9Z'></path>
    </svg>

  </button>

  <!-- Copy Link -->
  <button type='button'
          class='share-button share-copy'
          onclick='copyPostLink()'
          title='Copy link'
          aria-label='Copy link'>

    <svg xmlns='http://www.w3.org/2000/svg'
         viewBox='0 0 24 24'
         aria-hidden='true'>
      <path d='M10.59 13.41a1 1 0 0 1 0-1.42l2.58-2.58a4 4 0 1 1 5.66 5.66l-3 3a4 4 0 0 1-5.66 0 1 1 0 0 1 1.42-1.42 2 2 0 0 0 2.82 0l3-3a2 2 0 1 0-2.82-2.82l-2.58 2.58a1 1 0 0 1-1.42 0Zm2.82-2.82a1 1 0 0 1 0 1.42l-2.58 2.58a4 4 0 1 1-5.66-5.66l3-3a4 4 0 0 1 5.66 0 1 1 0 0 1-1.42 1.42 2 2 0 0 0-2.82 0l-3 3a2 2 0 1 0 2.82 2.82l2.58-2.58a1 1 0 0 1 1.42 0Z'></path>
    </svg>

  </button>
</div>

<div id='share-copy-notice'>
  Link copied!
</div>

<script type='text/javascript'>
//<![CDATA[

(function() {

  function pageURL() {
    return encodeURIComponent(window.location.href);
  }

  function pageTitle() {
    return encodeURIComponent(document.title);
  }

  function openShareWindow(url) {
    window.open(
      url,
      'shareWindow',
      'width=650,height=500,scrollbars=yes,resizable=yes'
    );
  }

  window.shareFacebook = function() {
    openShareWindow(
      'https://www.facebook.com/sharer/sharer.php?u=' + pageURL()
    );
  };

  window.shareX = function() {
    openShareWindow(
      'https://twitter.com/intent/tweet?url=' +
      pageURL() +
      '&text=' +
      pageTitle()
    );
  };

  window.shareWhatsApp = function() {
    var text = encodeURIComponent(
      document.title + ' - ' + window.location.href
    );

    openShareWindow(
      'https://api.whatsapp.com/send?text=' + text
    );
  };

  window.shareLinkedIn = function() {
    openShareWindow(
      'https://www.linkedin.com/sharing/share-offsite/?url=' +
      pageURL()
    );
  };

  window.shareTelegram = function() {
    openShareWindow(
      'https://t.me/share/url?url=' +
      pageURL() +
      '&text=' +
      pageTitle()
    );
  };

  window.copyPostLink = function() {

    var link = window.location.href;

    if (navigator.clipboard && window.isSecureContext) {

      navigator.clipboard.writeText(link).then(function() {
        showCopyNotice();
      });

    } else {

      var textArea = document.createElement('textarea');

      textArea.value = link;
      textArea.style.position = 'fixed';
      textArea.style.opacity = '0';

      document.body.appendChild(textArea);

      textArea.focus();
      textArea.select();

      document.execCommand('copy');

      document.body.removeChild(textArea);

      showCopyNotice();
    }
  };


  function showCopyNotice() {

    var notice =
      document.getElementById('share-copy-notice');

    notice.classList.add('show');

    setTimeout(function() {
      notice.classList.remove('show');
    }, 1800);
  }

})();

//]]>
</script>

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.