Add social media buttons to your site with personalized icons, colors, and design settings.
Requirements
To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Social Media Buttons Widget.
The Social Media Buttons Widget is ready to be used anywhere:
Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.
Settings
Once the Social Media Buttons widget has been inserted into your theme widget area or page/post using Page Builder, hover over it and click the Edit link to begin. You’ll find the following fields available:
Title
Enter a widget title if you’d like to display one.
Networks
Use the Add button to add as many social networks as you need. On the right of each item, you’ll find three icons. The down arrow opens the item, the page icon duplicates the item, and the cross icon deletes the item.
Select network
Use the drop-down menu to select the social network to be added.
URL
Enter the URL for your social network profile page. Use the full URL; for example, if SiteOrigin were adding Twitter as a network, we’d use https://twitter.com/SiteOrigin.
Icon title
Enter a link title to be used. This title won’t be visible, it refers to the link title attribute.
Icon color
Select an icon color.
Background color
Select an icon background color. Design and LayoutUse Hover Effects must be enabled to make use of this setting.
Icon hover color
Select an icon hover color. Design and LayoutUse Hover Effects must be enabled to make use of this setting.
Background hover color
Select an icon background hover color.
Design and Layout
Open in a new window
Enable to open social network links in a new window.
Button theme
Select the design theme to be used. Choose between atom, flat, or wire.
Use hover effects
Enable to use icon hover effects. When enabled the following additional settings will be available when editing each network:
- Icon hover color
- Background hover color
Icon Size
Choose between normal, medium, large, and extra large.
Rounding
Select the icon rounding to be used. Choose between none, slightly rounded, very rounded, or completely rounded.
Padding
Select the level of padding to be used. Choose between low, medium, high, or very high.
Align
Select the overall widget alignment. Choose between left, right, center, or justify.
Mobile align
Select the overall widget alignment on mobile resolutions. Choose between left, right, center or justify. This resolution can be set at PluginsSiteOrigin Widgets, locate the Social Media Buttons widget and click the Settings button.
Margin
Select the margin between each social network icon. Choose between low, medium, high, or very high.
Custom Networks
This section is available as part of SiteOrigin Premium.
Use this section to create your own social network icons. Start by clicking the Add button to add a new network. On the right of each item, you’ll find three icons. The down arrow opens the item, the page icon duplicates the item, and the cross icon deletes the item.
Name
Enter the display name of your network.
URL
Enter the network URL/link.
Icon
Choose the icon to be used for your network.
Icon Color
Select the network icon color.
Icon Hover Color
Select the network icon hover color. This setting will only affect non-image icons.
Icon Title
Optionally enter an icon title tag. The title tag is used by the Tooltip Addon.
Icon Image
Optionally select a button icon image.
Background Color
Select the button background color.
Background Hover Color
Select the button background hover color
Border Color
Select the border color. This setting will be available if Design and LayoutButton ThemeWire is selected.
Border Hover Color
Select the border hover color. This setting will be available if Design and LayoutButton ThemeWire is selected.