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:

Customize Addthis Floating Bar
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
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
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 noopener noreferrer" target="_blank"></a>
<a class="addthis_button_tweet" tw:count="vertical" rel="nofollow noopener noreferrer" target="_blank"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall" rel="nofollow noopener noreferrer" target="_blank"></a>
<a class="addthis_counter" rel="nofollow noopener noreferrer" 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.

Addthis_Floating_BarImplement 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.

1. Add a Background

A very basic AddThis customization you can do is adding or changing background color. You can achieve this by modifying the following line to add CSS styles for background color:

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;background:#eeeeee;">

The default code adds a white background to floating share bar. Color is specified as hexadecimal codes. In our case, to match the theme's background, we added background:#eeeeee; to the above line. The quotes and punctuation are very important.

2. Add a Border

Addthis_With_Background_And_BorderThe next easiest way to customize AddThis floating bar is by adding a border. To do so modify the following line to add border styles:

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;background:#eeeeee;border:1px solid #cccccc;">

#cccccc is a light gray shade but darker than #eeeeee specified for the background. This results in an AddThis floating bar as shown in the picture on right.

You can also adjust width of the border by changing 1px to a higher number (px stands for pixels). In addition, you can change solid to dotted or dashed for dotted or dashed borders.

3. Customize the Position

The default AddThis code (left:50px;top:50px) puts the bar 50 pixels from the left and 50 pixels from the top of the browser screen. This may not be the most desirable position. Furthermore in our case, if someone reduces the size of the browser the bar would overlap on the content as shown in the picture below (right).

Addthis Bar Default Location
Addthis Bar Default Location

To customize AddThis floating bar's position you will again have to modify the style in the following line:

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="top:215px;left:50%;margin-left:-560px;background:#eeeeee;border:1px solid #cccccc;">

In our case, we wanted the AddThis floating bar at 215 pixels from the top. Therefore, we changed top:50px; to top:215px;. To void the bar from overlapping the content, we always wanted it to be to the left of the content irrespective of the size of the browser window. To achieve this, we first specified left:50%;, which will put the left border of the bar at half way from the left edge of the browser window. Now to avoid it from overlapping on the content we offset the margin by adding margin-left:-560px;. You will have to determine the exact number to apply in your case. Now no matter what the size of the window is, the AddThis floating bar will always be to the left of the content without overlapping as shown in the picture below:

Customize Addthis Floating Bar Position

4. Add Custom Services

Addthis-Floating-Bar-FinalAddThis by default picks the social networks for you. If you would like to manually make a social sharing service visible all the time, you can manually add the code. Refer to AddThis Customization Overview and Third-Party Buttons for more information on how to add services. For example, if you would like to add Pinterest as service then you can add the following line to the above code:

<a class="addthis_button_pinterest_pinit" pi:pinit:url="https://www.smarthomebeginner.com" pi:pinit:media="https://www.smarthomebeginner.com/images/2013/01/addthis_floating_bar_featured.png" pi:pinit:layout="vertical" rel="nofollow noopener noreferrer" target="_blank"></a> 

You will have to edit pi:pinit:url and pi:pinit:media.

5. Add Branding and/or Follow Buttons

Some may consider the default bar as bland. You can customize AddThis floating share bar by adding custom images. It may even be the most logical place to put Follow buttons for visitors to subscribe to your content. We added some text on the top inviting visitors to share the content if they like it. At the bottom we added links to FeedBurner RSS page and Email subscription. An image of the customized AddThis floating bar is shown in the picture on the right. The final code is available using the download button below:

Download
(Click Here To See The Full Code)

There you go. Five ways to customize AddThis floating share bar. Customize it is and improve social sharing on your website.
Be the 1 in 200,000. Help us sustain what we do.
31 / 150 by Dec 31, 2024
Join Us (starting from just $1.67/month)
Why did we start Memberships?

Anand

Anand is a self-learned computer enthusiast, hopeless tinkerer (if it ain't broke, fix it), a part-time blogger, and a Scientist during the day. He has been blogging since 2010 on Linux, Ubuntu, Home/Media/File Servers, Smart Home Automation, and related HOW-TOs.