Social Share

Overview

Today, social media is growing strongly and having tremendous influence on human life. Thanks to thousands of people accessing social networking sites every day, most online businesses take advantage of this opportunity to promote their brands and products closer to customers as well as increase the amount of interaction on their websites. With the new Social Share extension of Mageplaza, it will help you to do the above tasks and especially help you save time and advertising costs.

How to use

Frontend - Floating:

https://i.imgur.com/Wff29cq.gif

Frontend - Inline

https://i.imgur.com/UJ1Dtpl.png

How to configure

1. Configuration

Login to the Magento Admin, choose Store > Configuration > Mageplaza > Social Share.

https://i.imgur.com/cIE9dtk.gif

1.1. General

https://i.imgur.com/nvupGDh.png

  • Enable: Choose Yes to activate the module
  • Icon Color:
    • Select icon color. This field only applies for default icons.
    • Choose Custom option, an extra field appears for selecting among multi colors
  • Button Color:
    • Select button color. This field only applies for default icons.
    • Choose Custom option, an extra field appears for selecting among multi colors
  • Background Color:
    • Select background color. This field only applys for default icons.
    • Choose Custom option, an extra field appears for selecting among multi colors
  • Border Radius: Insert the % value for Border Radius field, with the value range from 0 - 50% ( 0 is square, 50 is round by default). For example when you insert the value of 50%:

https://i.imgur.com/LtIjjxv.png

  • Enable Share Counter: Select yes to count the Share number in the URL links

https://i.imgur.com/8tkmXCI.png

  • Enable Thank You Popup: Select yes to show Thank you popup after sharing

https://i.imgur.com/iBVBNMD.png

https://i.imgur.com/ifB51Fu.png

https://i.imgur.com/pXQh5gu.png

  • Enable: Select Yes to enable social share on specific social networks
  • Image: click Choose File button to upload the file image of those social networks

https://i.imgur.com/IzSY8b7.png

  • Enable: Choose “Yes” to show more services for sharing. It will allow icon + to display more Services on Frontend.
  • Display Menu Type: Choose the Menu displaying method

https://i.imgur.com/ljJV4KR.png

  • Hover: Allow showing Menu when mouse over
  • Click: Allow showing Menu when clicking to Service symbol and show the field:
  • Display Full Menu: Choose Yes to show full Menu. Choose No, the field Number of Services appears allowing you to choose the service number that you want to display.
  • Number Of Services:
    • Enter the number in Number Of Services field, when clicking to “+”, it will allow showing Services by your chosen number
    • If it is left blank, the system will notify that This is a required field and the number will start from 1 by default.

1.2. Floating Configuration

https://i.imgur.com/wGClUxR.png

  • Apply For:
    • Choose the position to display Services at Floating Configuration
      • All Pages: Displays services on all pages
      • Select Pages: Show 2 more fields: Apply for Select Page and Apply for CMS Page to choose the location to display services:
        • Apply for Select Page: Select the page to display services. You can choose to apply multiple pages at once. Pages not selected will not display services.
        • Apply for CMS Page: Select CMS page to display services. You can choose to apply multiple CMS pages at the same time. CMS pages that are not selected will not display services.
  • Style: Select the style for displaying Menu
    • Horizontal: Icons are arranged horizontally.

https://i.imgur.com/SHNHJLm.gif

  • Vertical: Icons are arranged vertically.

https://i.imgur.com/7UARNP7.png

  • Position: Choose the position to show Menu at 2 sides:

    • Left: Icons are on the left side of pages

    https://i.imgur.com/87uRNAr.png

    • Right: Icons are on the right side of pages

    https://i.imgur.com/lUfNXUH.png

  • Margin Top:

    • Choose the size of services to decide the margin top of sharing button block. Only show this field when choosing Vertical style
    • The default number is 150 px
  • Margin Bottom:

    • Choose the size of services to decide the margin bottom of sharing button block. Only show this field when choosing Horizontal style
    • The default number is 0 px
  • Button Size: Choose the button size for Icons. The default size of icons is 32x32

https://i.imgur.com/WWF3UwQ.png

1.3. Inline Configuration

https://i.imgur.com/7Evq2x0.png

  • Apply For:

    • Choose the position to display Services at Inline Configuration
    • Enable showing in multi positions
  • Position: Choose the position to show Menu at:

    • Top content: Icons shown at the top of page

    https://i.imgur.com/MbFm7xr.png

    • Bottom content: Icons shown at the bottom of page

    https://i.imgur.com/eZvn2rh.png

  • Show under Add To Cart on Product detail Page: Select Yes to display under Add To Cart on Product Detail Page

    https://i.imgur.com/MBHPOCf.png

  • Button Size: Choose the button size for Icons. The default size of icons is 32x32

https://i.imgur.com/IPVN3qC.png