Displaying WordPress Author Box Using Twitter API

UPDATE: In a “Reworkesque” effort to use all of our code wisely, we have implemented most code from this post into “the only author box plugin you’ll ever need” – Fanciest Author Box. Check it out.

In our Showing Additional Contact Fields in WordPress Registration Form post you saw how to use additional user contact fields and display them in registration form. This time we’ll dig a little deeper and use Twitter REST API to get some more information about the user and display in a WordPress author box bellow post content.

Before doing anything, we need to add Twitter field to user contact methods:

Now that this is set and all users are blackmailed into adding their Twitter details we don’t need to beg them to add their bios, upload Gravatar images or what not, presuming they have populated their Twitter profiles, of course. Warning: large block of code ahead, PHP to plain English translation bellow.

Once again, we are hooking a custom function (ts_twitter_author_box) into a WordPress filter hook (the_content).

First of all, our function needs to check if a single post is being displayed. If post is shown in an archives page we don’t want to display WordPress author box post content is returned as-is. For this we’re using is_single conditional tag. If a single post is being shown function will grab post author object by using $authordata global variable and check if user has entered Twitter details.

This is where it gets tricky and we need to play it smart. Since Twitter API only allows 150 unauthenticated calls per hour (measured from public facing IP of a server) we have to cache our Twitter request, and to achieve that we will be using Transient API. We’ll simply check if transient named “twitter-info-user-{userID}” exists, use that if it does, make a Twitter API call and create transient if it doesn’t. User ID at the end of transient name will ensure that each user gets a transient.

Using an image of finished product to break a long block of text is a great way of keeping you interested :) Custom CSS applied

We won’t get into too much detail on how Twitter API calls are made, but what we’re basically doing is using a wp_remote_get function to make a GET users/show call in order to grab user information. If the call was successful, our code will transform returned JSON encoded string ($response['body']) into a PHP variable ($twitter_info) which will be used as transient, or cache object, value (line 26). Third parameter (10*60) sets transient expire time to ten minutes, so there will be at most 6 Twitter API calls per user, per hour. Keeping Twitter API limit in mind, that should cover 25 authors, if that doesn’t work for you, set it to a higher value.

With Twitter user information stored as a cached PHP variable, now it’s just a matter of displaying whatever we want displayed in our WordPress author box. And there’s a lot to pick from, check out example request at GET users/show Twitter documentation page to see what you have available.

In this example we’ll grab Twitter username, name, profile image URL, user description and latest Tweet text. In addition to that, we’ll display Twitter Follow button, for which we only need Twitter username.

And in order to make this happen, we needed to create HTML output for it (stored as $twitter_author_box variable in code snippet above):

// Store information we plan to use as variables
$status = $twitter_info->status->text;
$photo = $twitter_info->profile_image_url;
$description = $twitter_info->description;
$screen_name = $twitter_info->screen_name;
$name = $twitter_info->name;

// Append Twitter author box to post content
$twitter_author_box .= '<div class="ts-twitter-author-box">';
	$twitter_author_box .= '<div class="ts-tab-image"><img src="' . $photo . '" /></div>';

	$twitter_author_box .= '<div class="ts-tab-text">';
		$twitter_author_box .= '<h4 class="ts-tab-screen-name">@' . $screen_name . '</h4>';
		$twitter_author_box .= '<p class="ts-tab-description">' . $description . '</p>';

		$twitter_author_box .= '<p class="ts-tab-status">' . $status . '</p>';

		$twitter_author_box .= '<a href="https://twitter.com/' . $screen_name . '" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @' . $screen_name . '</a>';
		$twitter_author_box .= '<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>';
	$twitter_author_box .= '</div>';
$twitter_author_box .= '</div>';

And if you’d rather show your author box before post content:

$content = $twitter_author_box .= $content

That really is all there is to it. WordPress user enters Twitter username into his/her user details, custom function grabs Twitter information, caches it and appends it to WordPress post content. Feel free to use this code wherever appropriate and if you know a way of improving it please post it in the comments.

Leave a Reply

Your email address will not be published. Required fields are marked *