How to Create Floating Social Share Icons with Bootstrap

By 12 months ago   BloggingSocial MediaTutorials
Tweet Share Email Share  

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

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="<?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>

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.

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

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

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

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

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

  11. Hamza says:

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

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

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

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

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

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

  17. robin says:

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

  18. Ajay Shukla says:

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

  19. FORUM FOR U says:

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

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

Leave a Reply

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

ALL comments are moderated. No links allowed. Use real name. Only useful comments will be approved.