5 ways to customize AddThis floating share bar

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:

AddThis Platform 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:

AddThis Floating Bar Styles

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:

AddThis Address Bar Tracking

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:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count" rel="nofollow" target="_blank"></a>
<a class="addthis_button_tweet" tw:count="vertical" rel="nofollow" target="_blank"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall" rel="nofollow" target="_blank"></a>
<a class="addthis_counter" rel="nofollow" target="_blank"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxx"></script>
<!-- AddThis Button END -->

Next, we will look at how to implement this code and then customize AddThis floating bar.

Implement AddThis Code

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…