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.

Share with friends

48
Leave a Reply

avatar
46 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
48 Comment authors
GuruAlbert JonesAlex SmithRob Schneiderbalakrishna Recent comment authors
  Subscribe  
Notify of
Akshat
Akshat

Does floating share icons makes your site or blog slow?

systoo
systoo

tell me more about floating social share icons with bootstrap.

milon kahn
milon kahn

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

Bharat
Bharat

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

Harry
Harry

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?

Daniel Willis
Daniel Willis

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.

jaspreet
jaspreet

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

Sam A
Sam A

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.

Jack
Jack

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.

Rafay
Rafay

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!

yellowmail
yellowmail

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.

Mcafee Customer Service
Mcafee Customer Service

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

Hamza
Hamza

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

Aabitsoft India
Aabitsoft India

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

Sathish Arumugam
Sathish Arumugam

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!

Pankaj Dhawan
Pankaj Dhawan

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.

Claire Greenhow
Claire Greenhow

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.

Karthik Linga
Karthik Linga

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 !

robin
robin

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.

Ajay Shukla
Ajay Shukla

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

FORUM FOR U
FORUM FOR U

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

Munyole
Munyole

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.

Leena
Leena

floating social share icon make your website more impressive

خلفيات 2017
خلفيات 2017

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

rasel
rasel

Can i use this social icon in asp.net

Biono
Biono

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

Ashraful Alam
Ashraful Alam

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.

Yashar
Yashar

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.

anusers13
anusers13

While using boothstrap we can easily float the social share

Alex Powel
Alex Powel

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

Jagjet
Jagjet

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

Sachin
Sachin

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

Magic autofill
Magic autofill

I think floating share icons makes sites slow???

Harish Negi
Harish Negi

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

alinasmith
alinasmith

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

Lalit Kumar
Lalit Kumar

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.

vijay
vijay

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

Meenu Malhotra
Meenu Malhotra

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

Matt newcastle
Matt newcastle

Would this work on a weebly or squarespace site?

Razzak
Razzak

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

Monica
Monica

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

Mohamed Javith
Mohamed Javith

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

balakrishna
balakrishna

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?

Rob Schneider
Rob Schneider

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

Alex Smith
Alex Smith

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

Albert Jones
Albert Jones

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.

Guru
Guru

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