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.