How to display inline, floating buttons with shortcode

We always aim to give our users complete control over the share button so they can decide which page to show it on. Over the last couple of releases, we have added more options to select the content type and page for which you would like to see the native and floating share buttons.

Using the checkbox for the content types and toggle options on each page, you can fully control the Super Web Share button via our main settings page and the page. But in some cases, we understand that you need to show the button in a position you want to show, and with a different style, you prefer to output based on the pages. So, we support shortcodes from the Super Web Share plugin version 2.3.

Using the shortcodes, you can decide the position of the share button to be shown. Whether it’s between a post or page content within the widgets or even within a page builder, our shortcodes will help you control the native share button and control the fallback where and how you want to show the share buttons.

Our shortcode is

[super_web_share]

Inline share button shortcode #

To display the native social share button within a post, page, widget, or even header, you can use the following parameters.

[super_web_share type="inline"]

You can add the following parameters to customize the share button:

  • color – Change the color of the button to be outputted
    Example: color="#BD3854"
  • text – You can set the text to be shown within the button; the text will only be shown if the style is the default and the default text is Share
    Example: text="SuperWebShare Inline button"
  • style – You can set the style of the native share button to be outputted; by default, it is set to the default style
    Values: default, curved, square, circle

    default – button with icon and text
    curved – button with a share icon and within the shape of the curved edges
    square – button with a share icon and within the square shape
    circle – button with share icon and button is within the circle share

    Example: style="default"
  • icon – To set the icon you prefer to output, you can see the order of the icons we used here within the SuperWebShare > Appearance (tab)
    share-icon-1, share-icon-2, share-icon-3, share-icon-4
    Example: icon="share-icon-2"
  • fallback – If you don’t want to show the fallback we provide, you can set it as no
    yes, no
    Example: fallback="no"
  • size – To change the size of the share button, by default, it is set to a large size
    large, medium, small
    Example: size="medium"

Floating share button shortcode #

As for the floating share button, our parameter is

[super_web_share type="floating"]

, and we do support all the parameters mentioned within the inline share button. The additional parameters are the following:

  • floating-position – to set the position of the floating button within the page. By default, the position is set to right.
    right, left
    Example: floating-position="left"
  • floating-from-side – To set the margin from the left or right position on the page. By default, it is set to 5px
    Example: floating-from-side="5px"
  • floating-from-bottom – To set the position of the floating button from the bottom, if you have any other buttons or ads within the page at a position, you can use this parameter to change the position of the Super Web Share floating button. By default, it is set to 5px
    floating-from-bottom="5px"

In case the Super Web Share floating and inline buttons are enabled on the page or post, and if you only want to show the shortcode, in that case, you need to toggle off the inline and floating button via the metabox within the page. See the screenshot below for your reference.

Options to toggle off the inline and floating share button per each page


Note: The shortcode won’t work within the archive pages, such as categories and tags. It’s because we noticed that if the text excerpt is selected, the shortcode from the post is also loading over the archive pages on some themes like Twenty-Twenty. Due to that, we disabled the loading of the shortcodes on the archive pages. Please let us know by sending an email to [email protected] if you want to see the shortcode support for the archive pages or if you know of any solution for the above use case. So that we can prioritize it and can implement it in our future versions.

2 comments

    1. Hi Elefar,

      The title of the post is only shared on some social media platforms like Twitter and WhatsApp as they do support title and URL parameters. Some social media platforms like Facebook and LinkedIn won’t support the title as they don’t have any parameters to accept the text.

      If you have any confusion, please reach out to us at [email protected]

Leave a Reply

Your email address will not be published. Required fields are marked *