Faster And Fault-Proof Tweet Button

At WRD, the previous tweet button for sharing stories was the cool Easy Retweet Button by John Resig. However, it was not perfect as, sometimes, it was unable to communicate with the URL shortener service and the tweet links were appearing buggy.

In search for a better one, I tested few others including the official tweet button. They were loading the links ok but had other issues like "loading slow", "blocking pages on load", etc.

And, for a button that is clicked by -maybe- 1/100 of the visitors, loading the scripts and making requests for every visitor didn't look like the smartest choice.

Here is another method, that is actually used at WRD now which loads very fast for everyone and almost fault-proof.

Faster Tweet Button

Demo Faster Tweet Button Download

How it works?

First of all, the button is hosted locally and it does not make any requests until it is clicked.

  • A link with the querystring that includes URL and the title of the web page is created, pointed to a server-side file (to be presented later in this article) and attached to any custom button we design.
  • Once clicked, it sends the URL and title to the server-side file which creates the tweet link and redirects to Twitter with the tweet.

Pros

  • Does not load any scripts from other domains (faster).
  • Does not perform anything until being clicked (faster).
  • Works with multiple URL shortener services. Currently, it uses Bit.ly by default, during the shortening, if there is an error, it falls back to Tinyurl. And if there is an error again, it uses the default URL. (fault-proof).
  • Counts the number of characters used and, if more than 140, reformats it. (fault-proof).
  • Any tweet button that you design can be used or just a "tweet it " text is enough (styleable).

Cons

  • Does not display the number of retweets (as no requests are made on load).

The Code

It is built with PHP. You'll see that the code is simple and can be ported to any other scripting language quickly. Here it is:

[sourcecode language=”php”]
140) {
$tweet = urlencode(substr($postTitle,0,140 – $restLength – $dotsMargin)) . urlencode(‘.. – ‘) . $shortenedURL . $viaText;
}
/* Prepare Tweet – END */

/* Redirect To Twitter – START */
header(‘Location: http://twitter.com/intent/tweet?text=’ . $tweet);
/* Redirect To Twitter – END */
?>
[/sourcecode]

How To Install?

Here are the steps:

  • Open tweet.php and edit the Bit.ly user-pass of yours (it is free to get one) and the "via" text in the beginning of the file.
  • Upload the file anywhere under your website.
  • Link to your tweet button image with <a href="http://www.mydomain.com/tweet.php?postURL=<?php echo 'http://www.theURLOfThePage.com'?>&postTitle=<?php urlencode('The Title')?>"></a> by editing the URL and the title
  • That's it.

For WordPress

After the first 2 steps above, for the 3rd step:

  • Link to your tweet button image with <a href="http://www.webresourcesdepot.com/tweet.php?postURL=<?php echo get_permalink(); ?>&postTitle=<?php echo urlencode(get_the_title($post->ID)); ?>" target="_blank" rel="nofollow"></a>

Any thoughts to make it better?

Search