How to create a custom Tweet Button for WordPress using the bit.ly and Twitter APIs. The HTML and CSS is completely customisable and there is no need for JavaScript. PHP is used to automatically shorten and cache the URL of a post, fetch and cache the number of retweets, and populate the query string parameters in the link to Twitter.
The custom Tweet Button at the bottom of this post was created using this method. All the files are available on Github and released under MIT license. The PHP code was heavily influenced by the BackType Tweetcount plugin.
You’ll need your own bit.ly account and to be comfortable editing your theme’s functions.php, style.css, and template files. Be sure to make backups before you start making changes.
Step 1: Download the Custom Tweet Button for WordPress files from Github.
Step 2: Include the custom-tweet-button.php file in your theme’s functions.php file.
Step 3: Replace the bit.ly username, bit.ly API key, and Twitter username placeholders in the tweet_button function with your own. Your bit.ly credentials can be found on the “settings” page of your account.
Step 4: Add the custom Tweet Button CSS to your theme’s style.css file. Add the tweet.png image in your theme’s image folder. Make sure the image is correctly referenced in the CSS file.
Step 5: Call the function tweet_button in your template files (e.g. single.php) at the position(s) in the HTML you’d like the Tweet Button to appear:
if (function_exists('tweet_button')) {
tweet_button(get_permalink());
}
Making your own custom Tweet Button for WordPress has several additional advantages over using Twitter’s own offerings.
Full control over the HTML and CSS.
Having full control over the HTML and CSS means that you can choose how to present your Tweet Button. I decided to reproduce the horizontal and vertical styles of Twitter’s own button. But any appearance is possible.
All click, traffic, and referrer data is stored in your bit.ly account.
The URL for any published post is automatically shortened using the bit.ly service. The short URL is then passed to Twitter to ensure you can monitor the click and traffic data in your bit.ly account. The permalink is passed to Twitter in the counturl query string parameter to ensure that it counts the URL that your short URL resolves to.
No need for JavaScript or embedded iframes.
The Tweet Button works without JavaScript. You have full control over any custom JavaScript enhancements you may wish to include. If you’d prefer Twitter’s share page to open in a pop-up window you can write your own JavaScript handler.
Faster page load.
No external JavaScript or image files are loaded; both the short URL and retweet counts are cached.
Use the short URL and retweet count for other purposes.
The short URLs and retweet counts are stored as post meta-data. This makes it easy to display this data anywhere else in a post. The retweet count data could be used for conditional template logic. For example, you could order posts based on the number of retweets, apply custom styles to your most retweeted posts, or display your most tweeted posts in a widget.
Easy to add Google Analytics campaign and event tracking.
The Tweet Button is simple HTML and you have control over all the information that is sent to Twitter. Therefore, it is possible to use Google Analytics to help answer questions like: are people sharing your posts from the homepage or the post itself? If the Tweet Button is displayed above and below your posts, which gets the most clicks? How long do people take to click the Tweet Button? How many people are visiting my site thanks to links posted on Twitter using the Tweet Button?
Approximate the number of retweets for old posts.
Before the release of the official Tweet Button, Twitter did not collect data on the number of times a URL was tweeted. This means your older posts may display far fewer retweets than actually occurred. However, there is a workaround. Use a service like Topsy, Backtype, or Tweetmeme to get the number of times your old post was retweeted. The difference between this and the number from Twitter’s APIs is the approximate number of retweets Twitter missed. To correct the retweet count for old posts add the number of missed retweets to a Custom Field called retweet_count_start.
Once a post is published its permalink URL is shortened using the bit.ly API.
The returned URL is permanently cached in the bitly_short_url Custom Field. The short URL is now part of the post’s general meta-data and can be used in contexts other than the Tweet Button.
The Twitter API is used to get the number of retweets for the post’s permalink URL. This number, along with the time at which it was requested, is cached in the retweet_cache Custom Field. When the cache interval has passed, an API call is made and the returned number of retweets is checked against the value stored in retweet_cache. If the returned number is greater, the value of retweet_cache is updated.
The content of the tweet is automatically created by setting several properties for the http://twitter.com/share URL. The post title makes up the message; the short URL is passed to Twitter as the URL to be displayed in the tweet; the permalink URL is passed to Twitter as the URL to be counted; and your username is declared.
$twitter_params =
'?text=' . urlencode($title) .
'&url=' . urlencode($short_url) .
'&counturl=' .urlencode($url).
'&via=' . $twitter_via;
The default HTML output is very simple and can be fully customised. To display the count number vertically, add the class vcount.
<div class="twitter-share vcount>
<a class="twitter-button"
rel="external nofollow"
title="Share this on Twitter"
href="http://twitter.com/share?query-string-params"
target="_blank">Tweet</a>
<a class="twitter-count" href="http://twitter.com/search?q=url>259</a>
</div>
Please apply any improvements or enhancements for the script against the source repository.