How to use Social Share Widget of Sky Addons for Elementor

The Sky Addons Social Share widget lets you add share buttons for 35+ social networks and messaging apps — including Facebook, Twitter, LinkedIn, Pinterest, WhatsApp, Telegram, Reddit, and more — to any Elementor page or post. Each button can use the network’s official brand color or fully custom colors, with optional text labels, a separator between buttons, and hover animations. This documentation will guide you through the process of using the Social Share Widget to create shareable, on-brand social buttons on your website.

Features:

1. 35+ Networks: Choose from Facebook, Twitter/X, LinkedIn, Pinterest, WhatsApp, Telegram, Viber, Reddit, Tumblr, Buffer, Pocket, VKontakte, Weibo, and many more — all in a single repeater.
2. Official or Custom Colors: Each button defaults to the network’s official brand color. Switch any individual button to Custom mode to set your own icon color, background, and border color — in Normal and Hover states.
3. Custom Icons: Replace the default Font Awesome icon for any network with any icon from the Elementor icon library or your own SVG.
4. Custom Labels: Show or hide the network name label next to each icon. Override individual labels for any button.
5. Separators: Add a visible separator between buttons using either a default line (with configurable size) or a custom character.
6. Hover Animations: Apply any of Elementor’s built-in hover animations (grow, shrink, float, sink, etc.) to the button icons.
7. Advanced Border Radius: Use the standard dimension control for rounded corners, or enable Advanced Border Radius to enter a custom CSS radius string for asymmetric blob shapes.

Insert Social Share Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Social Share in the widget panel and drag it onto the canvas.

Configure Content

The Social Share section in the Content tab controls which networks appear and how each button behaves.

1. Social Share (Repeater): The default list includes Facebook, Twitter, and Pinterest. Click Add Item to add more networks. Drag items to reorder them. Each item has its own settings:
   — Network: Choose the platform from the dropdown (35+ options).
   — Enable Custom Label: Toggle on, then enter a Social Name to replace the default network name displayed next to the icon.
   — Enable Custom Icon: Toggle on and pick any icon from the Elementor icon library to replace the default Font Awesome brand icon.
   — Customize: Switch from “Official Color” to “Custom” to unlock Normal/Hover color controls for icon color, background color, and border color.
2. Alignment: Align the row of buttons Left, Center, or Right. Responsive — you can override per breakpoint.
3. Hide Social Name: Toggle on to show icons only, with no text labels beside them.
4. Show Separator: Toggle on to display a divider between buttons. Choose Default (a thin line with adjustable size) or Custom (enter any character, such as / or |).

Style Your Social Share

Use the Style tab to customize every visual element of the buttons.

1. Social Share (buttons):
   Control the gap between buttons (Spacing), padding inside each button, border (style/width/color), border radius, and box shadow. Use the Normal tab for base opacity and the Hover tab for icon color, background, border color, hover border radius, text shadow, box shadow, and hover opacity. The Hover Animation dropdown applies an Elementor entrance animation on mouse-over.
2. Icon:
   Set the icon size (px or em) for all buttons at once. SVG icons scale proportionally.
3. Label:
   Control typography (font, size, weight) and spacing (gap between icon and label text) for the visible network name labels. This section is hidden when Hide Social Name is on.
4. Separator:
   Set the color and typography for the separator element. This section is hidden when Show Separator is off.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your Social Share widget in action.

Best Practices

1. Limit your list to 3–5 networks. Studies consistently show that fewer share options lead to higher overall share rates because users are not paralyzed by choice.
2. Use “Official Color” for recognition — visitors instantly identify Facebook blue and WhatsApp green. Switch to Custom colors only when your brand guidelines require it.
3. Place the widget both at the top and bottom of long blog posts, so readers who finish the article have a share button immediately available without scrolling back up.
4. Hide the Social Name label on mobile by setting it to hidden at the mobile breakpoint — icon-only rows are more compact and scan better on small screens.

Troubleshooting

1. Clicking a button does nothing. The widget requires JavaScript. Check that no security or caching plugin is blocking the Goodshare JS library. Look for console errors in the browser developer tools.
2. The wrong URL is being shared. The widget reads the current page URL. If you are previewing a draft in the Elementor editor, the URL passed to sharing networks is the draft URL. Publish the page first and test sharing from the live URL.
3. A custom icon is not showing. Make sure the Enable Custom Icon toggle is on for that repeater item, and that an icon has been selected in the Custom Icon picker below it.

Frequently Asked Questions

Does this widget share a custom URL or always the current page?

It shares the current page URL by default, which is the most common use case for blog posts and landing pages. The underlying Goodshare library reads window.location.href.

Which networks support share counts?

Facebook, LinkedIn, Buffer, Pinterest, Tumblr, Pocket, VKontakte, Odnoklassniki, Mail.Ru, and Moimir support share counts in the Goodshare library. Twitter/X removed its public share count API several years ago.

Can I add the same network twice with different labels?

Yes. Add the network twice in the repeater and give each item a different custom label. This can be useful when you want to share to both a personal and a business LinkedIn profile, for example.

How do I make buttons appear in a vertical stack?

The buttons are a flex row. To stack them vertically, wrap the widget in a narrow column so the row wraps, or use custom CSS on the wrapper to set flex-direction: column.

Is the Copy Link button functional?

Yes. The “Copy Link” network option copies the current page URL to the visitor’s clipboard using the browser Clipboard API when clicked.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Social Share widget:

• Video Gallery: Add share buttons beneath a video gallery so visitors can spread your content across networks.
• WC Products: Place share buttons on product pages to turn customers into promoters.

Conclusion

The Social Share widget makes it straightforward to add clean, consistent sharing buttons for any combination of platforms, with full control over icons, labels, colors, and hover effects — all without touching code. If you have any questions or need help, visit the Sky Addons support center.