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 #WordPressClick to Tweet

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.

social share button style

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.

social share button shapes

In terms of size, you have three options out of the box. Small, medium and large.

social share button size

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.

social share button colors

What’s left?!

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!

Want to join us on our journey?

Sign up to join 900+ great people that are with us on our venture, get the latest news and special promotions.

You are almost in!

There's just one more step. We've sent you a confirmation email where you will be able to confirm your email address.

And don't worry. We also hate spam.