Twitter finally gets something right – Tweet Button

August 13th, 2010 | by Sajal Kayan |

FAILing all the time is not new for Twitter, in fact they are the masters of FAIL. Twitter FAILs so often that seeing the obnoxious FAIL WHALE on a daily basis has become a way of life for most of us. Twitter is so experienced in the art of FAIL, that they are aware and experienced in causes of FAIL and how to mitigate its effects.

Recently Twitter, for the first time ever, launched the official Tweet button which one can put on their websites to allow the user to tweet easily and view the twitter based popularity of the page they are currently reading.

So whats new about this? 3rd providers like TweetMeme have had this functionality for years now. Let me explain …

Firstly Twitters implementation of the Button


<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Look closely, there is an <a> tag which sets the class attribute, and then a <script> tag, which makes the magic happen. Take a look into their JavaScript, there are no nasty document.writes in it. In fact, all it does is look for objects with the twitter-share-button class and then that object accordingly. Now, if the <script> is placed just after <a> as advised by Twitter, the page load blocks while the JavaScript is downloaded and parsed, this in certain cases may drive away impatient users who don’t like waiting for stupid buttons to load before they can interact with rest of the page.

Since Twitter’s JavaScript doesn’t use document.write, the <script> can be included anywhere in the html provided it is after the <a> tag. the ideal position would be to place it just before </body>. The result, adding this 3rd party widget induces no additional block in the rendering of the page. Implementing the Tweet Button in this manner has negligible impact on pageload.

This is how your page would look.


<html>
<head>
[...]
</head>
<body>
[...]
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
[...]
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</body>
</html>

To make it asynchronous, the <script> tag can be implemented as such :-


<script id="deferedjs" type="text/javascript">
var b = document.createElement('script');
b.type = 'text/javascript';
b.src = ('http://platform.twitter.com/widgets.js');
var a=document.getElementById("deferedjs");
a.parentNode.insertBefore(b,a);
</script>

Now thats is truly non-blocking un-intrusive implementation of the button. It doesn’t block the onload event uselessly.

Now, Twitter didn’t include these methods in the documentation probably because they didn’t want to scare away regular bloggers and webmasters who aren’t as paranoid about client side performance as some of us.

The Tweet Button uses Akamai CDN to serve the assets, which is considered super stable. Currently sets an expires header of 1 hour (which I presume will be changed to far-future once things stabilize) and to top it off, it provides webmasters with an elegant JavaScript which can be implemented such that the base page suffers very little(if any) even if their CDN goes down.

More experienced webmasters can even bundle this JavaScript into their own code, provided they regularly track changes and re-bundle often to avoid undesired consequences.

Now, see TweetMeme’s implementation :-


<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Just take a look into their JavaScript. It uses a document.write to write an Iframe. The JavaScript has to be downloaded, then parsed, then executed exactly at the moment it needs to be placed in sync with the rendering of the DOM. There is no way that I know of to make this truly asynchronous besides putting their script inside another iframe (which makes one additional request to your server).

TweetMeme hosts the javascript on their own servers, if their server is slow, the whole pageload would suffer. To top it off there is no way where a webmaster can take precautions against it.

My intention was not to single out TweetMeme, almost all 3rd party widgets make their code such that each of them are frontend SPOF for the websites that use them.

Moral of the story is that it is the responsibility of a 3rd party service providers to make their FAIL shouldn’t make their users sites to FAIL completely.

  • http://www.livingondividends.com Rich

    That’s asynchronous code is cool. I’ve never seen that. I assume it’s best to load all javascript that way. Could you by chance show an example of how to use that for two or more scripts please?

  • http://blogjunkie.net blogjunkie

    Would the asynchronous method work for multiple instances of the Twitter button on a single page? E.g. the blog index page has 10 posts and all have the Twitter button.

  • http://www.sajalkayan.com Sajal Kayan

    @Rich: It depends on script to script on how you can make it asynchronous/non-blocking. I’ll do another post later about some of the 3-rd party scripts I use and what tricks i use to mitigate frontend SPOF.

    @blogjunkie: Just tried. you only need to include the twitter script once : test : http://www.sajalkayan.com/twitter-test.html

  • http://www.aaronpeters.nl/en/ Aaron Peters

    Sajal,

    I just analyzed the Twitter Profile widget yesterday, created a test page and discovered loading asynch works fine. Wrote down on my to do list “Write blog post about Twitter widget”.

    And then I stumble upon your blog and read this. Apparently, we are likeminded! That’s nice …

    Keep these posts coming!

  • http://www.sajalkayan.com Sajal Kayan

    @Aaron : Thanks for the compliments…

    Theres something wrong with me… i keep scanning any javascript file I come across for the evil document.write for absolutely no reason…

  • http://www.peperuka.com/ TheBigBoss

    This is the method I was using with code provided by Google onload function – downloadJSAtOnload() – just google for it

    Trimmed code from my page, I don’t use the deferedjs id ???? Anyway, here is the code using another onload method (if it works)

    function downloadJSAtOnload() {

    var elh=document.createElement(“script”);
    elh.src=”http://platform.twitter.com/widgets.js”;
    document.body.appendChild(elh);

    if (window.addEventListener) {window.addEventListener(“load”, downloadJSAtOnload, false);} else if (window.attachEvent) {window.attachEvent(“onload”, downloadJSAtOnload);} else {window.onload = downloadJSAtOnload;}

    *****

    For multiple buttons integration, justwrite the anchor tag using javascript in your FOOTER

    // EXAMPLE
    echo ”;
    foreach($posts as $element) {
    echo ‘document.getElementById(\’tweetmeme-’.$element->ID.’\').innerHTML = \’post_title.’ =;) Plz RT – “; data-url=”‘.str_replace(‘localhost/’, ”, get_permalink($element->ID)).’” data-count=”vertical” data-via=”Peperuka” data-lang=”fr”>Twe:)et\’;';
    }
    echo ”;
    }

    Then, in THELOOP file, just add a span or whatever
    ID.’” style=”float:right; margin-right:6px;”>

  • http://www.peperuka.com/ TheBigBoss

    sorry code posted above has been trimmed

    anyway, still understable

    cheers

blog comments powered by Disqus