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.
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.
- 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.
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.
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.
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.
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.
It is important here that you follow my instructions carefully otherwise this will not work the way it is intended.
- 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.
- 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.
- 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’.
- 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)
- 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.
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.
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.