How to display inline, floating buttons with shortcode

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

By 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 from the Super Web Share plugin version 2.3, we are supporting shortcodes.

Using the shortcodes, you can decide the position of the share button to be shown. Whether it’s between a post or page content or 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 output the share button within a post or page or the widgets or even headers, you can use the following parameters to display the native social share button.

[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, its set to the default style
  Values: default, curved, square, circle
  
  default – button with icon and text
  curved – button with share icon and within the shape of the curved edges
  square – button with 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, its 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, its 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, its 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.

Note: The shortcode won’t work within the archive pages like 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]superwebshare.com if you want to see the shortcode support for the archive pages or if you know any solution for the above use case. So that we can prioritize it and can implement it in our future versions.