26

Jul

Sharebar Plugin for WordPress… and how to add Google+

In the process of writing up a post about a bunch of WordPress plugins that I use and recommend, I decided to write about the Sharebar plugin in isolation of the others simply because (apart from the fact that it’s awesome), by default, it excludes some important social networks that deserve inclusion.

What is sharebar?

You’ll notice that I have a hovering bar to the left hand side of this page (assuming I’ve kept it) that renders share buttons to various social networks. It hovers at the top of the page as you scroll down a post – meaning that it’s always in view, and it’s always offering encouragement for your readers to share. If the page is resized below 1000px (default), the vertical bar (to the left or right of your page container) disappears and a horizontal sharebar appears under the post title.

I’ve seen about a dozen variants of this plugin (mainly paid premium products) – but Sharebar is excellent, and it’s free.

Installation

Install and activate Sharebar as you would any other plugin. You can download sharebar directly from WordPress.org here

Configuration

The plugin offers a number of social share buttons by default. For each social network there are two button options: one ‘large’ button that renders when the sharebar is to the left or right of your page container, and a ‘small’ button that will be displayed under your title should your page be wider than 1000 pixels.

Sharebar Big & Small Button Configuration (Click for larger)

There are a number of configuration options available via the ‘Settings’ tab that enables you to customise colour and presentation.

Adding additional buttons

The author has indicated via his ‘to-do’ list that he’ll add more buttons, but you’ll always want a different combinations of buttons that are included by default. The Google +1 button, for example, is not yet an option. However, the plugin does have functionality that permits you to add additional share buttons, assuming the button code is available from the platform you wish to add.

If we want to install this code into a WordPress blog, the first thing you will have to do, as per Google’s instructions, is add the JavaScript to the head of your blog. You’ll have to copy this code into your theme’s functions.php file or, if you have one, into a custom function file.

Now you must add Google code for both a large and small button into a textbox that’s presented in the Sharebar button configuration options.

Configuration Options for the Google +1 button

Note that I’ve used the tall and small options. Once updated, the Plus One button will be available for inclusion in the sharebar.

Adding the LinkedIn Share Button to Sharebar

LinkedIn also have a share button that enables readers to post information to their LinkedIn profile. As with the Google Plus button, it’s easily integrated into Sharebar. Navigate your way to the Sharebar options (under Settings) and click “Add New Button”.

Alternative Facebook Share Button

The clever chaps at awe.sm have built an alternative share button for Facebook for those that want a button that looks a little different. It’s my preferred option because the native FB button tends to cause some formatting problems. It’s also highly configurable and integrates well with other services (such as Google Analytics).

For the big button, add:

1

<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

For the small button, add:

1

2

3

4

<script>varfbShare={

size:'small',

}</script>

<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

You can see the results of the alternative FB share button on the sharebar to the left of this page.

About Marty

Marty is a passionate web developer from Sydney, Australia. He owns about 600 websites and makes a healthy living from working the web. As a day job, he works as a pilot for an international airline. Follow Marty on Twitter or Google+.

Thank you so much for this information. I have been trying to get the plusone tall button in my sharebar for the longest time. You made it easy and to the point. I will not be selfish, I will share this post.

Thanks Marty, I just installed sharebar on my blog and this helped me add the Google+1 button. I use a wordpress theme called headway so added the asynchronous script in the footer and all works fine. Cheers!

Love this plugin!! I am trying to remove the sharebar from my print style sheet. I’ve tried many different combos but none seem to work. Any thoughts on what code i need to add to my print.css so that the sharebar bullets and wording do not appear in a print preview/print version of my site.

The Facebook Share button creates a really long space (or gap) underneath it. I’ve tried to move it up the list to see if it changes it but it just puts a massive gap between it and the next button. I’d create a link to share but I cant leave it live on the site. Any idea how I can ‘close off’ the button code so it doesnt leave this long gutter. Thanks.
Jonnie

Marleen

Thanx, this is really helpful. Sharebar was the only floating one i found that is also responsive, but initially i was put of because it doesn’t include google+ and linkedin. I didn’t know it’s this easy to add those yourself. Thanx again!

Hi Marty
I know this is an old post, but I have an issue with the Big button for the Facebook share and I can see you have the same issue here in this blog. It is just one big blue square. Any idea on how to fix that? For the time being I have removed that button on my sharebar.

Search Internoetics

Find us on Facebook

Internoetics on Twitter

Sponsored Link

Internoetics on Google+

Internoetics

31st July 2015: A server upset is causing us to restore certain parts of this (and other) websites over the next week; this includes a few articles that may include outdated shortcodes. If you encounter any errors, please let us know.