Shareaholic Tutorial: How to add a cool floating bar to your WordPress blog

This is a guest posting from Dani. A great tutorial on how to use Shareaholic plugin to create a eye-catching floating bar. This is pretty similar with my WordPress tutorial, building a custom Hello Bar.

Make no mistake; floating notification bar can increase your conversation rates multiple fold (if you do it correctly).

So you want to implement the Shareaholic buttons as a vertical bar that follows along with your article, but you are not much of a programmer. No problem! Shareaholic doesn’t yet offer vertical floating buttons but with a little know-how we can make them ourselves.

(Update: Shareaholic now offers Floated Share Buttons to all of its users! Installation is 1-click easy for this new feature too.).

This tutorial style article will show you Step-By-Step how to accomplish just this. All you need to do is follow each step carefully.

Why Shareaholic?

  • Beautiful buttons that you just can’t resist to click on.
  • Track exactly how many shares you get and which buttons convert best.
  • A cool related articles app that shows articles similar to the one being viewed.
  • One single plugin for all your social buttons. Puts less strain on WordPress, increase your loading time.

Don’t know what Shareaholic buttons look like? I am sure you’ve seen them before when browsing your favorite blogs.

Examples of Shareaholic social buttonBefore we start though, head over to Shareaholic.com and create your account. You’ll also need to install their WordPress Plugin.

This tutorial requires both Genesis and Dynamik Website Builder installed with your WordPress blog. Alternatively, you can also use the Genesis Extender. I believe the interface is the same.

Well, let’s get started with…

Step 1 – Getting Things Ready

In this step we will be creating a New App Location and acquiring your new apps’ code snippet. Login to your Shareaholic.com profile and click the “Publisher Tools” button. Here is a screenshot if you can’t find it. It’s the first button to the right next to your username.

Shareaholic guide

On the next screen you’ll see your Site Tools and your App Location. Scroll past them, at the very bottom you’ll find a button “Add App Location” – click it and select “Share Button” from the dropdown menu. You’ll be taken to the next page where you’ll need to fill your new share button information.

If you want the exact same buttons as I have, fill in the fields like this:

  • Name: Sharebar
  • Theme: Flat Circle
  • Heading: No Heading
  • Leave ‘Show More Options’ on
  • Layout: Vertical
  • Size: Normal
  • Counter: Side
  • Alignment: Left

Once you are satisfied with your buttons’ appearance press the “Save Settings” button and you’ll be redirected to the previous page where you’ll see a new App Location called Sharebar or whatever you typed during the previous screen.

Shareaholic settings

Click the button encircled with the red circle above and copy the code given into a text file on your computer. We are going to need it later.

Step 2 – Installing the buttons on your site

Now that you’ve created the new buttons we are going to do two more things; Create a conditional and a new hook box to that will hold your buttons in place. Don’t worry – I am going to show you Step-By-Step how you can do this.

Let’s start with the conditional. A conditional will be checked if it validates before the execution of the code. Meaning, your buttons will display only if the condition is met.

Head over to your WordPress admin > Genesis > Dynamik Custom, and select Conditionals.

Dynamik website builder tutorial

Now, select the dropdown menu the arrow is pointing to and choose “Is Single Post”. Leave all other settings as it is shown above and click on the “Save Changes” button at the top right corner.

You just told WordPress to display your button only if the reader is on an article page.

Next, we need to create a new Hook Box to hold your Shareaholic Buttons.

Custom hooks on Dynamik Website Builder

It is important here that you follow my instructions carefully otherwise this will not work the way it is intended.

  1. You remember the Code Snippet we copied from Shareaholic.com? Copy and paste that code in the text box shown in the image above AND press the “[do_shortcode]” button.
  2. Before the code in the text box type <div id=”sharebar”> and after it </div>. Match the rest of the text EXACTLY as it is shown in the image above.
  3. In the name type sharebar and select “genesis before” from the Dropdown menu next to the name field. Make sure the dropdown menu after Priority is set to “Hooked”.
  4. From the Conditionals dropdown tick on “Is Single Post”. (NOTE: You can select more than one conditional if you want your buttons to appear on more than one place, but you need to create the conditional first)
  5. Press the “Save Changes” button to save your settings.

If you load your website now, you’ll see the Shareaholic buttons displayed before your website. Of course, we don’t want them there, so we are going to move them with some CSS.

Step 3 – Adding Some CSS for Positioning

Almost there. All we need to do now is add some CSS. Don’t worry, I will give you the exact code you need to type and I will tell you how to use it.

Firstly though, go to your WordPress Admin > Genesis > Dynamik Custom > CSS and tick on Custom CSS together with the Editor Only option.

Load your website and you should see a button on the top right corner “Show/Hide CSS Builder. Press it and type the following code EXACTLY as shown in the image below.

Custom CSS builder plugin

NOTE: You will need to measure your main content area width in pixels and input the width in the first block of code. Just replace width:1119px with whatever value you have. There is a nifty extension for Chrome, Firefox, Safari and Internet Explore called MeasureIt. You can use it to easily measure your main content area width.

NOTE: If your main content area is not centered on your page, you’ll need to adjust the code above further. Replace in the first block of code margin:0 auto; with float:left or float:right; depending on your case. Next, you’ll need to adjust the last block of code to align the buttons themselves right or left. Just replace left:-70px with left:0; or right:0;, again, depending on your case.

IMPORTANT: The buttons are aligned to your main content width – NOT to your web browser window. A value of left:0; will align your buttons to the left edge of your main content. A value of left: -10px; will make the buttons appear outside your main content area.

The top value sets how far the buttons should appear from the top of your browser window. Adjust per your liking. The best thing to do is just play around with these values (top, left, right, and bottom) until you get the result that you like.

Download resources: Shareaholic, Genesis Framework and Dynamik Website Builder.

I hope you now have some great buttons to show. If you have any questions or something is unclear, just leave them in the comment section below and I will get back to you.

Dani Ivanov
Dani Ivanov is the founder of Blogging With Dani. Born in Bulgaria and raised in Netherlands. He is very passionate about online marketing, blogging, SEO and social media. He also holds a bachelor degree in Business Administration and is a firm believer in self-education.
Headline Name: Email: subscribed: 210 We respect your privacy Email Marketingby GetResponse

Our Sponsors

Dynamik Website Builder
  • metz

    Nice nice! Love it!

    I am eager to have mine too. Actually, I am having a hard time searching some ideas on how to add a bar on my WordPress account. You know, not a savvy yet. :) Well then, thanks! Good step by step procedure. I found this post shared on Kingged.com, the Internet marketing social bookmarking and networking site, and I “kingged” it and left this comment.

    • http://reginaldchan.net Reginald Chan

      Hi Metz,

      Thanks for commenting. This contribution was done perfectly by Dani and I really appreciate it.

      Glad you find this useful!

    • http://www.bloggingwithdani.com Dani Ivanov

      Hello Metz,

      Glad you like the post. Let me know once you implement your buttons. I’d love to check them, out. If you have any questions, just ask.

      Thanks,
      Dani

  • http://avgjoegeek.net Jason Mathes

    Couldn’t I just create a custom function call to do this instead of having to get the Extender plugin? Looks like it should be simple enough to do. I have always loved Shareaholic but hated the fact they never had a floating sharebar. Thanks for the tutorial!

    • http://reginaldchan.net Reginald Chan

      Hi Jason,

      Personally, I know it’s possible (right?) but my knowledge in these CSS stuffs are pretty limited. So, using Genesis Extender is definitely a great help.

      Actually I had used Shareaholic once until date but Dani’s post really opened my eyes. Haha!

    • http://www.bloggingwithdani.com Dani

      Hello Jason,

      If you can edit your WordPress files to load the HTML code before your header/outer outer wrapper, then I guess you can skip the extender plugin. However, how would you approach this , is beyond my current skills.

      You will need to know at least the basics of PHP and WordPress engine. Perhaps you can ask for some help/advice on a forum. I am sure someone will point you in the right direction.

      Thanks for reading this article,
      Dani

  • suklambar

    Nice article Reginald , some days ago i searched lots of time for that type of social media voting floating bar for my blog. shareaholic floating bar is good looking for each type of blog.
    thanks. keep sharing . . .

    • http://reginaldchan.net Reginald Chan

      Hi Suklambar,

      Thanks for commenting! Indeed it is a great article by Dani.

      Appreciate the kind words :)

    • http://www.bloggingwithdani.com Dani

      That was my issue too. I was frustrated that Shareaholic did not allow you to create a vertical bar so I made one myself. I would have switched to another plugin if it were not for the nice looking buttons and the analytics you get with Shareaholic.

      Regards,
      Dani

  • http://dollarblab.com Mike Howg

    Very detailed tutorial Dani. Shareaholic works great but I also highly recommend checking out the Digg Digg and Flare plugins as well. Whichever you choose, adding a floating share bar to your blog is an excellent idea.

    • http://www.bloggingwithdani.com Dani Ivanov

      Hey Mike,

      I’ve tried them all include Digg Digg and Flare. However, I end up using Shareaholic. It is just better in my opinion.

      - Dani

  • http://msileanespeaks.com Ileane

    Nice tutorial. I didn’t know that Shareaholic had this feature. I’m wondering how to get my Twitter name included in the mentions from this plugin. Any ideas on how to add the Twitter name?

    Thanks.

    • http://www.bloggingwithdani.com Dani Ivanov

      Hi Ileane,

      Firstly, let me say that I love your blog! Here is how you add your Twitter name to your tweets. You’ll need to login to your shareaholic.com account and change the setting from there. NOT from your WordPress Admin.

      Step1: Go To ShareAHolic.com, login to your profile, and click the “Publisher Tools” button so that you can see your website.

      Step2: You’ll see three links (Analytics, Get Plugin, and Settings). Click on the settings link.

      Step3: Under Message Format you can change your Twitter template and include your Twitter ID.

      Let me know if this was helpful and if I can help you with anything else.

      Regards,
      Dani