Floating Social Media Buttons – JQuery Floating Div
Not too long ago I noticed a nice set of floating social media buttons on the single_post pages of WPBeginner. I reached out to them via the contact form they provide and told them I loved the feature and asked how it was done. I received a nice reply back with a very big your welcome from the team.
I wanted to have the very same effect on some of my sites too so I was curious how it worked.
I’ve recently taken another look at how this works and made improvements. The updated version uses the Bootstrap affix plugin and some nifty jQuery to make it all work right. The new one also benefits from being able to work in a responsive theme.
How the Floating Social Media Buttons Worked
The share buttons started at the top of the post content, right below the title and meta info. They followed along the very top of the post as you scrolled through it and read – keeping it always on the screen but never in the way – and it stopped at the end of the post content. It caught my attention and I can only imagine the engagement that such non-intrusive share buttons could create.
I asked the guys at WPBeginner how they had made their floating social media buttons and they told me that when it was ready they would be releasing a post about how they done it and suggested that it would come as a easy to make plugin or a download. I am still waiting on the post about the plugin and it’s been a few months so I’ve decided that time has come for me to make a plugin that does this myself. First thing I needed to do was to figure out what made a good social share button set and then how the technical side of the floating effect would work.
The Features of Good Social Sharing Buttons
All good social sharing buttons all do 2 main things really well.
- They do not obstuct good page content
- They are available exactly when and where the user wants them
The fact that the high performing button designs were the stock provided assets that allowed me to use an existing social share button plugin during the testing of my plugin which we’ll talk about in the next article in the series.
Technical Aspects of the Social Media Share Plugin
When I had decided that I would use stock share buttons for their familiarity appeal I next needed to figure out how I could make the buttons move. Back in school I had often dealt with
absolute positioning for issues of this nature but these days CSS has evolved and upon a few quick tests discovered a few tricky little problems with the sole use of this kind of CSS positioning.
CSS Floating Social Media Buttons
To make the share buttons float we could pull them from the document flow and define an exact position for the buttons to be but then they are always in that position – the buttons would start at the top of the screen and always be there – I wanted them to start below the post title and then move with the user. To do that I had to switch between 2 pieces of simple CSS.
In the end I figured that I needed the buttons to start within the normal document flow, below the title and meta, but then use fixed positioning to stick it to the top of the page when the user scrolled. I needed a trigger event so I decided to use jQuery and create a switch to change the button’s div to fixed positioning and back again depending on the position of another anchor div. I attached the switch to the scroll event and I had my floating social media buttons almost ready for deployment.
How to make Floating Social Media Buttons
First you need to have social share buttons, as the highest performing button designs happen to be the standard provided ones just go ahead and use an existing plugin with template tags or shortcode capability. I used Sociable2 as my base.
- Place the buttons within a div and place that div within another – we will use the second one as an anchor.
- Now style the button’s div to match your site and create a second class for the div with a fixed position.
- Place the anchor and share divs into your posts below the title and meta with
the_content()or a similar hook.
- Include jQuery in your theme.
- Use jQuery to add the fixed class to the div when you scroll past the anchor div and remove it when you go back.
The entire process and complete guide for creating the floating social media buttons will be covered in a tutorial post that will be the next part of this guide on Social Media, Blogging and You.