Scribz.net™ Blog

The original Twitter button is nice and useful.  It has one major disadvantage though – it comes as an IFRAME, bringing with itself an entire HTML document with JavaScript, etc.  This means that when you embed a Twitter button onto your page, you cause the load times to soar, and your visitors will have to download plenty of overhead data just to show one simple button. Even worse, visitors with disabled JavaScript (or a simpler mobile browser) will not see anything.

In this post, I will show you how to make a Twitter share button (or a ‘tweet button’) that looks exactly like the original, loads lightning-fast and does not query any server but yours.

Functionality

The most prominent reason why you might want to embed an entire IFRAME is the automation that it brings with itself.  The original Twitter button shows you how many times your post has been tweeted and for that reason, it requires some back-end and front-end processing.  If you can live without this feature and you do not need to display the “tweeted” count, then you will want to make your own Twitter button.

A Twitter button is essentially a link to a “Share on Twitter” window.  All the necessary information is included in the link’s query string parameters.  Thus, in essence, you don’t need anything but an old-fashioned link to tweet your stuff.  On the other hand, the original Twitter image is standardized across most domains and clearly indicates its purpose to the user.  For those reasons, it is wise to include the ‘Tweet’ image to increase the user-friendliness of your site, as opposed to creating a custom one or using plain text.

In addition, creating your own no-overhead, locally hosted Twitter button will significantly speed up the loading of your pages, especially if you are showing the button on one page multiple times, such as in a blog roll.  At the point of writing this article, the Scribz.net Blog uses the lightweight Twitter button both on the blog-roll and on each individual post.

Design

To allow for all its functionality and each layout, the original underlying image of the Twitter button looks like this:

Original Tweet Button Image by Twitter

You can see that every element of the image is portrayed in at least two states: ‘normal’ and ‘hover’.  The button itself has an ‘active’ state as well that shows when the button is pressed.  Since we are only going to use the button itself and forgo all those counters, we can effectively strip all other images and just keep the three button states.  Look at the following image for the result:

Simplified Tweet Button Image

This is the portion of the Twitter PNG file that you will need.  You can see that it is a crop of the original image, which further reduces load time and file sizes by precious kilobytes.

You can also see that all ‘button states’ are included within a single image.  This again speeds up load time and eliminates ‘load flicker’ when the mouse hovers over the button.  This technique of including multiple versions of a design in one image is called CSS sprites.  (And here is more about CSS sprites.)

The mechanism which triggers the change of the background image is CSS and your link’s state: normal, hover and active.  But let’s talk about the actual implementation in more detail…

Implementation

What you need to display your custom Twitter button is a hyperlink element <a> to enable the functionality and a style sheet to show the actual button.  Let’s start with the style sheet:

Remember that the button image is not shown in an <img> element, but rather it is the background of the <a> element.  Because of that, we will have to set a fixed size for the <a> element and use CSS to style its mouse states.

The CSS for the button (link) will look something like this:

a
{
  display: block;
  width: 55px;
  height: 20px;
  color: rgba(0,0,0,0);
  font-size:0;
  background: url("tweet.png") no-repeat 0 0;
}
a:hover
{
  background-position: 0 -21px;
}
a:active
{
  background-position: 0 -42px;
}

You will then apply those styles to the link of your choice.  Note that the height of the Twitter button is 20px but the next image starts at the 21^st pixel.  This is to avoid inadvertent bleed if the browser rounds up the dimensions of <a> when zooming, etc.  It is just a best practice and seems to work very well in general.

The text color value of rgba(0,0,0,0) along with the font-size value of 0 will allow you to include text in your button (such as ‘Tweet’) so that users without CSS support (or with screen readers) know what is going on.  If one does have CSS support, the text will be drawn completely transparent and thus will not interfere with the user experience.  (Please, always keep accessibility in mind when designing your web pages.)

Once the button looks as it should, you will have to assign to it its functionality.  This means that you will have to put together a ‘Twitter query string’ with all the proper parameters.  The list of all available parameters and their description is available in this Tweet button developer manual.

The query string to tweet this post would then be as follows:

http://twitter.com/share?url=http%3A%2F%2Fscribz.net%2F%3Fp%3D79&text=How%20to%20Make%20a%20Lightweight%20Twitter%20Share%20Button&counturl=http%3A%2F%2Fblog.scribz.net%2F2011%2F03%2Flightweight-twitter-button%2F&via=Chacaturian&lang=en

Please note that the Tweet button query strings in this blog are automatically generated by WordPress, as the button became part of the template.  If you are using WordPress or a similar content management system, you will want to perform some automation yourself.  This is no different from embedding the original Twitter button, which also often requires you to supply the tweet parameters.

The finalized button will look like this:

Tweet

Disclaimer: I am pretty sure that embedding your own Twitter button is perfectly OK with regards to Twitter’s Terms of Use, but please correct me in the comments if I am wrong.  Thanks!