Resolving AddThis Problems When Using Selectivizr

Published on
2 min read

I found there is an issue when implementing AddThis to a site that uses Selectivizr. Selectivizr (for those who don't know), is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors for Internet Explorer 6-8.

I noticed that my AddThis widget was not functioning correctly in Internet Explorer versions 6-8. So whenever Selectivizr was required, I encountered two issues:

  • Social bookmark buttons were not displaying.

AddThis Issue No Icons

  • The AddThis popup to select more social bookmarking sites did not render correctly. It outputs all the popup contents to the bottom of the page.

AddThis Issue Popup

Just as I have experienced two problems with AddThis, there are two ways to resolve:

1) Use custom buttons with AddThis

Using custom buttons will get AddThis to display properly in your page. However, you will still experience viewing AddThis popup. So if you are not too fussed with viewing additional social bookmarking sites, then this will suffice.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook"><img src="/images/facebook.png" height="16" width="16" /></a>
<a class="addthis_button_twitter"><img src="/images/twitter.png" height="16" width="16" /></a>
<a class="addthis_button_email"><img src="/images/email.png" height="16" width="16" /></a>
<a class="addthis_button_reddit"><img src="/images/reddit.png" height="16" width="16" /></a>
<script type="text/javascript" src=""></script>
<!-- AddThis Button END -->

2) Modify Script tag in AddThis code snippet

To get AddThis to work 100% alongside Selectivizr will require you to modify the script tag and add bit of jQuery. A user on Google Groups suggested this fix and resolved my issues.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>

<script type="text/javascript">
    $('head').append('<script type="text/javascript" src=""><\/script>');
<!-- AddThis Button END -->

Before you go...

If you've found this post helpful, you can buy me a coffee. It's certainly not necessary but much appreciated!

Buy Me A Coffee

Leave A Comment

If you have any questions or suggestions, feel free to leave a comment. I do get inundated with messages regarding my posts via LinkedIn and leaving a comment below is a better place to have an open discussion. Your comment will not only help others, but also myself.