Step By Step Guide For Setting Up Responsive Mobile Share Buttons

Article sections

    Method #1 – Without Dealing With Mobile Options

    First Steps

    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.

    Step By Step Guide For Setting Up Responsive Mobile Share Buttons 1

     

    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.

    Step By Step Guide For Setting Up Responsive Mobile Share Buttons 2

    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.

    Step By Step Guide For Setting Up Responsive Mobile Share Buttons 3

    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.

    Step By Step Guide For Setting Up Responsive Mobile Share Buttons 4

     

    Optional Enable Automatic Responsive Design of Content Share Buttons

    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

    Step By Step Guide For Setting Up Responsive Mobile Share Buttons 5

     

    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.

    Step By Step Guide For Setting Up Responsive Mobile Share Buttons 6

    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

    Step By Step Guide For Setting Up Responsive Mobile Share Buttons 7

    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:

    Step By Step Guide For Setting Up Responsive Mobile Share Buttons 8

    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:

    Step By Step Guide For Setting Up Responsive Mobile Share Buttons 9

    When you are ready with the position selection you can navigate to the Responsive menu and enable the options:

    Step By Step Guide For Setting Up Responsive Mobile Share Buttons 10

    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.
    Was this article helpful?
    YesNo
    in MobileSocial Share ButtonsShare Button Display
    Was this article helpful?
    YesNo