Use code NOVASHARE for an extra 10% off!

How to display inline, floating, and follow buttons with a shortcode

You can change button positioning in the plugin or widget settings, but this isn’t always perfect with all the different themes and frameworks. Therefore, you can alternatively use our shortcode to place the inline, floating, or follow buttons wherever you want.

For both the inline content and floating bar you will need to set the button position and post types.

Why? It’s true, with most plugins, if you drop in a shortcode it will simply work anywhere without any additional settings. However, the caveat is, they have to add their code across your entire site (external or inline CSS), anticipating you adding a shortcode at some point in time.

Doing it our way allows us to keep the code off any post types where you aren’t specifically using the shortcode. This was a performance-driven decision to keep your page weight as minimal as possible when it’s not needed.

Inline content share buttons shortcode

The shortcode is:

[novashare_inline_content]

You can place this anywhere you want on your site, however, you will also need to set the button position and post types.

Button position

If you are using a shortcode, set the button position to “Don’t add to content.” Otherwise, you might get two sets of buttons showing up.

Novashare Button Position (Don't Add to Content)
Novashare Button Position (Don’t Add to Content)

Post types

You also need to set the post types where you want your shortcode to display.

Novashare post types
Novashare post types

You can follow the example below on how to display your inline content share buttons with a shortcode in the GeneratePress theme. It will vary per theme or page builder. You can check their documentation on how to use a shortcode.

Step 1

GeneratePress uses what are called elements. So first we create a new element hook.

GeneratePress element hook
GeneratePress element hook

Step 2

Name your element and drop the shortcode in it:

[novashare_inline_content]

Select where you want the hook to appear. There are a number of different choices, such as before_content, after_content, after_entry_title, etc. It all depends on where you want it. Then check the “Excute Shortcodes” option.

GeneratePress before content hook
GeneratePress before content hook

You can change the positioning within the hook placement by wrapping it with a little HTML and CSS. Here are a couple of examples.

Add top margin

<div style="margin-top:10px;">[novashare_inline_content]</div>

Add bottom margin

<div style="margin-bottom:10px;">[novashare_inline_content]</div>

Step 3

Under the “Display Rules” tab, choose the location for the hook/shortcode to appear. For example, choose all of your posts.

GeneratePress display rules
GeneratePress display rules

Step 4

Click “Publish” and verify on your site that it’s where you want it.

Floating bar share buttons shortcode

The shortcode is:

[novashare_floating]

You can place this anywhere you want on your site, however, you will also need to set the button position and post types.

Button position

If you are using a shortcode, set the button position to “Don’t add to content (shortcode).” Otherwise, you might get two sets of buttons showing up.

Novashare Floating Bar Button Position (Don’t Add to Content)

Post types

You also need to set the post types where you want your shortcode to display.

Novashare Floating Bar Post Types

Follow buttons shortcode

Novashare comes with a follow widget so that users can easily connect with you on your favorite social media networks. 

The shortcode is:

[novashare_follow]

Parameters

Below are all the different parameters you can use with the follow widget.

button_shape: rounded|squared|circular

button_color: hex value

button_hover_color: hex value

button_alignment: left|center|right

networks: network1=value1,network2=value2

button_size: ## (px)

icon_color: hex value

icon_hover_color: hex value

new_tab: true|false

Here is an example:

[novashare_follow networks="facebook=test,twitter=test,pinterest=test,linkedin" style="solid" layout="auto" button_size="medium" button_shape="rounded" button_alignment="right" button_color="black" labels="true" total_share_count="true" network_share_counts="true" total_share_count_position="after" total_share_count_color="#bbbbbb"]

Global styles

If you are needing to use the follow buttons shortcode in a custom template (Elementor, Divi, etc.), you might need to enable global styles. Note: This is disabled by default.

Follow the steps below to enable global styles.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

Click the “Configuration” tab.

Novashare Configuration
Novashare Configuration

Step 3

Toggle on “Global Styles.”

Novashare Global Styles
Novashare Global Styles

Step 4

Scroll down and click “Save Changes.”

Was this article helpful?

Related Articles