How to Add a Floating Social Share Bar in WordPress

Adding a floating social share bar can greatly improve your content’s visibility and encourage readers to promote it on social media. A floating bar stays with the user as they scroll, making it easy to share content at any point. 

While running our own sites, we have seen the impact of floating social share bars in driving engagement and increasing traffic. By strategically adding this feature to our websites, we have observed a noticeable boost in social shares and a wider reach for our content.

Whether you’re running a blog or a business, adding a floating social share bar can be a simple way to encourage engagement and expand your online presence.

In this article, we will guide you through the process of adding a floating social share bar to your WordPress site. Our step-by-step instructions make it simple even for beginners.

Why Add a Floating Social Share Bar in WordPress?

Adding a prominent social share bar makes it easy for visitors to share your content on social media platforms like Instagram, Facebook, and Twitter. By keeping this bar visible while scrolling, you provide a convenient way for users to share your content at any time.

This can lead to increased engagement, traffic, and brand awareness. Plus, it can motivate users to leave comments and likes or follow your updates.

Other than that, a floating social share bar can indirectly improve your website’s rankings by increasing social signals. When users share your content on social media, it generates backlinks to your website, which can positively impact your search engine rankings.

Having said that, let’s take a look at how to easily add a floating social share bar in WordPress. In this tutorial, we will be discussing a code and plugin method. You can use the links below to jump to the approach of your choice:

Method 1: Add a Floating Social Share Bar With WPCode

If you are looking for a customizable and easy way to add a floating social share bar in WordPress, then this method is for you.

For this approach, we will be using WPCode because it is the best WordPress code snippets plugin on the market. For more information on this tool, check out our full WPCode review.

WPCode has an extensive library of pre-made code snippets, including a ready-to-use solution for adding a floating social share bar. This eliminates the need for custom coding and makes it easy to implement this feature on your website.

First, you need to install and activate the WPCode plugin. For more information, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, head over to the Code Snippets » + Add Snippet page from the WordPress dashboard and use the search box to locate the ‘Floating Social Media Icons’ snippet.

Once you do that, just click the ‘Use snippet’ button under it.

This will open the ‘Edit Snippet’ page on your screen. You will notice that the code snippet for the floating social share bar, with links to Facebook, Instagram, Twitter, and LinkedIn, has already been added to the ‘Code Preview’ box.

You can now use the code snippet as it is or scroll down and change the position, margin, width, background color, height, and border radius for the icons.

For instance, the background color for these social media icons is black by default. However, you can replace it with the hex code of a color that better matches your brand.

After that, scroll back to the top and toggle the ‘Inactive’ switch to ‘Active.’

Then, click the ‘Update’ button to store your settings and add a floating social share bar.

You can now visit your website to see the social media icons in action.

Here is how it looked on our demo website.

Method 2: Add a Floating Social Share Bar With a Plugin

If you don’t want to use custom code on your website, then this method is for you. That said, keep in mind that you won’t get as many customization options with this approach.

First, you need to install and activate the Floating Social Share Icons plugin. For details, see our tutorial on how to install a WordPress plugin.

Upon activation, visit the Floating Links & Social Icons page from the WordPress dashboard. By default, the plugin will automatically add floating icons that allow users to visit the home page, the next post, the previous post, the top of the page, and the bottom of the page and copy the current URL.

However, if you don’t need any of these functionalities, then you can toggle the switch off for these options. Once you do that, your changes will be synced automatically.

After that, head to the Floating Links & Social Icons » Social Icons page from the admin sidebar.

To customize your floating social share bar, simply toggle the switch next to the desired social media platforms. This will make the corresponding icons appear on your bar, allowing visitors to easily share your content.

Your settings will be saved automatically once you make the changes.

Then, you can visit your WordPress site to see the floating social share bar in action.

Bonus: Add a Floating Social Bar in WordPress

If you want, you can also add a floating social bar with follow buttons in WordPress.

This allows visitors to easily connect with your social media profiles and stay updated on your latest news and events. By making it convenient for users to follow you on social media, you can expand your reach and foster a dedicated community.

To do this, you will need OptinMonster, which is the best lead generation tool on the market. Plus, it comes with a premade template to create a floating social bar.

First, visit the OptinMonster website and sign up for an account. Remember that you will need to purchase the Basic plan because it includes the Floating Bar campaign type.

Then, head to your WordPress dashboard to install and activate the OptinMonster connector plugin. For details, see our tutorial on how to install a WordPress plugin.

Upon activation, you will see the welcome screen and the setup wizard. Go ahead and click the ‘Connect Your Existing Account’ button.

You can then follow the on-screen prompts to connect your OptinMonster account with WordPress.

Once that is done, head over to the OptinMonster » Templates page from the WordPress dashboard and select ‘Floating Bar’ as the campaign type.

Next, click the ‘Use Template’ button for the ‘Follow on Social Media’ template. This will open a prompt where you must add a name for the campaign you are about to create.

OptinMonster’s drag-and-drop builder will now launch on your screen.

This is where you can design your floating bar.

The plugin offers different blocks that you can simply drag and drop onto the template. For instance, you can add an image, text, button, and more to your social media bar.

To learn more, see our tutorial on how to add an alert bar in WordPress.

After that, click on the social media follow buttons within the floating bar. This will open some new settings in the left column.

Here, you can add the URL for your Facebook, Instagram, and Twitter pages accordingly.

Once you are done, switch to the ‘Publish’ tab from the top and change the campaign status to ‘Publish’. Then, you will need to click the ‘Save’ button and close the visual builder.

You can now visit your WordPress site to view the floating social bar in action.

We hope that this article helped you learn how to add a floating social share bar in WordPress You may also want to see our beginner’s guide on how to add social share buttons in WordPress and our top picks for the best social media plugins to grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.