How to Add a Floating Social Bar in WordPress? – HowsHost

How to Add a Floating Social Bar in WordPress?

Social sharing buttons are of great importance for any type of websites, and they make it easy for visitors to share your posts on many kinds of social networks. There are thousands of social media plugins within WordPress directory, but it’s difficult to find one that will actually work.

After much research and thought, we recommend you to use Floating Social Bar and Sharebar plugins for adding a horizontal floating social bar in WordPress. More plugin requirements and usages are available in below.

Method 1 – Using Floating Social Bar

Unlike other social sharing WordPress plugins, the Floating Social Bar only supports major social platforms, such as Twitter, Google+, Facebook, Pinterest and LinkedIn. To accelerate the page loading speed, it only loads social scripts when necessary. Plus, many resource sharing sites like WPBeginner and List25 are using this plugin.


  • A metabox to disable your social share bar on specific post/page.
  • Easy-to-follow options interface to drag & drop social buttons.
  • Free and professional support from plugin developers.
  • The 1.1.7 newest version with over 20,000 installs.
  • A template tag for custom use cases.

Free Download:

About Floating Social Bar

As usual, you shall install and activate the Floating Social Bar using WordPress uploader or FTP client. Once done, go to “Settings” > “Floating Social Bar” from the left sidebar menu. This settings page enables you to decide which social buttons will be added to the “Enabled Social Services” area. Just drag and drop one single or multiple buttons for social media.

Choose Your Social Buttons

Next, enter your social bar label and choose the post types to display these social bars. If you’re using all sharing buttons, then the title of your social bar won’t show up due to width constraints. Meanwhile, add the Twitter username without @ symbol.

Make Social Bar Settings

Below is a field to cache interval for updating stats. By default, this WP plugin gets the social sharing count from the filled-in APIs and stores it for every 30 minutes (namely 1800 seconds). It is not recommended to change this number, and this setting is enough to save your server resources. The remaining options give you the ability to set featured image for Pinterest, create a static social bar and disable “Socialite” as well.

Method 2 – Using Sharebar Plugin

The Sharebar is an eye-catching plugin that lets you add a dynamic and highly-customizable share box to the left side of a blog post/page. Once the webpage is resized below 1,000 pixels, the vertical share bar disappears and a horizontal box appears right under the post title. The supported social media buttons include:

  • Email.
  • Reddit.
  • Twitter.
  • Facebook.
  • Pinterest.
  • Stumbleupon.

Free Download:

About Sharebar Plugin

The first thing you should do is to install the Sharebar plugin like every other plugin. Upon activation, go directly to “Settings” > “Sharebar” to make personal customizations. Here, click on this “Settings” link, and decide whether only add sharing bar to posts or pages also.

There is also an option to set the box position along with the respective “Left/Right Offset”. Usually the vertical share bar displays big buttons; while the horizontal share bar only displays small buttons.

Settings for Sidebar Buttons

Below is the “Customize” section from which you can define the width of share bar, fill in Twitter name and select colors for Sharebar border and background. Be sure to choose the exact color that matches with the WordPress theme from a color picker. Remember to update all settings finally.

Choose Sharebar Color

Now, it’s time to decide which buttons to display on the website, and you can choose from multiple social networks other than Google Plus. To re-order the buttons, just click on the “Up” and “Down” arrow buttons. It’s possible to edit or even delete a button from the “Actions” area. In case you want to create new social buttons, just add the required code manually.

Reorder Social Buttons

An individual button can be inserted to any template by using the following configuration code:

<?php sharebar_button('size', 'name'); ?>

Here is a screenshot of how our social sharing buttons look like on the front page:

Example Social Sharing Buttons