ShareThis Hovering Buttons with Google+

Here’s how you can add the ShareThis Hovering Buttons to your site just like on the ShareThis homepage.

I was searching the net looking for a new social share plugin, and although I didn’t end up using this, it’s still pretty cool. I was also surprised at how little information there was for this on the ShareThis website and how hard it was to find, which is why I’m sharing it.

First head to the Hovering Buttons page sign up (you’ll need to sign up to get your unique publisher key) and select your options. When you’re finished click “Get the Code”
ShareThis Hovering Buttons Code

The first section of the code should be added directly after the opening head tag in your header.php.

<head>

The second section should be added to the footer, directly above the closing body tag.

</body>

This is pretty much all you play at Casinoscapital online casinos need if you just want the default buttons, but it’s also nice to have a Google+ button, so we’ll add that like this.

In the second part of the code, you should see a line something like this.

{ "items": ["facebook", "twitter", "linkedin", "email", "sharethis"]}};

Change that to

{ "items": ["facebook", "twitter", "plusone", "linkedin", "email", "sharethis"]}};

Notice the “plusone”, added to the line? If you save the file and check your site, you’ll notice the position of the button is off, this is a known bug, but it can be easily fixed with a bit of CSS.

Open your style.css and at the bottom add

.st_plusone_large {
     margin-bottom: -15px !important;
     margin-top: 10px !important;
}

Now refresh your site, all the buttons should display properly. You can add more buttons, just check the ShareThis website for names of supported sites.

Comments

    • says

      I just stuck with the same plugin i was using http://wordpress.org/extend/plugins/only-tweet-like-share-and-google-1/
      It seemed like every plugin I used had something I didn’t like about it, usually the way the buttons were layed out.

      The shareThis plugin looks good, but for some reason they refuse to add an option that disables the buttons on the front page.
      That’s why I looked into the hover bar, less clutter. The only thing I didn’t like about the bar was, it cannot show the number of shares.

  1. says

    @Eddy, I checked the ShareThis forums and no, there isn’t a way to customize the way the links open in a tab. I think adding new buttons is about as much as you can do right now. I’m sure they’ll add more options in the future, I believe it’s fairly new.

  2. says

    if you see again, there no such thing on second code.. here it is.

    var options={ “publisher”: “xxxxxxxxxxxxxxxxxxxxxxxxxxx”, “position”: “left”, “ad”: { “visible”: false, “openDelay”: “5”, “closeDelay”: “0”}};
    var st_hover_widget = new sharethis.widgets.hoverbuttons(options);

    how am i can change to this

    { “items”: [“facebook”, “twitter”, “plusone”, “linkedin”, “email”, “sharethis”]}};

    help me out :-)

    • says

      Hi Fixx, it looks like maybe they changed the code slightly. But I was able to get it working. Try this

      Before you click “get the code” where it says “Share Buttons” then twitter, facebook, Linkedin, email. Uncheck the email one, then click get code. The code will now display as it did before, and you can re-add the email easily.

Leave a Reply