How to add Tweet Count to your Share Button

In late 2015, Twitter deprecated it’s tweet count from their API. Yeah, this kinda sucked.

There is a way to at least count the number of times your Twitter share button is clicked however. There are pros and cons to this method:

Pros

1. It doesn’t increase your page load time loading external scripts
2. It updates immediately

Cons

1. It’s not 100% accurate. It only counts how many times the Twitter share button itself has been clicked. Site visitors can choose not to follow through with the share. This will throw the count off.
2. It only counts clicks since the script was implemented

Still, if having a click count is important to you, read on (and please remember that the following instructions apply only to WordPress sites).

Step 1: Create your custom Tweet button

Please note that I am assuming that you are using FontAwesome v4 here, and have added the script to enable Tooltips

This code will go on the template page or block where your share buttons live.

<?php
	$post_id = $post->ID;
	$title = get_the_title( $post_id );
	$link = get_permalink( $post_id );
	$min_count = 1; // how much number to show if there are no tweets to the post yet
	$count = ( $count = get_post_meta( $post_id, 'post_tweets', true ) ) ? $count : $min_count;
?>
<a class="pixie-tweets" href="https://twitter.com/share?text=<?php echo htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8'); ?>%3A&via=YOURTWITTERID&related=YOURTWITTERID&url=<?php the_permalink(); ?>" data-toggle="tooltip" data-placement="top" title="<?php echo $count ?> Tweet/s" class="pixie-tweets" data-id="<?php echo $post_id; ?>">
	<i class="fa fa-twitter" aria-hidden="true"></i> Twitter
</a>

Replace “YOURTWITTERID” with the ID for your Twitter page (in my case it’s “pixlpixiagency”. Yours will show on your Twitter home page next to the “@” symbol.

Step 2: The jQuery

You will need to put this code in the footer.php file of your theme, right before the </body> tag.

<script>
	jQuery( function( $ ){
		var ajax_url = '//www.YOURURL.com/wp-admin/admin-ajax.php';
		$('.pixie-tweets').click( function(){ // after clicking Tweet button
			var tweetbutton = $(this),
			post_id = tweetbutton.attr( 'data-id' ); // get Post ID

			$.ajax({ // send the info to your server that the Tweet button has been clicked and where
			type:'POST',
			url:ajax_url,
			data:{'post_id' : post_id, 'action' : 'tweet'},
			success:function( data ){
					tweetbutton.find('span').text( data ); // return and display the result count
			}
			});
		});
	});
</script>

Replace “YOURURL” with the url of your WordPress site (in my case it’s “thepixelpixie”.

Step 3: Increase the count, and show the result

This goes in the functions.php file for your theme

function pixie_tweets(){
	$min_count = 1; // what number to show if there are no tweets to the post yet
	$count = ( $count = get_post_meta( $_POST['post_id'], 'post_tweets', true ) ) ? $count : $min_count;
 
	// if current user IP address == the IP of the previous user who clicked the button, skip lines 7-10 of code 
	if( get_post_meta( $_POST['post_id'], 'post_tweets_latest_ip', true ) != $_SERVER['REMOTE_ADDR'] ) {
		$count++;
		update_post_meta( $_POST['post_id'], 'post_tweets', $count );
		update_post_meta( $_POST['post_id'], 'post_tweets_latest_ip', $_SERVER['REMOTE_ADDR'] );
	}
 
	echo $count;
 
	die();
}
 
add_action('wp_ajax_tweet', 'pixie_tweets');
add_action('wp_ajax_nopriv_tweet', 'pixie_tweets');

You can see this in action by hovering over the Twitter share button below.

Have you tried this? Do you have another method? I’d love to hear from you. Please comment below.