├── custom-tweet-button.php
├── example.html
├── readme.md
├── styles.css
└── tweet.png


/custom-tweet-button.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /*
  3 | Project name: Custom Tweet Button for Wordpress
  4 | Project URI: http://nicolasgallagher.com/custom-tweet-button-for-wordpress/
  5 | Description: A fully customisable HTML and CSS Tweet Button for Wordpress build using PHP and the bit.ly and Twitter APIs.
  6 | Version: 0.2
  7 | Author: Nicolas Gallagher
  8 | Author URI: http://nicolasgallagher.com
  9 | 
 10 | Copyright 2010 Nicolas Gallagher
 11 | 
 12 | This program is free software; you can redistribute it and/or modify
 13 | it under the terms of the GNU General Public License as published by
 14 | the Free Software Foundation; either version 2 of the License, or
 15 | (at your option) any later version.
 16 | 
 17 | This program is distributed in the hope that it will be useful,
 18 | but WITHOUT ANY WARRANTY; without even the implied warranty of
 19 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 20 | GNU General Public License for more details.
 21 | 
 22 | You should have received a copy of the GNU General Public License
 23 | along with this program; if not, write to the Free Software
 24 | Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 25 | */
 26 | 
 27 | function tweet_button($url) {
 28 | 
 29 |     // Your bit.ly API credentials
 30 |     $bitly_login = "";
 31 |     $bitly_key = "";
 32 |     
 33 |     // Your twitter account names
 34 |     $twitter_via = "";
 35 |     // optional: add a related account
 36 |     // $twitter_related = "";
 37 |     
 38 |     // Count display
 39 |     // 0 - never
 40 |     // 1 - when greater than zero
 41 |     // 2 - always
 42 |     $count_display = 2;
 43 | 
 44 |     global $post;
 45 |     $cache_interval = 60;
 46 |     $refresh_interval = 3660;
 47 |     $retweet_count = null;
 48 |     $count = 0;
 49 |     
 50 |     if (get_post_status($post->ID) == 'publish') {
 51 |         $title = $post->post_title;
 52 |         
 53 |         if ((function_exists('curl_init') || function_exists('file_get_contents')) && function_exists('json_decode')) {
 54 |             // shorten url
 55 |             if (get_post_meta($post->ID, 'bitly_short_url', true) == '') {
 56 |                 $short_url = null;
 57 |                 $short_url = shorten_bitly($url, $bitly_key, $bitly_login);
 58 |                 if ($short_url) {
 59 |                     add_post_meta($post->ID, 'bitly_short_url', $short_url);
 60 |                 }
 61 |             }
 62 |             else {
 63 |                 $short_url = get_post_meta($post->ID, 'bitly_short_url', true);
 64 |             }
 65 |             
 66 |             // retweet data (twitter API)
 67 |             $retweet_meta = get_post_meta($post->ID, 'retweet_cache', true);
 68 |             if ($retweet_meta != '') {
 69 |                 $retweet_pieces = explode(':', $retweet_meta);
 70 |                 $retweet_timestamp = (int)$retweet_pieces[0];
 71 |                 $retweet_count = (int)$retweet_pieces[1];
 72 |             }
 73 |             // expire retweet cache
 74 |             if ($retweet_count === null || time() > $retweet_timestamp + $cache_interval) {
 75 |                 $retweet_response = urlopen('http://urls.api.twitter.com/1/urls/count.json?url=' . urlencode($url));
 76 |                 if ($retweet_response) {
 77 |                     $retweet_data = json_decode($retweet_response, true);
 78 |                     if (isset($retweet_data['count']) && isset($retweet_data['url']) && $retweet_data['url'] === $url) {
 79 |                         if ((int)$retweet_data['count'] >= $retweet_count || time() > $retweet_timestamp + $refresh_interval) {
 80 |                             $retweet_count = $retweet_data['count'];
 81 |                             if ($retweet_meta == '') {
 82 |                                 add_post_meta($post->ID, 'retweet_cache', time() . ':' . $retweet_count);
 83 |                             } else {
 84 |                                 update_post_meta($post->ID, 'retweet_cache', time() . ':' . $retweet_count);
 85 |                             }
 86 |                         }
 87 |                     }
 88 |                 }
 89 |             }
 90 |             
 91 |             // optional: 
 92 |             // manually set the starting number of retweets for a post that existed before the Tweet Button was created
 93 |             // the number can be roughly calculated by subtracting the twitter API's retweet count
 94 |             // from the estimated number of retweets according to the topsy, backtype, or tweetmeme services
 95 |             
 96 |             // this will check for the value of a Wordpress custom field called "retweet_count_start"
 97 |             $retweet_count_start = get_post_meta($post->ID, 'retweet_count_start', true);
 98 |             
 99 |             // calculate the total count to display
100 |             $count = $retweet_count + (int)$retweet_count_start;
101 |             if ($count > 9999) {
102 |                 $count = $count / 1000;
103 |                 $count = number_format($count, 1) . 'K';
104 |             } else {
105 |                 $count = number_format($count);
106 |             }
107 |         }
108 |         
109 |         // construct the tweet button query string
110 |         $twitter_params = 
111 |         '?text=' . urlencode($title) . '+-' .
112 |         '&amp;url=' . urlencode($short_url) . 
113 |         '&amp;counturl=' . urlencode($url) . 
114 |         '&amp;via=' . $twitter_via . 
115 |         //'&amp;related=' . $twitter_related .
116 |         ''
117 |         ;
118 | 
119 |         if ($count_display == 1 && $count > 0 || $count_display == 2) {
120 |             $counter = '<a class="twitter-count" href="http://twitter.com/search?q=' . urlencode($url) . '">' . $count . '</a>';
121 |         }
122 |         
123 |         // HTML for the tweet button (add "vcount" to "twitter-share" for vertical count)
124 |         $twitter_share = '
125 |         <div class="twitter-share">
126 |             <a class="twitter-button" 
127 |                rel="external nofollow" 
128 |                title="Share this on Twitter" 
129 |                href="http://twitter.com/share' . $twitter_params . '" 
130 |                target="_blank">Tweet</a>
131 |             ' . $counter . '
132 |         </div>
133 |         ';
134 | 
135 |         echo $twitter_share;
136 |     }
137 | }
138 | 
139 | // convert file contents into string
140 | function urlopen($url) {
141 |     if (function_exists('curl_init')) {
142 |         $ch = curl_init();
143 |         curl_setopt($ch, CURLOPT_URL, $url);
144 |         curl_setopt ($ch, CURLOPT_RETURNTRANSFER, true);
145 |         curl_setopt($ch, CURLOPT_HEADER, false);
146 |         $result = curl_exec($ch);
147 |         curl_close($ch);
148 |         return $result;
149 |     } else {
150 |         return file_get_contents($url);
151 |     }
152 | }
153 | 
154 | // bit.ly url shortening
155 | function shorten_bitly($url, $bitly_key, $bitly_login) {
156 |     if ($bitly_key && $bitly_login && function_exists('json_decode')) {
157 |         $bitly_params = '?login=' . $bitly_login . '&apiKey=' .$bitly_key . '&longUrl=' . urlencode($url);
158 |         $bitly_response = urlopen('http://api.j.mp/v3/shorten' . $bitly_params);
159 |         if ($bitly_response) {
160 |             $bitly_data = json_decode($bitly_response, true);
161 |             if (isset($bitly_data['data']['url'])) {
162 |                 $bitly_url = $bitly_data['data']['url'];
163 |             }
164 |         }
165 |     }
166 |     return $bitly_url;
167 | }
168 | ?>


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Example &#8211; Custom Tweet Button for Wordpress</title>
 6 |     <link rel="stylesheet" href="styles.css">
 7 | </head>
 8 | 
 9 | <body>
10 | 
11 | <div class="container">
12 |     <h1>Example</h1>
13 |     <p>An example of the default HTML and CSS.</p>
14 |     
15 |     <h3>Horizontal (default style)</h3>
16 |     <div class="twitter-share">
17 |         <a class="twitter-button" 
18 |            rel="external nofollow" 
19 |            title="Share this on Twitter" 
20 |            href="#non" 
21 |            target="_blank">Tweet</a>
22 |         <a class="twitter-count" href="http://twitter.com/search?q=">259</a>
23 |     </div>
24 | 
25 |     <h3>Vertical</h3>
26 |     <div class="twitter-share vcount">
27 |         <a class="twitter-button" 
28 |            rel="external nofollow" 
29 |            title="Share this on Twitter" 
30 |            href="#non" 
31 |            target="_blank">Tweet</a>
32 |         <a class="twitter-count" href="http://twitter.com/search?q=">259</a>
33 |     </div>
34 | </div>
35 | 
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Custom tweet button for WordPress
 2 | 
 3 | ![unmaintained](http://img.shields.io/badge/status-unmaintained-red.png)
 4 | 
 5 | Verified working with WordPress 3.0.1+.
 6 | 
 7 | ## Requirements
 8 | 
 9 | * [Bit.ly](http://bit.ly/) account and API key
10 | * WordPress 3.0.1+
11 | 
12 | For more info: <http://nicolasgallagher.com/custom-tweet-button-for-wordpress>
13 | 
14 | ## Installation
15 | 
16 | Step 1: Download the Custom Tweet Button for WordPress files from Github.
17 | 
18 | Step 2: Login to your bit.ly account and get your API key from the "settings" page. Replace the bit.ly username and API key placeholders in the `tweet_button` function with your own.
19 | 
20 | Step 3: Include the `custom-tweet-button.php` file in your theme's `functions.php` file.
21 | 
22 | Step 4: Add the custom Tweet Button CSS to your theme's `style.css` file and the include the `tweet.png` image in your theme's image folder. Customise the CSS as you desire and make sure the image is correctly referenced.
23 | 
24 | 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:
25 | 
26 |     <?php
27 |     if (function_exists('tweet_button')) {
28 |       tweet_button(get_permalink());
29 |     }
30 |     ?>
31 | 
32 | ## Changelog
33 | 
34 | ### 0.3 [2011/04/07]
35 | 
36 | * Update sprite to use new Twitter bird
37 | * Count is now a link to a Twitter Search for the URL
38 | * Display counts between 1000 and 9999 with comma separating the thousands
39 | * Display counts 10000 and over in 10.0K format
40 | * More generic Twitter button title and text
41 | 
42 | ### 0.2 [2010/10/24]
43 | 
44 | * Periodic cache refresh.
45 | * Checks that the Twitter API count data is for the URL that was requested.
46 | * Control over when the count is displayed with the tweet button
47 | 
48 | ### 0.1 [2010/09/18]
49 | 
50 | * First version.
51 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | /* CUSTOM TWEET BUTTON
  2 | -------------------------------------------------------------- */
  3 | 
  4 | .twitter-share {
  5 |     overflow:hidden;
  6 |     display:inline-block;
  7 |     font:bold 12px/1.5 Arial, sans-serif;
  8 |     text-align:center;
  9 |     *display:inline; /* trigger inline-block behaviour in IE < 8 */
 10 |     zoom:1 /* trigger hasLayout in IE < 8 */
 11 | }
 12 | 
 13 | /* The link to twitter */
 14 | 
 15 | .twitter-button:link,
 16 | .twitter-button:visited {
 17 |     float:left;
 18 |     position:relative;
 19 |     overflow:hidden;
 20 |     width:55px;
 21 |     height:20px;
 22 |     text-indent:-999em;
 23 |     background:url(tweet.png);
 24 | }
 25 | 
 26 | .twitter-button:hover,
 27 | .twitter-button:focus {
 28 |     background-position:0 -20px;
 29 | }
 30 | 
 31 | .twitter-button:active {
 32 |     background-position:0 -40px;
 33 | }
 34 | 
 35 | /* The count display */
 36 | 
 37 | .twitter-count:link,
 38 | .twitter-count:visited {
 39 |     position:relative;
 40 |     float:left;
 41 |     min-width:20px;
 42 |     height:18px; 
 43 |     padding:0 4px; 
 44 |     border:1px solid #cee3f0;
 45 |     margin:0 0 0 7px; 
 46 |     line-height:18px;
 47 |     text-decoration:none;
 48 |     color:#2a7090;
 49 |     -webkit-border-radius:2px;
 50 |     -moz-border-radius:2px;
 51 |     border-radius:2px;
 52 | }
 53 | 
 54 | .twitter-count:hover,
 55 | .twitter-count:focus,
 56 | .twitter-count:active {
 57 |     border:1px solid #9dc6e1;
 58 |     text-shadow:0 1px 0 #fff;
 59 |     color:#30566D;
 60 |     background:#e8f3f9;
 61 | }
 62 | 
 63 | /* The count tooltip. Not displayed in IE < 8 */
 64 | 
 65 | .twitter-count:before {
 66 |     content:"";
 67 |     position:absolute;
 68 |     top:50%; 
 69 |     left:-5px;
 70 |     width:5px;
 71 |     height:9px;
 72 |     margin:-4px 0 0;
 73 |     background:url(tweet.png) 0 -60px;
 74 | }
 75 | 
 76 | .twitter-count:hover:before,
 77 | .twitter-count:focus:before,
 78 | .twitter-count:active:before {
 79 |     background-position:-5px -60px;
 80 | }
 81 | 
 82 | /* Vertical variant - Add "vcount" class to "twitter-share"
 83 | -------------------------------------------------------------- */
 84 | 
 85 | .vcount {
 86 |     position:relative;
 87 |     padding-top:42px;
 88 | }
 89 | 
 90 | .vcount .twitter-count {
 91 |     position:absolute; 
 92 |     top:0; 
 93 |     left:0; 
 94 |     width:45px; 
 95 |     height:34px; 
 96 |     margin:0; 
 97 |     text-align:center;
 98 |     font:bold 16px/34px Arial, sans-serif;
 99 | }
100 | 
101 | .vcount .twitter-count:before {
102 |     top:100%;
103 |     left:50%;
104 |     width:9px;
105 |     height:5px;
106 |     margin:0 0 0 -4px;
107 |     background-position:-10px -60px;
108 | }
109 | 
110 | .vcount .twitter-count:hover:before,
111 | .vcount .twitter-count:focus:before,
112 | .vcount .twitter-count:active:before {
113 |     background-position:-10px -65px;
114 | }
115 | 


--------------------------------------------------------------------------------
/tweet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/necolas/custom-tweet-button-for-wordpress/07527f489dd3dc5db4bdeaae697ba375a0c02773/tweet.png


--------------------------------------------------------------------------------