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. Akshat says:

    Does floating share icons makes your site or blog slow?

  2. milon kahn says:

    Thank you for your thoughtful response. Yes, improvements in Referral Program from Infolinks . However, large and small actions are both important, that’s a great think.
    Thanks

  3. Bharat says:

    Thanks for sharing this code, I have seen floating social media icons on many websites but now I get the code.

  4. Harry says:

    Sir, According to my personal experience, floating social share icons are kinda irritating and annoying and specially when they tend to cover content. So my question is, If I use “Digg” which gives floating social share icons then will it increase my bounce rate?

  5. Daniel Willis says:

    Thanks for the article. The main rule of placing social buttons is to make an article visible and easy to be liked or tweeted. But at the same time, social buttons should not irritate visitors.

  6. jaspreet says:

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

  7. Sam A says:

    Bootstrap is the best for making web site responsive. There is very good functionality to make your web site responsive. Now a days you have to compulsory make your web site responsive other wise google not cached your web site.

  8. Jack says:

    I simply want to mention I’m new to blogging and definitely liked this blog site. Probably I’m likely to bookmark your website . You actually come with fantastic articles and reviews. Thank you for sharing with us your blog site.

  9. Rafay says:

    This widget is really awesome to encourage readers in sharing of content. I personally tried this and it increased social share counts in every post of my blog. Highly Recommended!

  10. yellowmail says:

    Bulk Email marketing & newsletter solutions. It acts as a email gateway through which you can execute the email marketing of services provided by your company or your company’s products. This deals not only with Bulk email marketing but it also provides engine for newsletter sending to large list of your opt-in subscribers at a click away with pre-defined templates. What it exactly does is channels a commercial message to people who have subscribed to receive your promotional email or regular newsletter mail.

  11. Mcafee Customer Service says:

    Thanks for sharing your useful tips. Please post continue like this. I am awaiting for next..

  12. Hamza says:

    A floating share bar gives really impressive result on social media. It makes you site very much popular.

  13. Aabitsoft India says:

    thanks for sharing this article,the code u shared was very simple are working fine

  14. Sathish Arumugam says:

    Hi, very useful post. You have shared a very useful topic and it is easy to understand and by this, all can do floating social share icons within simple steps. Thank u so much for sharing the coding. Keep doing!

  15. Pankaj Dhawan says:

    Bootstrap is getting very popular and many professional websites are built on it. Though I am very new to it but this was indeed very good post and easy to add floating sharebar option.

  16. Claire Greenhow says:

    I’ll give this code a go, thanks. I was using a plugin but it made my site slow right down so I had to remove it.

  17. Karthik Linga says:

    I am happy after reading this useful post to show the floating social buttons after the article post. I got my expected information here and also learnt a new things from this post .

    Thanks for you support !

  18. robin says:

    Thanks buddy for sharing this code. I use Social Sticky Bar and Sumo.me on my website. These two plugins are awesome. I will use this code and compare with my existing plugins.

  19. Ajay Shukla says:

    Thanks for sharing this useful articles on Social icon. please keep it up.

  20. FORUM FOR U says:

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

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

  22. Leena says:

    floating social share icon make your website more impressive

  23. خلفيات 2017 says:

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

  24. rasel says:

    Can i use this social icon in asp.net

  25. Biono says:

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

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

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

  28. anusers13 says:

    While using boothstrap we can easily float the social share

  29. Alex Powel says:

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

  30. Jagjet says:

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

  31. Sachin says:

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

  32. Magic autofill says:

    I think floating share icons makes sites slow???

  33. Harish Negi says:

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

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

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

  36. vijay says:

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

  37. Meenu Malhotra says:

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

  38. Matt newcastle says:

    Would this work on a weebly or squarespace site?

  39. Razzak says:

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

  40. Monica says:

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

  41. Mohamed Javith says:

    Great article, Its very helpful for my website. I learned a lot from this article. Thanks for sharing this article with us

  42. balakrishna says:

    Thanks for sharing this code, I have seen floating social media icons on many websites but now I get the code. can i use this bootstrap in wordpress website?

  43. Rob Schneider says:

    Is their a limit or we can put up as many social media icon as we want?

  44. Alex Smith says:

    Such a great article to creat floating social share icons. It’s very helful in coding.

  45. Albert Jones says:

    Maybe i am a little late on the post. Things you have mentioned works but got to tell you i don’t see the icons floating on this post.

  46. Guru says:

    Can I use the same code in other CMS websites where I didn’t use Bootstrap ?

Leave a Reply

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