Configure Share Buttons for Mobile

Overview

Easy Social Share Buttons for WordPress features the most advanced mobile setup options. You have access to various components for responsive design control or server-side mobile setup. The server-side mobile setup provides featured rich advanced control over the button display and functions. But to use that type of setup your site should support server-side mobile detection (for example if you use a cache plugin, that plugin should be able to store a separate mobile cache).

Working With The Quick Responsive Options

The quick responsive options are placed on a few locations inside the plugin. Using these options you can control the appearance of share buttons or display methods without the need to make any further adjustments. For most of the users, those options are pretty enough to achieve the share buttons display they need. Those options you can combine also with the advanced mobile settings described below in this article.

Manage Network Visibility for Desktop and Mobile

Those options you can find in Social Sharing -> Networks. Using the manage button you can define the buttons you will see on desktop or mobile (by hiding those you do not need on a specific device).

Find out more information about managing visibility here.

Activate Automatic Responsive Design of Content Share Buttons

%%SCREESHOT%%

The option you can find in the Social Sharing -> Template & Style menu. This option affects only static content share buttons that are displayed. If you enable it, the plugin will change share button styles based on the device screen width. Example: if you have share buttons with icon and text on a mobile plugin will show only icons (without the text).

Responsive Position Controls

The responsive display position controls are located under each position settings. Using those options you can choose to hide any display of the used display methods by the device. 

Example: If you are using on your site sidebar display and share buttons above and below content. You wish to have all this on desktop but change on mobile to show share buttons only below the content. In this case, you need to visit the Content Top position settings and make the responsive controls set Yes to hide on tablet and mobile. You need to do the same for the Sidebar location.

The Advanced Mobile Settings

The advanced plugin mobile settings you can find in the Where to Display -> Mobile menu.

No specific settings

This is the default. The plugin will not apply any specific mobile optimizations over the usage. It will show share buttons based on other responsive settings (if such are present).

This mode is responsive based (device screen resolution) and does not require server-side mobile device access.

Automatic Setup

The automatic setup mode will set responsive share buttons to trigger for mobile using the plugin mobile-optimized display methods.

Using this mode plugin will hide any of the other display methods that are selected on site for mobile and show only the mobile method you choose. And it will apply a pre-configured visual setup.

This mode you can combine with Manage Network Visibility for Desktop and Mobile feature to show only those networks you need on desktop and mobile.

This mode is responsive based (device screen resolution) and does not require server-side mobile device access.

Deactivate on Mobile

This option will fully deactivate the display of share buttons on mobile devices. 

The method requires server-side mobile detection to work correctly.

Advanced Custom Mobile Display & Positions

This is the most advanced mobile setup you can use inside the plugin. This option will show a full set of options for the mobile setup that can change the display positions, button design, active social networks, etc.

The method requires server-side mobile detection to work correctly.

Working With Advanced Custom Mobile Display & Positions

When you enable the advanced custom mobile display and positions mode the mobile screen will reveal a large set of design options that can be used.

Mobile Display Positions

Similar to site display positions you can choose a list for mobile devices. Those positions will replace the default that the plugin shows on any device. 

You will notice that the list contains fewer display positions than all inside plugin. That is because we eliminate by default those that appear as render-blocking for the mobile device (not recommended for usage). 

In the list, you will notice also a list of displays with the mobile icon. Those displays are made for the optimized mobile experience of the users (recommended for usage instead of the default).

Mobile Display Networks

This is the list of networks that plugin will use for mobile devices. That list will overwrite any you have set in global or position settings. Leave blank if you do not need such or if you will use the responsive settings.

Additional Display Options

You have two separate mobile setup options available – for all display methods and separate for the mobile optimized.

The configuration for all display methods (except the mobile-optimized) you can find in Customize Other Positions When Shown on Mobile. This screen has the same options as any design position.

The mobile-optimized display positions come with a separate setup. The options are grouped in functional and design time. The functional options will appear just below the list of methods. They usually control the work of the method.

The second group of options is the design. They are accessible via the menu. You can use those options to change template or button style (but you will not have a full design setup due to the specifics of the display).

Responsive Design

In the advanced mode, you will also have an option to activate the responsive mode. There is no difference in the work of automatic responsive share buttons for mobile and the option here for responsive design. They are the same. But using the option from this screen will leave uncover the additional display options for mobile-optimized display methods. And those options for mobiles will work in responsive mode.

• Width of the screen – change the width where the mobile responsive mode will trigger
• Hide read blocking methods – this will hide methods that will block the site reading (example: sidebar).
• Hide all share buttons on mobile – hide any share buttons display on site
• Control mobile-optimized display methods – show the mobile-optimized display methods on-site when the screen resolution is small enough.