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 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. I’ve recently installed it on at least 5 blogs.

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 button configuration

Sharebar Big & Small Button Configuration

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.

Adding the Google +1 Button to Sharebar

Google provides four button options via its +1 webmaster page.

Installation is easy on any ‘normal’ webpage.

<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>

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.

function google_plus_one_integration() {
	?>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
	<?php
}
add_action('wp_head', 'google_plus_one_integration');

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.

sharebar google plus one

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”.

For the small button you should use code for the horizontal count:

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="right"></script>

For the big button – displayed when the sharebar is rendered to the right or left of the page – you’ll need to render the Vertical Count button:

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>

Your results will look like this:

sharebar-linkedin

LinkedIn Button options

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:

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

For the small button, add:

<script>var fbShare = {
 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.

Links

For more information:

Plugin page on WordPress.org
Publisher’s blog
fbShare.me – alternative FB share button
Google +1 Webmaster page
LinkedIn Publisher Page

First Name:
Your Email Address:
 


If you liked this article, you may also like:

  1. Facebook Share Shortcode for WordPress
  2. Add Your Latest Google Plus Post(s) to Your WordPress Blog (or Generate a Google+ RSS Feed)
  3. Thesis and the Facebook Like Plugin
  4. WordPress Plugin: Lorem Ipsum Shortcode Generator
  5. The Hiztory Plugin – This Day in History on Your WordPress Website
About 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+.

Comments

  1. Chris Peters says:

    Great post! Ive been trying to find a tutorial regarding the sharebar for a while now. Thanks for sharing! haha
    Chris

  2. Great instructions. Thanks.
    I actually like better the sharing bar you have in your own blog. Which one is it?
    thanks

  3. Thanks! Your post helped me add Google+, which I was looking for, and it helped me fix the strange formatting issue with the facebook button. Thanks again!

  4. Thanks so much for these clear, straightforward instructions. I’ve wanted to use Sharebar but didn’t know how to add these buttons…now I’m all set! I’m grateful for the info.

  5. Thanks for this post. It helped clarify the need to add both the “small” and “tall” sizes in order for the +1 button to work.

  6. Thanks Marty, I just installed Sharebar today and thanks to you, have now implemented Google+ and LinkedIn

    Clearly written instructions always help, and you have done extremely well here

  7. Adding Google is good for my website just did it thanks a bunch.

  8. not run IE 7 :(

  9. Yeah, I’m appreciative of this clear, helpful, insightful post too :D I’m off to add G+ to my sharebar :D Thanks Marty!

  10. 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 again :)

  11. Thanks! Is there any way to include Buffer, Delicious and PinIt?

  12. Perfect, just what I was looking for! Solved the problem I was having with the Digg Digg bar as well!
    Thanks

  13. thanks a lot mate… really nice facebook share button ;)

  14. 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!

  15. Thanks for the Google+ integration tips Marty. I implemented it one my site with ease. Much appreciated.

  16. Thank you Marty
    I finally find the code for Facebook Share that I was looking for. Thank you very much for sharing :-)

  17. Please for help. How to format the content of the link shared on FB. I’ve tested Sharebar, but when I’m sharing on FB it gives me link in this form:

    http://shar.es/unLq3

    and not with the post title and it’s content

    please reply me on e-mail

  18. Can you tell me how can i use an form inside the sharebar?

    • The position:fixed; CSS will keep a div in a constant position to the browser window.

      You’ll want to use something like this (you could use sharebar but it’s not formatted or intended for such a task).


      <style>
      div.floating-form {
      position:fixed;
      background:#fff4c8;
      border:1px solid #ffcc00;
      width:150px;
      z-index:100;
      }
      div.floating-form a, div.floating-form h3 {
      display:block;
      margin:0 0.5em;
      }
      .input {
      border: 1px solid #006;
      }
      .button {
      border: 1px solid #006;
      background: #9cf;
      }
      </style>


      <div class="floating-form">
      <h3>Email Us</h3>
      <form action="">
      Name: <input type="text" class="input" />
      Message:<br>
      <textarea cols="10" rows="5" class="input" /></textarea>
      <input type="submit" value="Submit" class="button" />
      </form>
      </div>

      It’s outside the scope of this blog post so I’ll write something up soon.

  19. Thanks, Marty, that was very helpful. Kinda surprised that Sharebar hasn’t added Google+ yet, but your tutorial was easy to follow. Much appreciated.

  20. Thank you so much for this tutorial. I got sharebar working with google +1 perfectly and it looks great! Thank You!!

  21. 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.

  22. Hi,

    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

  23. Thank you… Problem solved!!!!

  24. thanks for your help to getting sharebar in wordpress working. without the function integration it wont work…

  25. Matter #1:
    i cannot get the alignments for the buttons come up properly and nicely side by side, instead they turn up like this:
    http://bildr.no/view/1396116

    how do i 1) remove the blue “dots” that somehow appear there and 2) how do i align the buttons so they are nicely next to each other?

    Matter #2:
    when i click on the “share”-button, it opens up a FULLSCREENED window, but instead, i want it to open up in a WINDOWED screen, not fullscreen… how and where do edit this..?

    Matter #3:
    my theme does not have a “functions.php”-file.. where do i input the g+1 javascript code then..?

  26. I want to add Skype button. Please let me know what is the code?

    Thanks

  27. Marleen says:

    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!

Trackbacks

  1. [...] corner of every post, another in the Sexy Bookmark cluster underneath each post and another in the Sharebar that floats to the left of the page. We have to ensure that it’s easy and convenient for a [...]

  2. [...] Had to add in linkedin and Google plus buttons manually tutorial via http://www.internoetics.com/ [...]

  3. [...] my favorite social sharing plugin for WordPress. It doesn’t support Google+, but this quick snippet of code solves [...]

  4. [...] is my favorite social sharing plugin for WordPress. It doesn’t support Google+, but this quick snippet of code solves [...]

  5. […] My preferred sharing communities are Twitter, Facebook and Google+.  Both Twitter and Facebook are options already included in the Sharebar plugin but Google+ needs to be manually added to the plugin.  The simple instructions to add Google+ can be found here. […]

  6. […] is my favourite social sharing plugin for WordPress. It would not assist Google+, however this quick snippet of code solves […]

Please leave a comment or question!

*