How to Add a Floating Social Bar in WordPress
Social sharing buttons are of great importance for any type of website, 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 below.
Method 1 – Using the 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.
Features:
- A meta box to disable your social share bar on a 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: https://wordpress.org/plugins/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.
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.
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 images for Pinterest, create a static social bar and disable “Socialite” as well.
Method 2 – Using the 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: https://wordpress.org/plugins/sharebar/
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.
Below is the “Customize” section from which you can define the width of the share bar, fill in the 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.
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.
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.