In the previous lessons, we learn how to choose share buttons and configure the styles. It is now time to select the automatic share button placement on your website. The next steps will show how you can do this.
Selecting Post Types for Automatic Button Placement
The post types you select will show automatically share buttons on your website. If all options remain unmark plugin won’t show automatically share buttons. In this case, you need to show buttons manually with shortcode, builder element or function callback.
The post type selection you can do from Where to Display -> Post Types. In the list, you will see all public post types (default or custom added).
If you wish to show also the share buttons on archive pages (categories, tags, author) or home page you need to check also the display on “List of articles”.
Selecting Automatic Display Positions
Easy Social Share Buttons for WordPress contains multiple display positions for automatic showing share buttons on site. Those positions are applied for the selected post types you choose to show share buttons. The selection of positions for your site you can find in Where to Display -> Positions.
Those are usually static or dynamic positions that are applied to the content of a single post, page or custom post type. The selected positions in the list will not show on archive pages (like categories, tags, etc.). If you do not wish to have content share buttons choose Manual display with shortcode only.
You can choose only one option active at the same time from the list.
The additional share button displays are methods not related to the usage of the content. Those display methods can be used anywhere on your site, including the archive pages (categories, tags, etc.) or such that does not have content at all (or custom content not using default WordPress function).
You can select multiple additional positions at the same time. Please be aware that the usage of many positions at the same time may confuse your visitors and provide a negative effect on your social proof.
Different Positions by Post Types
The typical share buttons include the same display on all enabled post types in settings. But that may not be the best solution for any site. That is why you can personalize the active display positions by post type. To do this you need to enable the option and make a selection for the post type you need to have different displays.
The option is not required when you are showing share buttons on a single post type (for example only posts or pages).
Configure Additional Position Settings
Each position for social share buttons display has additional display options. Those additional display options are different for each location (based on visual components and placement). Those options you can access from Where to Display -> Positions and selecting the position name.
Responsive Appearance
Style Library
The style library allows applying a ready design from the library. That design can be a pre-build inside the plugin or custom made (or transferred from another site or location).
If you select a style from the library plugin will load custom settings on this position. In case you need to remove that style you should deactivate the custom options.
Custom Code For The Display Method
The custom code enables the option to add custom HTML, CSS code, shortcode, etc. before or after the share buttons. This will help to build awesome looking customized displays of share buttons without modifying the code of the plugin.
The field you receive are:
- Before Display – that is the custom code section that will be added before the main plugin HTML element
- After Display – that is the custom code section that will be added after the main plugin HTML element.
If you decide to add CSS code we recommend doing this in Before Display section to avoid the blink effect when code is loaded after the element. The CSS should be wrapped in a <style> block. You also have access to a variable {instance_class} that represents the current unique class for the display.
Example:
<style type="text/css">{instance_class} li a { color: red !important; }
Example using custom CSS and HTML:
Code Before
<div style="background:linear-gradient(89deg, #8c33f8 0%, #2b7ffc 100%) !important; padding: 1em; text-align: center; margin-bottom: 1em; color: #fff; border-radius: 4px;"><h4>Share With Your Friends</h4>
Code After
</div>
Result
The custom styles and networks on the position won’t appear in case of:
- You enable the usage of adaptive position styles. In this case, the plugin will choose the best styles for you.
- Network selection panel won’t appear if you choose to use the same networks for entire site.
In the last section it the global position settings represent a full set of controls like in the global plugin settings for personalized button styles and social networks.
When the option is enabled for this position the styles are automatically changed to those on the screen. The position styles will be always with higher priority. Enabling the option may require to make a few additional adjustments over the look of buttons. If that happens you will also see a panel in the plugin general settings notifying about that.
Enabling the option will not overwrite the social networks immediately. If the field for the networks remains blank, the plugin will refer and use the general social networks you select (it will only change the styles). But if you select or network button in the options the position settings will start looking for just networks you choose here. And the general networks change will not reflect on the position settings – you will see a panel in the general settings about this.
Position Specific Options
The position-specific options are tight made for the current location you personalize. Those options you can use without changing the general display options. They provide access to additional features. An example of such options is the Sidebar settings for placement.
Almost any of the automated display positions in Easy Social Share Buttons for WordPress has such additional position-specific options. This helps to make changes over the look of buttons without the need to make any changes inside the code.
