JoeCurlee.com

I recently wrote a tutorial on how to make AddThis work with AJAX.

Shortly thereafter I discovered that AddThis uses Flash Cookies ( see AddThis Privacy Policy under the header Cookies ).

Flash Cookies explained

Flash Cookies as they are commonly known ( technically called Local Shared Objects or LSO for short ) aren’t really cookies, although they function similarly.

Why LSOs are good

• Unlike cookies they are browser independent
• Like cookies they are not cross site enabled

Whey LSOs are terrible

• Most browsers ( possibly all ) do not delete LSO files when you clear your cookies
• LSOs take up more space ( up to 100k by default but unlimited if the user complies ) than a regular cookie ( up to 4k )
• LSOs have no expiration date
• When you disable cookies in your browser, you haven’t disabled LSO files
• Some websites use LSO files to respawn cookies that you have deleted. this is extremely shady.
• In order to globally disable LSO files you have to use the Global Storage Settings panel on Adobe’s website

AddThis uses Clearspring LSO files to track user stats. By the way, Clearspring acquired AddThis in September of 2008. And in case you weren’t aware: in addition to offering a “viral distribution product” Clearspring is also an Ad network.

Solutions on preventing flash cookies in AddThis

After learning the information about AddThis and Clearspring I realized that I faced three choices.

1. Keep using AddThis and ignore the fact that it was using LSOs to track people who had visited my sites
2. Pass settings to AddThis to prevent it from using LSO files
3. Remove AddThis from all of my sites

If you choose to keep AddThis but want to prevent Flash Cookies, use this within the head tags of any page displaying the AddThis button:

addthis_config = {
        data_use_cookies:false,
        data_use_flash:false
    }

I opted for choice #3 and removed AddThis from all of my sites. Even though #2 is possible, I was afraid that AddThis could change the way they handle settings and LSOs would make their way to the computers of anyone visiting my sites.

I am now using ShareThis instead and I suggest you do the same.

Where to go from here

I highly recommend installing the BetterPrivacy FireFox extension. This extension will allow you to view and delete LSO files that have been stored on your computer. You can set it up to auto delete all LSO files on start or exit of FireFox. You can also set it up to alert you when new LSO files are being stored.

If you are not a FireFox user I recommend you become one.

Your only other solution ( short of monitoring the directories which contain LSOs on a regular basis manually ) is to disable LSO files by using the Global Storage Settings on Adobe’s site ( as mentioned above ).

One important thing to note: certain sites use LSOs in a less malicious way than other sites. Some banks use them to identify your computer. Sites like YouTube use them to store your Flash player settings.

This whole issue boils down to your right to privacy. Your right to know what is going on behind the scenes with your computer and to choose what is stored on it.

Notice: before continuing on with this tutorial I urge you to read my newer post concerning AddThis and it’s use of LSO files.

I have been putting together a site recently. It loads with AJAX. As usual I decided to use jQuery for all my AJAX needs. Skip to the tldr if you want the summary first.

This site calls for a sharing functionality, and I like AddThis for it’s simplicity and documentation. However as soon as I implemented AddThis I ran in to two separate issues.

Issue #1: AddThis and overflow:auto Containers

This site has a scrolling div for it’s main content area which is where the AddThis buttons live, and this is where I ran in to my first issue. It turns out that when an AddThis button is contained within a scrolling div it is unable to readjust the hover window when a user starts to scroll. It creates for a pretty horrible UI experience.
The easiest way to get around this is to go with the expanded menu. This requires the user to click on the button. A window is then displayed in the middle of the screen, similar to Thickbox ( or colorbox ).

To use the expanded menu, simply use the classname “addthis_button_expanded” rather than “addthis_button” on your AddThis link.

Issue #2: Addthis and AJAX pages

The second issue I ran in to was not as simple to solve and that is the problem of loading AddThis for content generated through AJAX calls.

First off you need to append a variable to the AddThis script. The URL will look like this:

http://s7.addthis.com/js/250/addthis_widget.js#domready=1

This solution is offered up by AddThis staff in the forums and actually seems to fix everything perfectly. However, if you need to reload the page dynamically ( in my case with AJAX ) the AddThis buttons will no longer work. This is because the DOM is re-rendered, but the AddThis script isn’t re-initialized.

There is absolutely no solution offered up by the AddThis staff for this problem. They acknowledge this issue but state that there is no re-initialization function in AddThis. I spent several hours attempting to find a solution to this through the forums and Google. In the end I came up with my own solution by analyzing the AddThis script.

The fix is very easy. Simply place the following code in a callback function that is loaded after your AJAX call successfully completes:

var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
if (window.addthis){
    window.addthis = null;
}
$.getScript( script );

That’s it. You should now be able to re-initialize the AddThis script after AJAX calls.

Step by Step Tutorial

First off you need to place the following code in your HTML page

<a class="addthis_button_expanded"
   addthis:url="<URL_HERE>"
   addthis:title="<TITLE HERE>"
   href="http://www.addthis.com/bookmark.php?v=250">
<img src="<SHARE ICON URL HERE>" alt="share icon" title="AddThis" />
SHARE
</a>

Feel free to tweek the title and alt tags of course. Leave the a tag’s classname set to “addthis_button_expanded”. This tells addthis to use the popup box rather than the hover box. If you want to use the hoverbox, change the classname to “addthis_button” instead.
Further information can be found on the AddThis help page.

Next comes the Javascript. I use jQuery and this example will be illustrated as such. Change the code according to the library of your choice.

function Loader() {}

Loader.prototype.load = function( url )
{
	var self = this;
	$.ajax( {
		type: 'POST',
		data: { ajax: true },
		dataType: 'html',
		url: url,
		success: function( content ) {
			$.fn.colorbox( {
				html: '<div class="ajax">'+ content +'</div>',
				transition: 'none'
			} );

			$().unbind("keydown.cbox_close"); // Disable close on esc key press

			self.addthis_init()
		}
	} );
}

Loader.prototype.addthis_init = function()
{
    var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
    if ( window.addthis ) {
        window.addthis = null;
    }
    $.getScript( script );
}

var loader = new Loader;
$( document ).ready( function() {
	loader.init();
} );

Of course you can tweak this Javascript to fit your site. The most important thing to note is the addthis_init call. Setting window.addthis to null unloads the script and forces it to reload. Without this subsequent AJAX loads of your page will fail unless you refresh the browser first… which clearly defeats the whole purpose for using AJAX.

Note:
These fixes were tested on Google Chrome 4.0.249.49, Firefox 3.5.7 and Safari 4.0.2 I will be confirming the fix for Windows browsers soon.

tldr

back to top

AddThis breaks when placed inside of overflow:auto containers and when loading pages with AJAX. Use the expanded menu button to fix the overflow issue. Remove addthis from the window by setting it to null before dynamically reloading the AddThis script with a Javascript call.