This lesson will show you the basic steps of social share button styling. In the end, you will know how to choose a style for the entire site or choose a style for a specific position.
Let’s get started with the main setup.
Basic Style Configuration
Choosing Global Styles for The Entire Site
The global share buttons’ styles are those that will always appear if you do not have personalized settings. Those buttons you can set in Social Sharing -> Template & Style. If you are not an advanced user or you don’t use advanced display positions, setting styles here is good enough.
- Template – that will be the main template used for the entire site. Here you will see all default, add-on or custom templates. Example list of the default templates you can see here
- Button style – button style determine the shape of share button (button – showing icon and text, icon only – showing just share network icon, text only – showing just network text, vertical – showing icon and text on a separate lines, icon with hover – showing initially icon and than text will appear on hover). Example of the button styles
- Button align – determine the alignment of share buttons inside the area where they appear. You can select between Left (default), Center and Right
- Button Size – unique quick size change controller that can be used with any theme. The size controller uses the design that you select but re-configure the icon size, text size and spaces to make button smaller or bigger. Example of button styles
- Without space between buttons – this will remove the empty space between and below share buttons. The option will stick buttons each one to another. Very often it is used with sidebar displays
- Animate the share buttons – a list of 30 button and icon animations that can be used to get a better look of the share buttons. Example of the animations
- Display counters of sharing – this option will determine will share counters appear or not on site
- Single share button counter position – this will be the current single button position. If you wish to hide the button counter and show just the total counter than you need to choose hidden. Example of button counter positions
- Total share button counter position – this will be the total counter placement. In case you wish to have just button counter select hidden. Example of total counter styles
- Button width – the width controller with select the individual width of each share button. The default selection is automatic – this means that button will take the space that is required to show icon and text. Fixed width – all buttons will have a preset width entered by used (this will width will be the same no matter of the resolution or device – example: 100px). Full width – buttons will take place of the entire visible area and they will try automatically calculate the width (you have the ability to custom set the width of the first two buttons). Fluid – this is almost identical to the full width option but here you rely on automatic calculations for everything. Columns – the buttons will appear automatically in the number of columns you select. Example of button widths
Automatic Position Styling
If you will use typical share button placements you may not need to deal with detailed position settings. Give the plugin freedom to configure all of them for you.
Activate Adaptive Position Styles
The adaptive position styles will automatically adjust the current styles you choose to the share buttons location. This will happen only if needed. For example, if you have a sidebar display, the adaptive position settings will set a button style to icon-only and configure the total and individual counters (if used) to fit best for sidebar display.
If the location does not require additional settings, the plugin won’t touch the styles.
Activate Automatic Mobile Setup
The option does exactly what it says. If enabled you won’t see mobile settings inside the menu. The plugin will automatically trigger a responsive mobile share bar. If you use AMP for mobile, this option won’t help you configure mobile settings – it should be Off.
This is a tiny hack for content sharing display only. The plugin will automatically change the style of share buttons on the content positions to fit in the width of the display (hiding particular parts).
Advanced Style Configuration
If the basic setup is not good for your site, you can configure the styles for each plugin location.
As we mention above Easy Social Share Buttons for WordPress has an option to setup custom styles that will be used on site for a selected position. To do such change you need to visit Where to Display -> Position Settings -> <Position You Wish To Personalize>. To make possible of that change you need to activate at first that you wish to have a personalized position settings.
Setting Social Buttons’ Style for Mobile Devices
In case you need to personalize the button style for mobile devices (usually the width control or button type may be needed to change). If so than you can do this in Where to Display -> Mobile. In the mobile menu you can access style settings when viewing on mobile devices and such for the specific mobile display positions. The global mobile style setup will apply on any display position on site (except shortcodes) when mobile device is met (and the server side detection works). The advanced mobile styles may not work as expected if you are using a cache plugin without mobile support.
