Creating your own Social Share Buttons widget

Share
With the help of this article you will find out how to customize your own Share Buttons in a pretty easy way

First of all, let’s figure out what Social Share Buttons are and why you might need to have them on your website.

Share Buttons are quite a useful thing that will let users share the content from your website on their own social pages and add comments about your product/information, making your website more popular.

Let’s start setting up a widget so that you could see all the advantages of the app.

Networks tab

All the main settings are made on the first tab, so all you need to do is to add the button you need. Also, you can either duplicate or remove buttons.

Having pressed Add button you will be able to choose a social network button and change its title if you like:

Layout tab

There are only three sections on Layout tab – for you not to get lost within settings. Let’s have a look at the whole tab and each element separately:

You can put the buttons to any place on your website with the help of Inline layout or, you can make them stay always visible with the help of Floating mode.

Floating buttons will follow the scroll of visitors and will always be in sight. You can also set the Position to display them on any side of the page (right or left) or to the center.

With the help of Grid option, you can set the number of columns and adjust space between buttons:

On this very tab you can also set up buttons not to be shown on mobile just by moving the toggle:

Buttons tab

Buttons tab will let you adjust the appearance of your buttons. With the help of Elements option, you can show or hide buttons’ icons or text (1).

On Shape section, you are given three different forms to choose from (2) and the last option will let you change the buttons’ width (3).

Style tab

You are able to continue setting up buttons’ appearance on Style tab:

With the help of the first option, you can choose one of 4 styles for your buttons to look the most appropriate way:

In Colors section you can color the buttons playing around with color settings:

Icon and Background color options let you change buttons’ title and background colors – so all you have to do is just pick one.

However, two last options might seem to be not that clear so let’s take a look at them.

Hover means navigation and buttons’ appearance may also vary– you can set the button to have its native style on hover or change it to white or black. You can do the same thing with background color on hover:

Going back to Style tab, you will find an option of selecting buttons’ animation – the way the buttons will behave when you hover on them. There are 5 different variants so you can choose one or disable this option at all:

With the help of Transparency option, you can make the buttons to look slightly transparent themselves or/and on hover:

Done! The only thing left is to set a widget on your website.

Try out your own Social Share Buttons in our Demo right now!

Use our free demo to customize a widget.