JavaScript: structure of a Twitter button

When you include a Twitter tweet button into your page, you basically use an HTML snippet which includes a link and a reference to a JavaScript Twitter file. But what happens behind the scenes? In this post I'm going to describe the inner process behind the creation of a Twitter tweet button in order to help you understand what might go wrong in some use case scenarios.

As said earlier, you use the following HTML snippet to generate a tweet button:

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

The link is simply a placeholder that will be populated by the render() method of the TweetButton object. This method simply adds an iframe element to your HTML structure in order to show the number of tweets mentioning your page. This iframe loads a micro HTML snippet generated on the fly by the Twitter server together with the parameters passed along the URL, which include text, via, url, related, count, lang, counturl, searchlink and placeid.

When a visitor clicks on the 'Tweet' link, he/she has access to his home page where he/she can tweet your page to his/her followers. To achieve this, the TweetButton object retrieves the value of the data-via attribute of your link, the current page URL through a simple call to the href property of the location BOM object and the title of the page via the title property of the document object. So when you tweet this page, you pass the URL of this page, its title and my username to your Twitter home page.

Generally, things can go wrong either when a user cannot access his/her page due to Twitter overload or when the Twitter server cannot generate the HTML snippet displaying the number of current tweets. Also, bear in mind that if you place the above script element in your page, you may experience some delay with the rendering of your document, because the referenced JavaScript file must be first parsed and executed.

Leave a Reply

Note: Only a member of this blog may post a comment.