How To Use The Social Share Widget By Atomic Addons

The Social Share widget by Atomic Addons adds a row of share buttons to a page. A click opens the network's share window with the page's address filled in, and the Copy Link button copies the address to the clipboard. Each button can show the network's icon, its name or both, in the network's own colors or yours. This guide covers adding the widget, choosing the networks and setting up the buttons.

Enable the Social Share Widget

Social Share is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Social Share. You can also open the Marketing category.

4. 4

   Turn the Social Share widget on.

5. 5

   Click Save Settings.

Add the Social Share Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Social Share. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

It suits a blog post or product page. Placed in a single post template, it shares whichever post is being viewed.

Share Buttons

Content → Share Buttons lists the buttons: Facebook, X, Pinterest and Copy Link to start with. Click a button to open it:

1. 1

   Social Media: The network: Baidu, Blogger, Buffer, Delicious, Digg, Evernote, Facebook, Flipboard, Instapaper, LinkedIn, LiveInternet, LiveJournal, Mix, Mail.Ru, meneame, OK, Pocket, Pinterest, Reddit, Renren, Tumblr, Surfingbird, X, Vkontakte, Weibo, Wordpress or Xing; LINE, Skype, Telegram, Viber, WeChat or WhatsApp, which share through the app and suit phones; or Copy Link.

2. 2

   Custom Label: Replaces the network's name on the button, for example “Share” or “Tweet this”. Leave it empty to use the name.

3. 3

   Copied Text: Copy Link only: the word the button shows for two seconds after copying, Copied by default.

Use Add Item for another button and drag the items to reorder them. Under the list:

1. 1

   View: Icon & Text (the default), Icon or Text. With Icon alone, each button still carries a name such as “Share on Facebook” for screen readers.

2. 2

   Label: Icon & Text only: turn it off to hide the names but keep the room for a count. On by default.

3. 3

   Count: Shown unless the view is Icon: adds the number of shares next to the name. Only Vkontakte, Facebook, OK, Mail.Ru, LinkedIn, Tumblr, Pinterest and Buffer offer a count, and the network decides whether it reports one.

4. 4

   Columns: Auto, the default, sets the buttons in a row that wraps, each as wide as its content. 1 to 6 puts them in a grid of equal-width columns. Use the device icon to change it for tablets and phones.

5. 5

   Column Gap: The space between buttons side by side, 8px by default.

6. 6

   Row Gap: The space between rows of buttons, 8px by default.

7. 7

   Alignment: With Auto columns: left, center, right, or justify to spread the buttons across the width.

8. 8

   Target URL: Current Page, the default, shares the page the visitor is on. Custom adds a field for any address to share instead, such as your home page or a product.

Every button works with the keyboard too: tab to it and press Enter or Space. On a page without HTTPS, where the browser blocks the clipboard, Copy Link shows the address in a box to copy by hand.

Style the Social Share

The Style tab has one section, Share Buttons:

• Style — Flat (the default), Framed (an outline), Gradient, Minimal or Boxed Icon (the icon in a darker block).
• Shape — Square (the default), Rounded or Circle, or your own Border Radius.
• Button Size, Icon Size, Button Height, Border Size (for the framed styles), Text Padding and Typography.
• Color — Original Color (the default) uses each network's brand color. Custom Color adds Normal and Hover tabs with a Primary Color, Secondary Color and Border Color for all buttons.