Add Social Sharing Counter Buttons to Each Post – Twitter, Facebook, Google +1

This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.

The look you’re going for is common on the individual posts of many popular sites. In fact, you can see one set of “counter” buttons to the left of this very article.

Other topics from the User Guide, such as “Adding Social Media Icons” discuss adding static images that link to social networks or other locations.

However, the goal here is to get the dynamic “count” editions of Tweet, Like, and +1 buttons. Visitors see these number counters as indications of overall quality and buzz, a concept often referred to as social proof.

Before we get social proof, we need to “prove” that adding counter buttons is easy!

You’ll need to know only a few details to use this tutorial — your Twitter username being one. Aside from that, the code below handles all the basics.

For advanced users, selecting different buttons and options can be done via the source of the Twitter button, Facebook’s Like Box, and Google’s Plus One Button. Also note that both Google and Facebook will draw from the same Open Graph Meta Tags if these are supplied by the site.

Adding Single-Post Social Counters — the PHP

What we need to do is output the Twitter, Facebook, and Google buttons, only on single posts, and we need to wrap these three sections in a unique div class for later styling.

In the below, change “diythemes” to your Twitter name — this is important because when people use your Twitter Button, after they tweet, Twitter will recommend to the tweeter to follow you (if they aren’t already).

This function could be separated into three components, with one function for each of the three social counter buttons — the Google code involving asynchronous script calls might also be placed elsewhere. But to get this rolling, it’s all here in a bundle for you!

Add this to your custom_functions.php file contents:

function float_social_counters_on_posts() {
if (is_single()) {
	global $post;
	echo '<div class="social-post"><div class="counter-twitter"><a data-related="diythemes" href="http://twitter.com/share" class="twitter-share-button" data-text="' . get_the_title($post->ID) . ' &#8212;" data-url="' . get_permalink($post->ID) . '" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>' . "\n";
?>
	<div class="counter-fb-like">
	<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=144342085643119&amp;xfbml=1"></script><fb:like layout="box_count" href="<?php the_permalink(); ?>" send="false" width="50" show_faces="false"></fb:like>
	</div>
	<script type="text/javascript">
		(function() {
		var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
		po.src = 'https://apis.google.com/js/plusone.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  		})();
	</script>
	<div class="counter-google-one"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></div></div>
	<?php }
}
add_action('thesis_hook_post_box_top', 'float_social_counters_on_posts');

If you’ve added the above and changed your Twitter username, you should already see the counter buttons on your single posts.

But as usual, there’s a need for a touch of style.

Adding Single-Post Social Counters — the CSS

To get these buttons to the left of the post’s contents, we need to describe the new counter buttons in relation to the post, then move them around.

Add this to your custom.css file contents:

.custom .post_box { position:relative; }
.custom .social-post { left:-8.6em; position:absolute; top:3.0em; }
	.custom .counter-twitter { margin-bottom:1.4em; margin-left:0em; }
	.custom .counter-fb-like { margin-bottom:1.6em; margin-left:0.5em; }
	.custom .counter-google-one { margin-bottom:1.4em; margin-left:0.2em; }

The first line tells the “post_box” to act in a relative position, which then allows the second line to act in an absolute position compared to the post.

Depending on your design modifications and other factors, the numbers in the second line, and the three following it, may need adjusted to match your site.

That’s all there is to it!

Now you’ve got the tools to make a set of three social media “counter” images on each of your posts.

These counter images encourage visitor engagement, promote social sharing, and offer visible “social proof” on your site — without a single plugin!