Social Media Share buttons in WordPress with Sass

Posted in Web Development on the 3rd of March 2015 by @aaronrutley

Here’s a quick overview of how I create the basic social media share buttons seen at the bottom of this post. I try to avoid using 3rd party plugins or scripts to include social share buttons, I prefer to simply use the URL sharing buttons – see why here.

I’m using ‘font awesome‘ for the icon and I’ve set the hover colour to change based on a brand colour. Keep in mind all of this is probably overkill for 3 simple buttons however I’ve found Sass maps and this share function can be used multiple times in a project so I figured it’s worth a post.

Lets start with the Sass / Scss

The following Scss would realistically be split into the appropriate partials however I’ve placed this in one gist to keep it simple. Please note you’ll need to include the font awesome typeface (via @fontface) however you won’t need the font awesome css as we’re not using any of their standard classes.

Next up, creating a function to generate the links

I’ve created a simple function to echo out the links in the desired format for each social network. This would be included in your functions.php file or a functionality plugin. This can be easily extended for other social networks like google plus etc, see this post on Sitepoint for more examples.

Finally include this code in your WordPress page template

Include (a variation) of the code below to have the share buttons appear in your page template!

Share this post