Lightweight Social Media Plugin for WordPress. A Floating Box with Custom Buttons in a Breeze

Floating Box Social Media Plugin

In WordPress plugins directory, a group of social media related extensions is obviously the most popular one and the number of plugins is also impressive there. Dozens of talented developers offer hundreds of free plugins, it seems that all you have to do is to explore the possibilities and to make the right choice at the end.

Actually, the process is not that easy. We are often in a rush, trying to save some time for ourselves and, under these circumstances, we demand trillions of settings, instead of doing a proper research. However, each of us has different needs and the efforts to cover them all makes the plugin too heavy and too complex for general use.

If time is not an issue, we are looking for clean, lightweight and straightforward solution with an ability to expand existing functionality when needed.

To find such kind of plugin might be an exhausting task and you also need a separate WordPress installation for testing purposes. That’s why once in a while, I’ll try to keep you informed about the best/most promising plugins I have found and fully tested. I want my reviews to be informative and helpful, so you might expect some negative facts as well.

Meet Sharebar, a lightweight social media plugin for WordPress. Sharebar adds a dynamic and fully customizable vertical box to the left of a blog post that contains buttons with counters of popular social networking sites, such as FaceBook, Twitter, Digg, Buzz, Yahoo and etc.

Sharebar on the left of a blog post

By default, if the screen resolution is below 1000px, the vertical bar disappears and a horizontal bar appears under the post title. Big Buttons are used in the vertical Sharebar to the left of the post, while the Small Buttons are used in the horizontal Sharebar that appears under the post title. You can alter these default settings and have either big or small buttons on both toolbars.

Horizontal Sharebar under the post title.

Once installed, the plugin doesn’t seem to be very promising, because the back-end looks like this:

Sharebar Bug

It does look odd and you start questioning yourself if it’s worth going any further, but you should give this extension another chance. This minor bug can be fixed in a matter of seconds. The author has used floating elements before the table of available buttons and forgot to clear the values.

A quick fix would be to access Sharebar plugin files through WordPress built-in plugin editor, select “sharebar-admin.php” file and add the missing CSS clear property:

Sharebar missing CSS clear property

That’s it, no floating elements allowed on either the left or the right side:

Sharebar available buttons

As the author has overlooked such a simple thing, I’ve expected to bump into one or two major flaws later on and I was right. “Add new button” function doesn’t seem to work properly. You can add a new button without difficulty, but you can’t enable your new button at the same time you are creating it, despite the tick box available. The plugin just doesn’t save the setting and you have to go back to your “Available Buttons” table and edit the button one more time.

Sharebar add new button

Adding custom buttons, styling the existing ones, changing order, enable/disable and delete buttons are all very easy tasks with Sharebar. There is an ability to add buttons in posts or pages, or in both.

Floating box can be set to appear either on the left or on the right side of the blog and it’s great to have a background transparency option, but apart from that, sharing box has just a few styling options through the settings panel.

Sharebar settings

When Auto mode is enabled, the Sharebar buttons are added automatically. When Auto mode is off, you must manually add the code to your template files and it is very easy to do so:

Floating vertical toolbar (next to the post):

< ?php sharebar(); ?>

Static horizontal toolbar (under the post title):

< ?php sharebar_horizontal(); ?>

You can also call an individual button in any template by using the following code:

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

Alter the above code by entering the name of the button you would like to call and the size is either big or small. You can find the names of the buttons in “Available Buttons” table.

Most Common Questions/Issues:

Why doesn’t the vertical Sharebar appear next to the post?
First of all, make sure the plugin is properly installed and if you’re using manual mode, the Sharebar code has been added to your single.php template. If you’re using auto mode, verify that the Sharebar list is being added to your post by checking the source code. If it’s not in the source, double check the plugin settings and implementation of the code.

How do I get the vertical toolbar to appear at the right side of my blog?
Play with the right offset in the plugin’s settings page – this should include the total width of your sidebar and any other elements which are between your post and the right edge of your blog.

Sharebar floats in front-end and floats in back-end, but when you set your eyes on flawless front-end performance, back-end defects are not that influential. I highly recommend you to try Sharebar.

I would also like to draw attention to additional 3 plugins, that allow you to add a floating sharing box to your WordPress blog. All the plugins are very different, so I hope there is a possibility, that one of them will suit your individual needs.

Digg Digg

Digg Digg Social Media Plugin Front-end

With Digg Digg you can integrate popular social buttons into WordPress easily, display counters for social media shares to Digg, LinkedIn, Reddit, dDone, Twitter, Facebook, StumbleUpon, Delicious and dozens of others. Facebook Like button supports multiple languages.

Plugin has rich button layout customization options, flexible button display controls. You can enable lazy loading to increase website’s performance. Choose between left or right scrolling effect. Integrate social media buttons in post excerpt.

Smart Sharing

Smart Sharing Social Media Plugin Front-end

Smart sharing adds a floating box with social media buttons in single posts only. By default, you can pick between retweet, facebook, digg, and stumbleupon. But you are not limited to these choices because there is an option to add your own custom codes.

This plugin applies B.F Skinner’s Positive Reinforcement theory to social media marketing. Normally buttons are placed either at the top of the post, or the bottom of the post. While both of those positions are OK, they are not the best.

If you place them at the bottom of the post, then you are expecting that the user reads all the way to the bottom. Sometimes users like the post, and they don’t read full articles. This plugin adds a small floating box which scrolls down with the user, so they can vote whenever they are done.

Social Slider

Social Slider Social Media Plugin Front-end

This plugin adds links to your social networking profiles in a box floating at the left side of the screen. By default, the box is attached to the left side of the browser window, but you can easily put it on the right side. Social Slider supports many social sites out of the box and allows you to add an unlimited number of other sites with custom icons.

Social Slider plugin can be easily customized. You can set such options as:

  • Display mode – you can choose between several display modes
  • Position of the box – the blog’s owner can set on what height the box will be displayed
  • Color scheme – choose between two color schemes (light and dark)
  • Transparency – an option of setting the transparency of the Social Slider box
  • Speed of expanding – after hovering, Social Slider can expand smoothly or show up instantly
  • Mobile browsers – you can disable Social Slider for mobile browsers

When I was looking for a social media extension, I had very specific requirements. For me it was necessary to have buttons with counters (not just simple icons), automatic horizontal toolbar mode for users with low screen resolution and ability to add custom buttons. Considering only these essential features, I’ve made a comparison table below this paragraph.

No. Plugin Name Buttons with
Counters
Adding Custom
Buttons
Horizontal
Toolbar Mode
Last Updated
1. Sharebar Check Check Check 23.02.2011
2. Digg Digg Check 17.01.2011
3. Smart Sharing Check Check 07.04.2010
4. Social Slider Check 02.04.2011

If you are a DIY enthusiast, I’ve got something for you. There are loads of great tutorials on the World Wide Web, that will guide you through the process of adding floating social media buttons and, because WordPress is so popular, you can often find a tutorial for each of the theme frameworks as well.

For a self-hosted WordPress installation, I recommend you to refer to Web and Designers article. If you are using Blogger.com services, adding floating social media buttons is even more easy task for you. Just follow the instructions on Hub Pages and you should be fine.

I’m interested:

What are your requirements for a social media plugin? Which social media extension is your favourite? Have you ever tried Sharebar?

Published by

Suspicious Mind

I was born to criticise. I see faulty premium themes and hidden costs. Misleading product description can not pass the censors. Actually, I am not a real person, I'm a state of mind :) Please refer to Paulius Rasytinis for further details regarding this phenomenon.

42 thoughts on “Lightweight Social Media Plugin for WordPress. A Floating Box with Custom Buttons in a Breeze”

  1. Pingback: Lightweight Social Media Plugin for WordPress. A Floating Box with Custom Buttons in a Breeze | Community News | TutsList
  2. Awesome post, the CevherShare plugin is fantastic! For readers of this post, to easily find the CSS location, hit Control –> F then search for “”. That will take you right to where Paulius posted the screenshot. Then add “” where directed and you are good to go.

  3. Hi
    great tutorial. I implement this but notice the sharing buttons do not align in the center of the box (or at the top) properly on my site. Do you know of any way to fix this?

    1. Hello! I’m not sure, but I guess it’s related to how your theme treats lists and their elements, because CevherShare has a list structure. First of all, you could investigate CSS with firebug for FF or use built-in developer tool for Google Chrome, trying to find the right CSS property(ies) that causes the problem. You could also try changing the width of CevherShare toolbar in the settings panel. If the toolbar is too narrow it can easily cause the distortion. The last but also a good option I can think of is to style the buttons one by one. It’s easy to apply styles to individual buttons with CevherShare. Good Luck! πŸ™‚

  4. Hello,

    CevherShare looks amazing, and would love to add it to my wordpress blog. The plug-in seems to invariable. Does anyone know where I could find the zip, or could share it with me if they have it?

      1. Great, thank you for the info. I’ll try sharebar right away. Funny thing is I found Cevher Share.zip on some german site. I’ll probably go with the official version just to get the updates. Again thank you for the post overall as it’s just what I was looking for. Keep up the good work. Also you can check out my site: applenapps.com if you’re into Apple Apps πŸ™‚

      2. Np, I hope it will sit well in your site and I’ll also update this post in the next few days with the original plugin instead, ability to update is a must, we all know that πŸ™‚ I have Ipod Touch, so I’ll take a closer look at your site πŸ˜‰

  5. How to fixed position like on this site?

    and which code for Delicious (with counter)?

    1. Valery, it depends on the theme you are using, each case might be different. Please refer to one of my previous comments, where I gave some basic tips of how to investigate the problem and do the styling.

      I don’t use Delicious with counter, Delicious doesn’t officially support that. There are some scripts though, they do the counting through third-party servers, but I do not recommend using them.

  6. Firstly, awesome blog! It is very well laid out and the content is excellent.

    I believe Cevhershare is actually a rip-off of the original plugin, which is called Sharebar. Hence the plugin not being available any more. Unfortunately, Sharebar has been updated many times, and it has lost the FB share button.

    What floating plugin are you currently using?

    1. Thank you for your thoughts, Will.

      I’ve noticed, that Cevhershare is the same plugin as Sharebar from the beginning, so I tried them both to discover if there are any differencies. Unfortunately, they had exactly the same bugs in their code, except, CevherShare was slightly lighter with some unnecessary features throwed away. That was the main reason why I chose Cevhershare over Sharebar. I’m still using it.

      If FB share button is no longer available in Sharebar, it’s not an issue, because you are able to add it manually by creating a new button.

  7. Thanks for the FYI. I am going to try and make the switch to Sharebar now.

  8. Great post, thanks for all the info! Any idea how to fix the like icon so it’s not cut-off?

    1. There’s a couple of methods you could use as a solution to your problem. First of all, you should try widening your ShareBar box by customizing plugin’s settings. If you are not happy with what you get after that, you can try styling each individual button by editing their code.

  9. Paulius, the “Like” box is cut-off on your site as well…I checked on my Windows laptop and it is displayed properly for both your site and mine. But on a 27 inch Mac it’s cut-off. There’s a compatibility issue, it’s not a width issue. Anyone know? Thanks!

  10. Good day! Thank you for sharing some tips! You’ve got a very useful plugin..Hope to see more of your posts!

  11. Nice plugin dude.It looks awesome. I am keep on looking the websites page source to know the name pf this plugin finally got it. Keep up.

  12. Hi suspicious mind,

    Thanks for the great detailed post. I am wondering, exactly which floating sidebar are you using right now on the left of this page? It is very nice. Thanks for your help!

    1. Hey John, I’m still using CevherShare plugin, because I did a few modifications on this plugin and now I do not really have a desire to switch to perhaps more reliable and more frequently updated ShareBar πŸ™‚

  13. Hey, awesome post. I love the way you laid out the best of the best and compared your selection criteria.

    I found a few of the scripts to add to my Sharebar, but didn’t find Delicious right away. Can you share with me the script.

    Cheers,

    Mike

    1. Hi and thanks for your comment. As you can see, I don’t have a counter for Delicious. It’s basically because it doesn’t have an official counter and I don’t want to use any third-party scripts. The button you see on wpdressing.com, I made it myself and I can give you some tips of how to make a similar one if you want..

  14. We can mention WP-Socializer here too! Very good tool, just lacks the option of translation to different languages.

  15. i recently created a blog at wordpress and confused with so many plugins are there , so can you suggest me good one ?

    can i go with Dig Dig ?

    1. “Dig Dig” is a bit bulky, but it’s still one of the best social plugins. Give it go and see if it fits your individual needs or try something else.

  16. Hi, I have been searching and working for a long time to get my sharebar/cevhershare to look exactly like yours here and it is useless. I cannot make a pin it button with a counter or even a simple one that would align properly. Please help!

Comments are closed.