Today, You will be Learning how to add a floating share buttons to Your blog which notifies you
anytime someone shares your blog post on Twitter, the share buttons can be customized to stay either on the left or right sidebar of the blog.
This share button is called
Shareaholic Floating Share Bar, With shareaholic share buttons your readers will be able to share your blog content on Facebook, Twitter, Google+, Pinterest, Email It, StumbleUpon, Whatsapp and many more social networks.
Shareaholic is Optimized for Mobile, Available in Giant Size, Full Color Customization
Custom Positioning, Share Counts, Smart Sort and Conditional Share Counts & Advanced Display.
Without wasting much of your time, lets learn how to add to it to blogger blogs.
First of all head to
Shareaholic.com and sign up for an account if you are not yet registered or sign in if you have already signed up.
Step 1: Click on “Edit General Settings” as seeing in the screen shot below.
Step 2: Now click on the little button on far right to turn Floated Share Buttons on (green) or off (red).
Step 3: Hit the ''Settings'' Icon icon next to the on/off option to configure settings and arrive here:
Step 4: Want your share buttons to be just perfect on your site? For your share buttons to be perfect on your site, just select your button size (normal/mini), activate share counts (or leave them off), for the share buttons to align on the left or right sidebar, just change the Alignment to left or right. Turn the “more options button” on (green) if you want to make it available to allow visitors to share to other networks, or turn it off (red) entirely. And if you want your buttons to look just right on your site, adjust their vertical offset to position them perfectly with your site’s theme.
Step 5: Here is for you to customize the set of buttons you want to feature: At the bottom of the screenshot above, you can select the social networks you want and add those buttons to your floating share bar. You can select as many as you want but I will advice you to select the ones you know your site visitors always use. The share buttons are 100% responsive that is they are mobile- and tablet-friendly.
Step 6: If you don't want a certain share button button, just deselect them by hovering over each on the preview screen and clicking the little ''X'' to remove them.
Step 7: Positioning of the share button for your readers: You can arrange your buttons in any way you want by hovering over each one you want to move, clicking-and-holding it, then drag it to your desired position as seen in the screen shot below, see the way i tried to move the Pinterest button.
Step 8: Finally we are done with the set up of the Share buttons, Now click on ''Save Settings'' to save it.
Now lets add the share button to our blog.
Now add your website to your account and below it you will see the ''Get Setup Code'' click it and get the set up code and add it before the the closing </head> tag in your template and view your blog to see the Floating share button live on your blog both the desktop and mobile view.
====>To enable Twitter Notifications, Go to Settings as seeing in the screenshot above, Click it and you will see the page below...
Click on ''Sharing'' next to Website page to see the page below...
In the
''Message Format'' section, you will add your Twitter handle so that anytime someone shares your blog post on Twitter you will be notified.
In the
''URL Shortener'' section, I used Goo.gl you can use anyone you want and I left the other ones I don't need.
Then coming down you will see
''Heading'', this is the message your blog reader will see after sharing your content so you can just leave it that, it doesn't end it here you can still show your social networks to the blog reader to follow you. This can be done in the '
'Follow Buttons'' section, just edit it, select the social networks you want and insert your profile URL's.
So anytime someone shares your blog post, the Follow us button will pop up for him or her to follow you on your respective social networks.
Shareaholic can still show Related content to your readers if you don't have such on your blog but we are not talking about that today and you can still use the Analytics page to monitor how people have shared your post and the engagement the posts received through Shareaholic.
Below is how the floating share button looks like on my Blog desktop and mobile view respectively.
 |
| Desktop view |
 |
| Mobile view |
That is how it is done, is there anything you don't understand, talk to me in the comment section.
Thanks for reading and please subscribe to the blog to always receive my updates.