Hover Social Sharing Blockquotes on WordPress

I was recently involved in a project to redesign an online news network, which led to a number of very cool custom functions being created for the WordPress sites they rely on. One such feature provides the users with the ability to share the contents of the in-post blockquote, which is built into the WordPress post editor.

Using a combination of JavaScript and CSS, social media sharing buttons appear when the user hovers over the quote and a pop-up to share on the chosen social network opens when clicked. Below is how to achieve this for Twitter and Facebook:

JS:

jQuery for pop-ups:

For SCSS:

Regular CSS:

This useful function adds a little interactivity to your post content and should help increase the chance of being shared on social media. You will notice that Social media URL submission methods have been used to share to both Facebook and Twitter, rather than the heavy SDKs and APIs. This is for speed, to prevent extra dependencies and for ease of implementation.

Useful links/downloads

Download the icons used in this tutorial
A definitive list of brand colors in hex/HTML color format