Don’t panic if you need to configure your mobile share buttons. With Easy Social Share Buttons for WordPress, you have two different methods available – responsive and advanced mobile optimized.
Many users asked why we ship with plugin both methods as the old responsive design always works. The answer is pretty simple – the advanced mobile options offer better handling over the mobile placement. Instead of loading the full versions of buttons for desktop and mobile, you will see just those for mobile. That is why advanced mobile options are faster and lighter.
But unfortunately, they are not for all. If your website uses a cache plugin without a separate mobile cache (or a server cache) you can use the responsive mode only.
If you are not a technical geek or you don’t have time to deal and setup an advanced mobile display read the responsive mobile options part only.
Configuration of Responsive Mobile Display
Method #1 – Without Dealing With Mobile Options
Easy Social Share Buttons for WordPress has advanced mobile options and mobile-optimized display methods. But not all users need such a deep level customizations. If you need simplified responsive options over the existing design this is just for you.
Before going on ensure that your mobile settings are set to “No specific settings“. This point of options is left for responsive usage only.
Does your screen look different? Probably because you already use advanced mobile settings. So just switch the marked option to No and you will get to the screen shown above.
Manage Networks Visibility For Different Devices
With the device visibility, you can easily deactivate the display of a social network on a desktop or mobile device. That option is will save you time setting up a different list for mobile devices.
The option is globally applied to all instances for the displayed share buttons. To activate it visit Social Sharing ->Networks and press the manage button next to the section.
On the new screen just activate the option and choose which networks should be hidden on the desktop and which on mobile. If the buttons should appear on any device just don’t touch the settings.
This option is made to provide a responsive design of content share buttons. So if you have for example a button style using this option it will change to icon display on mobile.
If you need to use this feature you should enable the control from Social Sharing -> Template & Style -> Automatic Position & Mobile Share Button Styles -> Adaptive Position Styles
Manage Display Position Visibility On Different Devices
The responsive options are a group of controls available under each automatic display location. Using those controls you can easily control appearance on different devices each of the existing automatic displays.
The responsive options you can use as a quick mobile setup (along with responsive network options). Or you can use them in combination with mobile options too.
Method #2 – Setup Responsive Mobile Displays From Mobile Options
The second method you can use is the responsive design in the advanced mobile options. To be able to use this your Mobile Options should be changed to Advanced Mobile Display & Positions:
The responsive mobile design automatically triggers the mobile-optimized positions when screen resolution is small. To work properly you need to select and configure one of those:
When you are ready with the position selection you can navigate to the Responsive menu and enable the options:
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.
Bonus. Automatic Mobile Optimized Displays
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.
Configuration of Advanced Mobile Display
Different Mobile Modes
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.
