How to Add a Horizontal Floating Social Bar in WordPress

Social proof is an important part of any online business, and by using social proof in the form of social media icons, you can help users make the right decisions. It has been proven numerous times that when using social proof (it could be anything like social media icons, testimonials, reviews and comments,) you get better conversion rates.

Social proof is not only useful for landing pages, but also for blog posts. Now, if you’re using WordPress to power your site (or landing page,) you know there are dozens of social media plugins available on the internet.

Most of them are fantastic solutions, but some of them aren’t optimized for speed or performance.

Recently, I found a nice social floating plugin called Floating social bar. It’s a handy, and lightweight plugin that brings together social sharing and social proof. In short, just about any site could use a plugin like this.

Why Does Your Site Need a Horizontal Floating Social Bar?

Why not just place static social sharing buttons on your website? Let’s take a look at the primary reasons your site needs a floating social bar.

  • A floating social bar improves your social credibility, since people can see how many others have shared your posts and pages. Basically, it’s kind of like convincing people to do something because so many others have done so already.
  • It always stays on the screen, remaining in view for your users to remember that they should share your posts.
  • It doesn’t take up too much real estate on your website, whereas static buttons can take up almost the entire screen once someone scrolls to them on a mobile interface.
  • Floating bars are generally built to have no effect on your site’s speed.

How Does the Floating Social Bar Plugin Standout from Competitors?

If you’re somewhat experienced with WordPress, you most likely know that plenty of floating social bar plugins are available for you in the WordPress repository. So, what’s the difference between those and this one? How does the Floating Social Bar Plugin standout from the other solutions on the market?

  • As the name suggests, it is a horizontal social floating plugin, and by default it supports five major social platforms. You can add share buttons for Twitter, Facebook, Google+, LinkedIn, and Pinterest.
  • Since it only focuses on the five major platforms, you can quickly activate the plugin, decrease clutter and prevent your site from looking like one of those sites that has dozens of share options, which is pointless and distracting.
  • The plugin is lightweight and works well with custom post types.
  • The floating function grabs user attention, since it follows along when someone scrolls down the page.
  • It uses the socialite script to only load social buttons when the user moves their mouse over the button. This way it maintains fast page load speeds, as if you didn’t install a plugin at all.
  • The Floating Social Bar plugin is created by two prominent community authors, Syed Balkhi and Thomas Griffin. These folks are known for keeping the plugin updated and for provided quality support in case you have any problems when installing the plugin on your own WordPress sites.
  • At the time of this article, the Floating Social Bar plugin has over 20,000 active installs and 70 reviews with an average rating of 4.5 out of 5 stars.

Keep reading to learn how to add a horizontal floating social bar in WordPress with the Floating Social Bar plugin.

How to Add a Horizontal Floating Social Bar in WordPress

Step 1: Install the Floating Social Bar Plugin

Navigate to Plugins > Add New in your WordPress dashboard. Search for the plugin, click on the Install button, then activate it to make it functional on your site. If you’re familiar with installing plugins in WordPress you can download it from the WordPress directory and upload it manually.

floating social bar

Step 2: Manage Your Social Bar Settings

After the plugin activation, go to the left hand side of your WordPress dashboard. Locate the Settings tab and scroll over it. You should see an option called Floating Social Bar, which you can click on to adjust your settings.

The option page gives you the ability to choose which social media buttons you want to add. For example, if you look at the Available Social Services header, it reveals the five options of Pinterest, Twitter, Google+, Facebook and LinkedIn.

If you click and drag one of these modules, you can drop it in the area that says Enabled Social Services. Feel free to drag all five of the social services to provide the maximum amount of sharing options.

Note: Keep in mind that the order in which you place the social sharing modules is the order in which they will show up on the frontend of your site. So if most of your content is shared on Facebook, consider placing that as your first social sharing button.

Floating social bar plugin

Step 3: Label the Social Bar and Indicate Where You’d Like it to Show Up

If you scroll down a little further on the page, another settings box is available in a table format. The table headers read Setting and Value.

If you’d like to name your social bar or include a call to action, type in some text to make that happen. For example, I wrote “Share This Post!” as my title.

The Show Bar on Single setting is a list of options asking you where you’d like the floating social bar to show up on your site. For example, I want the bar to popup when users land on posts and pages.

social bar label

Step 4: Link to Twitter and Change Update Intervals

One social media platform requires an additional setting change. This platform is Twitter. One huge benefit of Twitter is that when people share your posts, they can mention your username, allowing others to find your Twitter page, while directly contacting you so that you can thank them or interact with them in some way.

twitter and intervals

Therefore, you must indicate what the name of your Twitter account is. Go to the Twitter Username field and type in your username. Remember to remove the @ symbol for this to work. For example, I punched in wpkube, since that’s what the username is without the @ symbol.

Right below the Twitter Username field, you find another field called Interval to Update Stats. This is how long it takes for the system to calculate how many shares have been accumulated from each social network. By default, the plugin updates your stats every 30 minutes (or 1800 seconds,) but personally I like seeing the stats come up a little quicker, so I would recommend lowering this number a bit.

Step 5: A Few Extra (Yet Important) Settings

Let’s say you include Pinterest on your floating social bar. If a featured image isn’t detected in the blog post people are trying to share on Pinterest, a problem arises. They will attempt to share the post, but no image shows up on Pinterest, which makes the link useless. The Pinterest Image Fallback field lets you paste in a link to an image that can be used if no featured image is available. I would recommend a site logo or something that represents your blog or company.

pinterest static and socialite

The next field is titled Make Social Bar Static. If you tick the check box, the social bar will not float when users scroll down on posts and pages. Feel free to test this out, but the floating function is one of the huge advantages of using this plugin, since it keeps your sharing buttons in view no matter where your users go.

Finally, the last setting is the Disable Socialite field, which disables the script that only loads the social buttons when users scroll over them. Once again, I would leave this field blank, since it’s one of the main reasons this plugin is so lightweight, keeping your site fast.

Step 6: View the the Floating Social Bar in Action

in action

To see the social bar in action, go to the frontend of your website and scroll down the page. The social bar should float along as your move down the page, and you can also click on one of the social media icons to share a certain page or post. The cool part is that next to each social icon a number shows up to reveal how many people have shared the page or post, adding to your social credibility and prompting others to read and share the item as well.

Over to You…

The reason I like the Floating Social Bar plugin is because it provides a super quick way to get those trusty social sharing buttons on your site. Solutions like Digg Digg and AddThis offer useful solutions, but they aren’t nearly as user-friendly. The Floating Social Bar plugin only takes a few minutes to implement and even the most beginner of WordPress users can figure it out.

It also narrows down the customization options for you, focusing on the top five social platforms. Some might argue this is a disadvantage, but personally, I feel like most sites go overboard with the social sharing buttons. There’s hardly any reason to have dozens of share buttons to social networks that no one ever uses. This cuts down on the clutter and optimizes the chances of users sharing your content on the top networks.

That’s it for learning how to add a horizontal floating social bar in WordPress, so drop a line in the comments section below if you have any questions. Have you had a chance to try out the Floating Social Bar plugin? If so, how does it compare to other options on the market?

  1. Sherryl Perry says

    Thanks so much for this Dev. I would love to get rid of Digg Digg. It doesn’t play well with my version of Thesis. (I can’t display LinkedIn without it getting funky looking. )

    BTW – For some reason, the buttons aren’t floating for me in Chrome (Version 28.0.1500.95 m). It works well in Firefox though.

    • Devesh says

      Glad I could able to help you, Sherryl. I haven’t tested the floating bar on thesis but I’ll make sure to let the plugin author know about this.

      I just tested the plugin on chrome v28 and it seems to be working fine. I guess, it might be conflicting with another jQuery script that either your theme or another plugin uses.

      Thanks for stopping by.

      • Sherryl Perry says

        I checked it again yesterday and it was working fine. Maybe it was a conflict on my side. It’s really great! I tested my load time before and after installing it and it cut .46 seconds off. Plus, it’s cool! Thanks so much. I’ve shared it where I could.

    • Syed Balkhi says

      Sheryl,

      Please send in a bug report, so we can take a look at it. We have tested this on various environments to make sure it works fine.

  2. Arafin Shaon says

    I’ve installed it before reading this post because like you i also follow wpbeginner @Devesh! I got to know about this cool plugin there :)

Leave a Reply

Disclosure: This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.