Floating share bars are one of the best ways to increase sharing and attract more traffic to your site. In this tutorial, I will show you 5 ways to customize AddThis floating bar to get the most out of it as well as tune it to your site theme. While there are WordPress plugins like Digg Digg and ShareBar, using AddThis is one of the easiest ways to add a floating share bar to your site without a plugin (although there is an AddThis plugin for WordPress). In this post, we will look at how to implement AddThiss and 5 ways to customize AddThis floating bar without the use of any plugin.
Get AddThis floating bar
If you do not have AddThis floating bar yet head over to AddThis.com and sign up. Once you sign up, click on
Get the Code and then
Share Buttons. Add this offers support for several options:
If you are running WordPress, you may choose to install the plugin. However, if you are bit code savvy and would like to go the no-plugin way, we recommend choosing
A Website. At this point, AddThis offers 3 different styles of floating bars:
In this tutorial we will customize AddThis floating bar with the counter. Choosing to track address bar copying will add a string to the end of your URL which not only complicates your URL but may cause minor performance issues (as described in this post). Therefore, we recommend leaving it unchecked:
You should now see the code you will have to use. AddThis automatically picks the services (Facebook, Twitter, Google+, etc.) for you. The default code should look something like this:
Next, we will look at how to implement this code and then customize AddThis floating bar.
Implementing this code is very easy. Just add it anywhere before the closing
body tag of the page. In WordPress you may edit
footer.php and add the code block. If you are using Genesis Theme Framework, then this is easily done by adding the code to
genesis_after hook. The default AddThis floating bar is shown in the picture on the right. If you are happy with it then you are good to go. But if you would like to customize AddThis floating share bar then continue reading.
Customize AddThis Floating Bar
With the implementation done, let us now customize AddThis floating share bar. Note: If you have a caching plugin, it is best to disable it until you have finished customizing AddThis.
Continued in next page…