This week, Twitter rolled out their new, one-click Follow Button, which makes it easy for users to quickly follow Twitter accounts on any website they visit. Now, with Google officially rolling out their +1 buttons, one wonders whether yet another social media button is necessary. I personally like the new Twitter buttons, as it cuts the number of clicks for users to follow a Twitter account to just one. In fact, I’ve already added the Twitter buttons to this site. Take a look at the sidebar right now.

Creating a Follow button is painless. Just visit https://twitter.com/followbutton and configure the button to your liking. The code looks like this:

<a href="http://twitter.com/tonykhue" class="twitter-follow-button" data-show-count="false">Follow @tonykhue</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

There are four options to customize including the username, color scheme, follow count, and language. For further documentation about the new Twitter button, visit this page.

Now, back to point of this post.

As I was reading ZDNet this evening, I noticed how the author bios at the end of each post had the new Follow button.

What got me even more intrigued was how the buttons changed according to the post author. So, if the post was written by “John Doe,” the button would link to @johndoe.

How did they do it? Let’s dig in!

The code below displays my author bio at the end of every post. The problem here is that every author bios would display a Follow button to the same account. We want it to change dynamically according to the actual post author.

<div class="about-author clearfix">
          <?php echo get_avatar(get_the_author_meta('ID'), 48); ?>
		 <h4>Written by:  <?php the_author(); ?> </h4>
		 <?php the_author_meta('description'); ?>
			 <!--Twitter follow button -->
		 <a href="http://twitter.com/tonykhue" class="twitter-follow-button">Follow @tonykhue </a>
		 <script src="http://platform.twitter.com/widgets.js" type="text/javascript"> </script>								
 </div>

The solution

This solution requires that you add a new custom contact user field to WordPress. Visit this tutorial for more: http://thomasgriffinmedia.com/blog/2010/09/how-to-add-custom-user-contact-info-in-wordpress/

Once you’ve completed that tutorial, your Contact Info section in your WordPress user profile page should look like so:

From there, I modified the author bio code above to the following:

<div class="about-author clearfix">
       <?php echo get_avatar(get_the_author_meta('ID'), 48); ?>
	   <h4>Written by: <?php the_author(); ?></h4>
           <?php the_author_meta('description'); ?>

       	 <?php if ( !get_the_author_meta('twitter', $current_author->ID) ) : ?> 
                <!--no Twitter info provided -->
		<a href="http://twitter.com/loneplacebo" class="twitter-follow-button">Follow @loneplacebo</a>
		<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>	
					
	<?php else : ?> 
                <!--link to author's twitter account-->
		<a href="<?php the_author_meta('twitter', $current_author->ID); ?>" class="twitter-follow-button">Follow @tonykhue</a>
		<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
	<?php endif; ?>

</div>

Let’s take a look at what’s happening here…First, in line 6, we check whether any information was provided for the Twitter field in the author’s profile. If one is provided, then the code outputs a Follow button linking to the author’s Twitter account.

Unfortunately, the code has a few bugs. For instance, if no Twitter info is provided, the code will not fall back to the default button as expected. In addition, if the Twitter info is incorrectly provided (ie, listing your Facebook url), then the code will display just that information.

Of course, if the author has correctly filled out the Twitter info, everything should work just fine! Any ideas on how to update the code is much appreciated.

Update: After consulting Stack Overflow, I found out that I should be using get_the_author() instead of the_author. Thanks dpacmittal!