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:
- Blocking script loads make your site slower
- 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
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:
The Async method seems to work better:
//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.
Kinda makes me glad I’ve been too busy to try-out the button code. Thanks for the heads up!
Not sure why they didn’t go the iframe route like Facebook did.
Well they did actually. They just turn a link element into an iframe using javascript. And their method of loading the javascript is not as elegant as Facebook’s. I’m always very impressed with their engineering.
I learned all about this when I tried to block the script when something popped out when I was accessing my Google Docs page. I blocked the script because the error message said that the script is making the computer respond slower. So I blocked it. After, all of my docs are gone and erased. Damn, that is frustrating. I will not block any script again.
Hi, I’m one of the tweet button engineers. This is a good tip for loading any js but I’d just like to point out that all our static assets are edge caches on akai so a slow down on twitter.com will have no effect at all on the load speed of the tweet button whic is why or goodies page shows the simpler method of loading the js rather than the asynchronous method. We do recommend you add to script to te bottom of your page (which is general best practice) however.
Finally, you can also just embed iframes directly facebook style. There’s info in our documentation about that.
Thanks.
I use a similar technique to load the tweet-button script onto my blog’s page. It’s especially helpful to load the script only once even if multiple buttons will load on your page.
I however don’t use the code snippet as above, but let my project LABjs (dynamic performance script loader) load it along side my site’s other script resources (both local and remote). LABjs lets you load it dynamically like above, and in parallel with other resources, but also lets you sequence the execution in case of dependencies.
For instance:
$LAB
.script(“…”)
.script(“…”)
.script(“http://platform.twitter.com/widgets.js”)
.wait(function(){
// all scripts loaded and ready!
});
Thanks, it was very useful, placed on my blog. It would be good to get the same solution for Facebook like / share button. By the way, I had to delete a few spaces in the code for it to work.