This week, we had the big boss command us to put the AddThis button on MizzouWire’s story pages. It’s a handy service that helps visitors share your content by emailing it or posting it to various social media sites.
It’s just a little button. How hard can it be to add it?
Well, that depends …
It’s never easy to just add a feature to your site. Even little buttons have their problems. The AddThis button, for example, uses off-site JavaScript to work and if you don’t apply it in a certain way, it might affect your site in unexpected ways.
Sure, if you just copy and paste the code where you want the button, it’ll work, but here are some of the problems we ran into.
The issues of using AddThis
It relies on a 3rd party site to work
The JavaScript and images come from a 3rd party site, so if AddThis is slow, or down, your site suffers. Images for the button may not load or the JavaScript in the <body> of your page may delay the rendering of your content.
Layout and design adjustments
You may have to adjust the HTML and CSS of your site design to allow space for the button.
Problems with embedded Flash
If you have embedded Flash next to the button, it will appear above the button’s overlays.
How we worked around these issues
Move the JavaScript
To help with the page rendering times, we moved the <script> tags from the supplied code into the <head> of the document. This allows the script to load parallel to the page and keep the loading times down.
We also downloaded a copy of the button image and hosted it locally to limit the dependancy on AddThis for our images, so if the AddThis site is down we don’t get a broken image link.
Add a class to the button image
By default, the button image has some inline style rules applied to it and no ID or Class. In order for me to style it to match my site design I removed the inline styles and gave the image a Class. Then I could style it my way.
Adjust the Flash embed code
To fix the overlapping Flash problem, AddThis has a solution in their FAQ section. Basically, you just have to add the wmode="transparent" parameter to your embed code. Unfortunately for us, because of how we set things up in our CMS, we have to go back to every piece of Flash and add that parameter by hand. :-(
We still like AddThis
AddThis is a great service and it works pretty well. I don’t want to imply that it’s a bad idea to use services like it. The easy “copy and paste” code is necessary for AddThis to get people to use it. That’s fine for most sites, but if you’re concerned about your site’s performance, always pay close attention to any 3rd party code you decide to put on your pages.
Sometimes adding a button really can be a big deal.
Hi, my name is Justin Thorp (justin@addthis.com). I’m the Community Manager for AddThis. My apologies that it was a hassle to install the button. If there is anything we can do improve the process, we’d definitely love to hear your thoughts.
I completely understand the concern about performance when using third party JavaScript. You’ll be pleased to know that performance is something that we spend A LOT of time on. We’ve optimized our button code so that it’s the smallest in the business (about 17k). We’re even in the process of upgrading our infrastructure to the best CDN you can get.
We believe that this commitment to performance has helped us get to the close to a billion button loads per day that we’re at right now.
To even go a step further, we’ve setup a program so that publishers can locally cache the primary AddThis JavaScript file on their servers. Feel free to e-mail me your username and domain name and we’d be happy to get that setup for you.
Thanks for being an AddThis user. We really appreciate your business. If there is absolutely anything we can do to help you, don’t hesitate to drop me a line - justin@addthis.com. We LOVE to hear from our users.
Justin, thanks for the reply. With the slight modifications, we are liking the AddThis button. The service works just as intended with no performance issues on our page loads.
Thanks for offering the cached script option. :-) Like you mentioned, AddThis’ performance is very snappy as is, so the linked script is fine. If, for some rare reason AddThis was slow or down, our site should not be noticeably affected because of the slight changes we made.
(The only reason I noticed the script affecting our page loads was because, at the time I was testing the button, our network on campus was having problems establishing connections outside of campus.)
I didn’t mean to imply that using your service was a bad thing. I meant to illustrate that even small modifications to a Web site can sometimes be a lot more work than expected. With AddThis, we were able to find a way to make it work after a some trial and error.
I can vouch for Justin that AddThis has done a lot recently to speed up their service with their content delivery network. However, I will definitely contact him soon for the option to host all the code locally since I don’t want to have to trust any outside servers, and want to reduce domain name server (DNS) lookups. This is because one of my sites requires that the body loads before the site is functional.
It might be an option to have the option of adding a body onload callback to run the (locally hosted) JavaScript after the page loads.
I would also like to “correct” Josh on his suggestion of putting the AddThis code in the “head” section. This will actually slow down the loading of the page by with a “white screen” delay before anything is seen at all on the page. The better option would be to place the script at the bottom of the “body” section, right before the body closing tags. Then, you will need to wrap your AddThis functions in the following to make sure the AddThis functions exist first:
if (typeof(addthispub) == ‘string’) { addthisopen(blah, blah); }
My main issue with AddThis is inline javascript that comes with the button code. Of course you can strip it out and use an external script to keep it unobtrusive. But, why not just give us the option to specify a class or ID (e.g. #share_button) and let the script do the rest? This would probably require the script to go below the DOM, but that’s where it should go! Seems like a better solution for developers at least, and will probably save the user from an additional HTTP request in most cases. What are your thoughts?
This article is exactly what i was looking for. Thanks.
It’s almost 6 months later and I just removed it from my sites. Why? The entire page hangs for 5-10 seconds and that’s a huge no no for obvious reasons.
IMO, The cache version should be avail to all people not something to get approved for. Maybe you may have to upgrade every x weeks or so to ensure the code is up to date?
P.S. I search for “Addthis slowdown” and this page came up.