Potentially big problems from the Twitter Button. Here are details and a fix.

Since Twitter’s release of its own Tweet Button, many sites have already implemented the code in order to have the “newest and best” feeling. It seems, however, that there might be a problem.

The way that Twitter’s code works leaves a site succeptible to slowdowns on Twitter itself. Here’s an explanation, provided by Mellow-Morning:

Especially important here is the way the javascript is loaded. Twitter uses a simple blocking script approach, where as digg, facebook and fashiolista use the async dynamic script approach. There are two large differences:

1. Blocking script loads make your site slower
2. If Twitter goes down, your site joins in

By way of example, the writer provides two links that contain the Twitter Button code.

Link 1 – Defualt version, routed through Google App engine to simulate a Twitter slowdown

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

Link 2 – Using an Async script, in conjunction with the Twitter code.

As you can plainly see, the first link will not allow site content to load until the Twitter button loads. This is the default action of the Twitter-released code. The second link, however, allows site content to load and then waits for the Twitter button to finish.

There have been reports of issues unrelated to this swarming through Twitter today,though we’ve not specifically heard of anyone experiencing the issues that are described here. However, it’s at least worthy of mention, as is the fix:

Instead of the standard Twitter version:

< script src="http://platform.twitter.com/widgets.js" type="text/javascript">

The Async method seems to work better:

< script type="text/javascript">
//async script, twitter button fashiolista.com style
(function() {
var s = document.createElement(‘SCRIPT’);
var c = document.getElementsByTagName(‘script’)[0];
s.type = ‘text/javascript’;
s.async = true;
s.src = ‘http://platform.twitter.com/widgets.js’;
c.parentNode.insertBefore(s, c);
})();
< /script >

Bear in mind, we hold no responsibility for what you do with this code, so please be careful when using it. If you’re not familiar with adding code to your site, we strongly suggest that you gain the assistance of someone who is.