How to Create Floating Social Share Icons with Bootstrap

Floating social share buttons are the rage and it is common to see them on most websites to enhance sharing of your great content. While you have a choice to choose professional social sharing tools, or use complex plugins, the easiest way we use is a combination of Font Awesome with Bootstrap.

Floating Social Share Icons

If you check out our site right now, we have such buttons floating on all single articles on the left side. You will also note that as the content scrolls down, the position of the share icons stays fixed.

floating social share buttons

<div data-spy="affix" class="pull-left hidden-sm hidden-xs" 
style="margin-left: -65px;">
... icons code ...
</div>

We use a ‘div’ to insert the icon contents. This code uses the ‘affix’ component of Bootstrap javascript to fix the position of the floating box. The classes ‘pull-left‘ helps to pull the icons to the left, while ‘hidden-sm hidden-xs‘ hides the box when the screen size is too small. The  negative left margin is set to align it to the left of the content box (and can be changed as per your design). All this is Bootstrap code.

Social Share Icons Code

Let me show you a sample icon code to get the Twitter icon like this. This uses Font awesome to get the icons.

<a class="text-info" title="Share on Twitter" 
href="https://twitter.com/intent/tweet?text=<?php echo str_replace( ' ', '%20', get_the_title()); ?>&amp;url=<?php the_permalink(); ?>&amp;via=qot" 
target="_blank" rel="nofollow">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span></a>

The lower code creates stacked icons, but you can use a simpler code as well. The complex link we shared with you on how to create social media icons with CSS and this shows how you can extend this code further.

I personally like loading social icons like this as they load super fast. No extra images are loaded. Only a icon font is loaded and CSS styled.

48 comments on “How to Create Floating Social Share Icons with Bootstrap

  1. Munyole says:

    Floating social share icons provide a unique way of sharing your website content with diverse users. I constantly use floating share on my site. Thank you for sharing this info.

  2. Leena says:

    floating social share icon make your website more impressive

  3. خلفيات 2017 says:

    Wow ! Can I use this social icons in MyBB and SMF forum ?

  4. rasel says:

    Can i use this social icon in asp.net

  5. Biono says:

    Wow ! Can I use this social icons in MyBB and SMF forum ? if yes than How can I do this ??

  6. Ashraful Alam says:

    Hi, there

    Thanks a lot that you’ve published at last a beautiful article like this for adding floating Social Icon. Floating Icon is always lovely, as well as floating Social Icon. I will try this.. and will come again.

  7. Yashar says:

    thanks for the post.

    Any wordpress plugins that does all this? I tried a few but couldn’t arrange the location correctly.

    Thanks in advance.

  8. anusers13 says:

    While using boothstrap we can easily float the social share

  9. Alex Powel says:

    Good article on floating social share. Will try these on my website.
    Thanks for sharing.

  10. Jagjet says:

    Thanks, it was actually my theme, for some reason, but I managed to fix it. Thanks again for a great tutorial.

  11. Sachin says:

    Have to see if this works on blogger blogs too or not. Thanks anyways!

  12. Magic autofill says:

    I think floating share icons makes sites slow???

  13. Harish Negi says:

    how can I insert the code in wordpress. Can you help me?

  14. alinasmith says:

    If you are also amongst them and you frequently facing issue in this antivirus installed in your device then calling at the toll free McAfee Contact Number UK would be the best thing to do for you.0800-098-8371

  15. Lalit Kumar says:

    Versatile and yet very easy to implement share buttons are a need of the hour. As most of the themes nowadays already use Bootstrap, it is good idea to use Bootstrap to create share buttons. Thanks for the instructions.

  16. vijay says:

    I will use this code. thanks for sharing the code.

  17. Meenu Malhotra says:

    Nice ones, I tried a lot other but they all have the required features bundled for a price $.

  18. Matt newcastle says:

    Would this work on a weebly or squarespace site?

  19. Razzak says:

    Thanks for this code. now I am going to put this code on my website.

  20. Monica says:

    This article is very useful, actually these buttons can ward off visitors. Thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *