Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup

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).

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 1

For custom post types using non-standard WordPress content render, share buttons on content locations may not display. If so you can use the global site displays.

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”. 

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 2

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.

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 3

Inline Content Share Buttons

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.

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 4

You can choose only one option active at the same time from the list.

Additional Share Button Displays

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.

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 5

Different Positions by Post Types

On the screen, you will see only post types selected for automatic button placement. So if you need to show different locations for Posts and Pages, both post types should be enabled in the automatic placements of post types.

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 6

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).

Typical Usage Scenario: A real-life example for the usage of this option is when you have posts and pages on your site. In this case, you select from the post types posts and pages and select display methods to be Content top & bottom and Sidebar. That is a typical setup for blog articles but showing content top and bottom share buttons is not always the best for pages (especially when you are building them with page builder plugin). In this situation you can activate the different displays by post type and make adjustments only for the Pages – in the content drop-down you will choose manual and in the additional display, you will select sidebar. If nothing is selected for a post type the global options will be used.

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.

Warning! The customized position settings for styles and networks on each location has higher priority over the global styles. For you, this means that if you enable the custom styles and networks for a location you need to make further adjustments over the design in location setup (not global settings). If you need to keep the position with the same setup as the global you need to turn off the custom styles and network options.

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 7

Responsive Appearance

Responsive options are available for each location of the share buttons display. Using responsive appearance you can hide share buttons on different devices based on the device resolution. Usage of the responsive options can be used standalone or in combination with mobile options.

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 8

Style Library

You won’t see the style library in a few locations. This is due to specific of the placement. The style library may also not appear if the module is disabled from settings.

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 9

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

You won’t see the custom code in a few locations. This is due to specific of the placement. The custom code may also not appear if the module is disabled from settings.

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 10

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

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 11

Configure Custom Share Button Style & Network List

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.

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 12

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.

Lesson #3. Automatically Display Share Buttons on Your Website. Selecting Post Types, Positions and Manage Positions Setup 13

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.