Get started with Elfsight Social Share Buttons 1.4.0

Installation

1. Install Elfsight Social Share Buttons WordPress Plugin elfsight-social-share-buttons-cc.zip to your website. Don't know how? Please learn here.

2. Go to Social Share Buttons page in WordPress admin menu.

3. Create a new widget, adjust all settings and get a ready-made shortcode.

Use Social Share Buttons as a WordPress Shortcode



1. Create a new widget

You can use Elfsight Social Share Buttons as a WordPress shortcode. To do this, you have to create a new widget, set all options in the Elfsight editor and save it.

2. Copy-paste the shortcode

You will see the new widget's shortcode in the widgets list. You can copy-paste it into the required place of your website.

Example of the Elfsight Social Share Buttons shortcode:

[elfsight_social_share_buttons id="1"]

Use Social Share Buttons as a
WordPress Widget

To use Elfsight Social Share Buttons as a WordPress widget, go to Appearance -> Widgets, and drag Elfsight Social Share Buttons WordPress widget to any widget section. Next, select one of available Social Share Buttons widgets from the list.

Use Social Share Buttons as a
Visual Composer Element

You can use Elfsight Social Share Buttons as a Visual Composer element. Just add it to your page during page building and select one of the available Social Share Buttons widgets from the list.

Options

Option Default Value Description
Networks
items * null Select the social network buttons you want to display on your webpage. If you can't find the network you're looking for, email us at apps@elfsight.com
  • network - Choose the network to display from the list. If you can't find the network you're looking for, email us at apps@elfsight.com
  • buttonText - Enter the text to display on the button. The default value is the name of the network.
Layout
location inline Set the location option: choose inline or floating buttons. Inline buttons are displayed right where you placed the widget. Floating buttons are fixed in a specific position of your browser window and stay there as a user scrolls down the page.
position center Align your buttons. Choose one of the three options: left, center and right.
columns auto Set the number of columns to break the buttons into.
gutter 12 Set the space between the buttons (in pixels).
hideOnMobile false Select this option to hide the buttons on mobile devices (below 768px screen width).
Buttons
elements icon, text Check the elements to be displayed on a button.
shape rounded Choose your buttons' shape: rectangle, rounded, circle. It defines the buttons' border radius.
width auto Set button width. The default width value is auto, it is calculated automatically depending on other options.
Style
style default Select the right button style from the list.
iconColor white Choose the color of the button icon and text. Three colors are available: native (brand color), black and white.
bgColor native Choose the button background color. Three colors are available: native (brand color), black and white. This option doesn't work with "bordered" and "symbol" styles.
iconColorOnHover white Choose the button icon and text color on hover. The predefined options are the same as for the "Icon color" option.
bgColorOnHover black Choose the button background color on hover. The predefined options are the same as for the "Background color" option.
animation none Choose one of the animation styles to play on hover.
transparency 100 Set the button transparency percentage. Use this option to make the buttons fit your website`s design.
transparencyOnHover 100 Set the button transparency percentage on hover. Use this option to make the buttons fit your website`s design.

Example



Congratulations! You have successfully installed your Elfsight Social Share Buttons plugin.

Support, questions and offers

Your questions and issue reports are processed on the first-come, first-served basis. Expect an answer from 10 a.m. to 7 p.m. CET, Monday through Friday.

Visit Support Center