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.
Post types
You also need to set the post types where you want your shortcode to display.
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.
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.
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.
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.
Post types
You also need to set the post types where you want your shortcode to display.
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.), or the follow buttons block, 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.
Step 2
Click on the “Configuration” submenu.
Step 3
Toggle on “Global Styles.”
Step 4
Scroll down and click “Save Changes.”