Home Blog Add Floating Social Share Buttons To WordPress

Add Floating Social Share Buttons To WordPress

0

This is likely the first of many posts showing you how to include social share icons to your WordPress website. We recently removed our own in-post sharing icons because aesthetically they just didn’t work, and the icons weren’t readily available when scrolling. The answer was to include a floating block of most often used icons on the left side of each page. The basic code on this page provides an alternative to bloaty plugins that’ll accomplish a similar effect.

We have another article scheduled that will show you how to include social icons and share buttons – or any other content – into the top or bottom of a WordPress post or page.

When using our snippet there’s a little bit of work required to build the necessary links but it’s almost always a better alternative to a plugin. That said, we will be building a full-featured social sharing plugin soon designed to meet the needs of those people we work with. Important features excluded in this example will be included into our plugin – such as a floating footer for mobile use, custom buttons, conditionally show on different post types, and so on.

The Result

On the chance we’re not using the code as described below (which is likely), the icons will look as follows on your page when viewed on a desktop browser.

Floating Social Icons

We’ve included additional buttons for the WordPress comment area, your website contact form, and a telephone link – all of which may need to be altered.

The Code

Note that FontAwesome is required to render the icons. There’s a good chance your website already references the required CSS by default. If not, consider using this code.

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

The CSS

In your custom function’s CSS file, copy the following:

Considerations

  • Popups are never a good idea. That said, we’ve included popups in this post only because we haven’t shared a modal plugin solution yet. The solution we’ll be using soon includes the Twitter, Facebook, LinkedIn and other share pages as an iframe in a nicely formatted CSS modal. Expect it soon.
  • If you’re a client – past or present – send us specific feature requests you’d like to see in your BeliefMedia client plugin.
  • Remember to change hard-coded text such as your phone number and contact page URL.
  • We’ve only included a few commonly used social networks. Add others as necessary by simply copying the code.

Shortt URL for this post: http://shor.tt/Jhk

LEAVE A REPLY

Please enter your comment!
Please enter your name here