JoeCurlee.com

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.

This entry was posted on Thursday, January 21st, 2010 at 1:04 am and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.