How to Customise Your Social Share Buttons with Social Pug
Before we get started…
You might have noticed some time ago that the admin area of Social Pug changed quite a bit. I felt at the time that the user interface was getting a bit too cluttered and some of the UI elements were not user friendly, so I took some time to assess the situation and make some needed improvements. Turns out the time spent on the issue was worth it, as users love the new look and feel… just look at this awesome user review:This is easily the most beautiful and functional social share plugin I've tried. #SocialPug #WordPress
Not bragging… *cough*.
So… after the success of these improvements I wanted to take some time and follow the same process for the share buttons. The buttons were nice, crispy sharp, with eight different styles to choose from, but they weren’t for everyone. For one, they had only one size and second, only the default colors of the social networks were available. Now I know you can’t satisfy everyone, but you as a website owner need the social share buttons to integrate as smoothly in your website’s design as possible, so it made sense to go the extra mile to add more customisation options. So, here’s what you can do…
Choose your style
Social Pug comes with eight different styles out of the box. Any further customisation will be based on the style you choose. For example, the eight styles presented below have the rounded button shape, the medium button size and the default colors of the social networks, all properties that you can change with a few clicks.
Button shapes and sizes
Every website has them… different elements with different shapes and sizes, from headers to footer, columns and individual widgets. Your social buttons are also elements of a website and integrating them flawlessly is a big must, and it’s really not that hard within Social Pug. You can make the buttons rectangular, or add smooth rounded corners, or no corners at all.
In terms of size, you have three options out of the box. Small, medium and large.
Custom colors and hover colors
You may not be very fond of the default colors of the social networks. Truth be told, they don’t work with every design, but you’re in luck, custom colors to the rescue! This is the newest addition to set of customisation options for the buttons and it features two separate settings.
You have the button color and the button hover color. This two settings are independent of each other. No need to set them both if you don’t want to.
Let’s say you select just the button color. In this case the hover color will remain the default color of the social network.
Eight different styles, three shapes, three sizes, custom colors and hover colors… what’s next? You’ll just have to wait and find out.
Thanks for reading. Cheers!