How to Create Floating Social Share Icons with Bootstrap

By 12-11-2015   BloggingSocial MediaTutorials

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.

 

25 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. 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. Mcafee Customer Service says:

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

Leave a Reply

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

css.php