Floating Social Media Buttons - JQuery Floating Div

Floating Social Media Buttons – JQuery Floating Div

written by William Patton on December 29, 2012 in Social Networking with one Comment

← older posts newer posts →

WPBeginner single_post screenshot showing the header and the floating social media buttons before they move

This is the top of one of the posts on WPBeginner. Notice the social share buttons are at the top of the post, below the title.

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.

Responsive Floating Share Buttons

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.

The share buttons float along the very top of the post, always in view. The buttons also stop at the end of the post content, before the comments section.

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

A few other things I had in mind when thinking about all the good share buttons I knew of was that they were all standard branded button designs – or carefully designed to match the original social network’s look and feel.

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.

PattonWebz