As a small business owner or a digital marketer, one of the challenges you’ll face is getting your amazing content or products seen on social media. It’s something I personally faced when working on my own personal website.

Although my website had links to different social platforms, but there were barely any shares. That’s when I discovered floating social media icons. These little icons stick to the side or bottom of your page, always ready for a quick share.

They are a great way to boost your site’s visibility and encourage visitors to share your content on social media. Luckily, there are many ways to add them to your WordPress site.

In this article, I’ll show you how to add floating social media icons in WordPress and a bonus trick to boost conversions.

Why Use Floating Social Media Icons in WordPress?

Unlike static social media buttons that disappear as users scroll down your content, floating icons remain consistently visible. This constant presence serves as a gentle reminder for visitors to share your content or connect with your brand on platforms like Facebook, X (formerly Twitter), Instagram, and Pinterest.

Besides that, when sharing options are easily accessible, users are more likely to take action. If users have to scroll back to the top or bottom of a page to find sharing options, then it can be frustrating.

But with floating social media icons on your site, you make it convenient for users to engage with your content without disrupting their reading experience. Plus, when you make sharing easier, you increase the likelihood of your content reaching a broader audience, potentially driving more traffic back to your website.

Your social media presence is also an extension of your brand, and floating icons help reinforce this connection. By maintaining a consistent visual presence across your website, you create a positive brand experience that users can trust and recognize.

That said, let’s look at how to add floating social media icons to WordPress.

Adding Floating Social Media Icons in WordPress

The easiest way to show floating social media icons on your website is by using WPCode. It is the best code snippet plugin for WordPress, and it offers a custom snippet for adding floating social icons.

This way, you don’t have to worry about custom coding or hiring a developer to add a new feature to your site. Plus, your customizations will remain intact even if you replace or update your theme in the future.

With WPCode, you can also easily insert PHP, JavaScript, CSS, HTML, and other types of code snippets. The best, you can manage them from a single place. Plus, it comes with a pre-built library of code snippets that you can use to add new features and functionality to your site.

To get started, you can use the WPCode Lite version because it includes the floating social media icon snippet. However, there is also a WPCode Pro version that offers more features like AI snippet generator, code revision, eCommerce integration, and more.

First, you’ll need to head to Plugins » Add New Plugin from the WordPress dashboard and search for WPCode in the search bar.

Next, you can click the ‘Install Now’ button and then activate the plugin. If you need help, then please see this guide on how to install a WordPress plugin.

Upon activation, you’ll need to go to Code Snippets » Add Snippet from the WordPress dashboard.

From here, you can search for the ‘Floating Social Media Icons’ snippet in the search bar. After that, simply click the ‘Use Snippet’ button.

On the next screen, you’ll see the custom snippet loaded in the code editor.

Next, you will need to enter the URL to your social media pages under the ‘// Define social media links’ section:

 // Define social media links
    $facebook_link = 'https://facebook.com/yourprofile';
    $twitter_link = 'https://twitter.com/yourprofile';
    $instagram_link = 'https://instagram.com/yourprofile';
    $linkedin_link = 'https://linkedin.com/in/yourprofile';

For example, you can simply replace the https://facebook.com/yourprofile part in the code with your Facebook page and https://twitter.com/yourprofile with your X (formerly known as Twitter) profile.

By default, WPCode will let you show Facebook, Twitter, Instagram, and LinkedIn social icons. However, you can add more social platforms to the code snippet.

Don’t forget to click the ‘Update’ button to save your changes.

Next, you can scroll down to the ‘Insertion’ section. Here, you’ll see where the custom code will be inserted.

WPCode will automatically add to the ‘Side Wide Footer’ of the website, but you can click the ‘Location’ dropdown menu and change the location. There is also an option to insert the code snippet as a shortcode.

Next, you can scroll down to the ‘Smart Conditional Logic’ section. If you enable conditional logic, then WPCode will only show the snippet when certain rules are met. For instance, you can show the social media icons on specific pages, user roles, logged-in users, and more.

Once you’re done, you can scroll to the top and click the toggle to make snippet Active.

After that, you can click the ‘Update’ button.

That’s it! You’ve successfully added floating social media icons to your website.

You can then now visit your website to see them in action. For instance, the social media icons appear on the left-hand side on our demo site, and they stick as the page is scrolled.

Bonus: Tips to Get More Clicks from Floating Social Icons

Now that you know how to easily add floating social media icons in WordPress, here are some tips to get more clicks and encourage users to promote your content:

• Placement: Think about where the icons are most effective on your website. You can experiment by placing them on different position and see what works best for you.
• Number of Icons: Don’t overwhelm your users with multiple social media icons. Choose a few of the most important social platforms for your brand.
• Responsiveness: Make sure those floating social media icons look great on all devices, especially mobiles. The custom code snippet by WPCode is responsive and will work on all devices, but keep that in mind if you change it.
• Loading Speed: While the method described here is fairly lightweight, consider keeping your plugins and extra styling to a minimum.
• Accessibility: Make sure the social media icons are properly labeled and accessible to users with disabilities.

I hope this article helped you learn how to add floating social media icons in WordPress. You may also want to see our guides on how to add code to the functions.php file and how to disable comments on WordPress.

If you need help, then feel free to leave a comment below. And don’t forget to follow us on X (formerly known as Twitter) and subscribe to our newsletter for all the latest updates.