CSS

Create A Twitter Profile Card With API V1.1

When Twitter announced that they will shutting down the API V1 people have been switching over their applications to use the new API. All calls to the API have now been changed to be authenticated, when before all calls to Twitter could be made anonymously. This is so Twitter can prevent abusive behaviour of their API.

If you are using WordPress, I wrote a previous tutorial about how you can create a WordPress widget to display you latest Twitter updates.

Using The New Twitter API V1.1

But if your not using WordPress then in this tutorial you will learn how you can use the new API to get the information about a Twitter profile. You can then use this information to build you own Twitter profile card.

twitter-profile-card

Demo

First we need to start off the by creating our Twitter application and downloading the TwitterOAuth PHP classes.

Create An Application On Twitter

To start using the new API you need to be authenticated, which means Twitter needs to have certain information about your application and how it is going to be used so that it will provide you with access keys to use the API.

To get the access keys you need to create an application on the Twitter Developer site.

Create an application - Twitter Developers

Twitter Developers Once your application is created Twitter will generate your Oauth settings and your access tokens to your new application. You will need to use this data when connecting to the Twitter Oauth to query the Twitter API.

Download Twitter OAUTH PHP Class

With all the data we need to connect to the Twitter OAUTH we now need a way of connecting to the API, Twitter has created a collection of libraries that will allow you to connect to the new API in any language you are using.

Twitter API Libraries

As this application is using WordPress we are going to use one of the PHP libraries called Twitteroauth which you can download for free from Github.

Twitteroauth

This library comes with 2 classes which make it really easy to connect to Twitter using OAuth and in this tutorial we will see how easy it is by getting a list of the latest tweets.

Twitter API Methods

Using the new API you have access to loads of data on Twitter there are too many methods available to go through them one by one but here are the groups of content to can get.

  • Timelines - Timelines are collections of Tweets, ordered with the most recent first.
  • Tweets - 140-character status updates with additional associated metadata.
  • Search - Find relevant Tweets based on queries performed by your users.
  • Streaming
  • Direct Messages
  • Friends & Followers - Get both friends and followers of a profile.
  • Users - Get data about a user.
  • Suggested Users
  • Favorites
  • Lists - Lists are collections of tweets, culled from a curated list of Twitter users.
  • Saved Searches
  • Places & Geo
  • Trends
  • Spam Reporting
  • OAuth
  • Help

To view all methods available to use on the Twitter V1.1 API have a look at the documentation here.

Twitter V1.1 API Methods

Create A Class To Call The API

To start off our application we are going to create a class that we can use to make a call to the Twitter API. We start off by creating class variables, these will be used as the keys to connect to start the oauth for the Twitter API. These will be populated by default with your own keys from your application you created on Twitter.

class TwitterProfile
{
	private $consumerKey       = '';
	private $consumerSecret    = '';
	private $accessToken       = '';
	private $accessTokenSecret = '';
	private $twitterConnection = false;

	public function __construct()
	{
		$this->twitterConnection = new TwitterOAuth(
								$this->consumerKey,
								$this->consumerSecret,
								$this->accessToken,
								$this->accessTokenSecret
							);
	}
}

We can turn this class into a wrapper for all the calls to the Twitter API, by creating a method to call each of the Twitter methods. In this tutorial we are just going to get the profile information so we are only going to create a method to get a method.

To get the profile information we need to use the get method and pass in the parameters which we want to use users/show/username.

public function getProfile($username)
{
        $twitterData = $this->twitterConnection->get(
	  'users/show/'.$username
	);

	if($this->twitterConnection->http_code != 200)
        {
             return false;
        }

	return $twitterData;
}

The above method will return all the data for this certain user, now we can parse this data to display exactly what we want on the Twitter profile.

Below is the full class we can use as the class to get the Twitter profile.

<?php

require_once 'twitteroauth/twitteroauth.php';

/**
 * A PHP class to call the Twitter API.
 *
 * @package default
 * @author
 **/
class TwitterProfile
{
	private $consumerKey       = '';
	private $consumerSecret    = '';
	private $accessToken       = '';
	private $accessTokenSecret = '';
	private $twitterConnection = false;

	public function __construct()
	{
		$this->twitterConnection = new TwitterOAuth(
								$this->consumerKey,
								$this->consumerSecret,
								$this->accessToken,
								$this->accessTokenSecret
							);
	}

	public function getProfile($username)
	{
		$twitterData = $this->twitterConnection->get(
					  'users/show/'.$username
					);

		if($this->twitterConnection->http_code != 200)
	    {
	        return false;
	    }

		return $twitterData;
	}

	public function getTweets($username, $count = 10, $excludeReplies = false)
	{
		$twitterData = $this->twitterConnection->get(
					  'statuses/user_timeline',
					  array(
					    'screen_name'     => $username,
					    'count'           => $count,
					    'exclude_replies' => $excludeReplies
					  )
					);

		if($this->twitterConnection->http_code != 200)
	    {
	        return false;
	    }

	    return $twitterData;
	}


} // END class TwitterProfile
?>

Display Twitter Profile Card

With the Twitter profile class now returning the data from the Twitter V1.1 API we can now use this data in our application to display this on the page.

First start off by creating a new instance of the TwitterProfile class and get the profile information for the paulund profile. When this data returns from the API we now have a variable storing an object populated with the profile information.

<?php
require_once 'TwitterProfile.php';

$twitter = new TwitterProfile();
$profileInfo = $twitter->getProfile('paulund');

	if(!empty($profileInfo))
	{
	?>
		<section class="twitter_profile">
			<div class="profile_header">
				<img src="<?php echo $profileInfo->profile_image_url; ?>" alt="<?php echo $profileInfo->name; ?>" />
				<h1><?php echo $profileInfo->name; ?></h1>
				<h3><a href="http://twitter.com/<?php echo $profileInfo->screen_name; ?>">@<?php echo $profileInfo->screen_name; ?></a></h3>
			</div>

			<div class="followers_count_block">
				<div class="followers_count">
					<ul>
						<li><strong><?php echo number_format($profileInfo->statuses_count); ?></strong><br/>Tweets</li>
						<li><strong><?php echo number_format($profileInfo->friends_count); ?></strong><br/>Following</li>
						<li><strong><?php echo number_format($profileInfo->followers_count); ?></strong><br/>Followers</li>
					</ul>
				</div>
			</div>

			<div class="follow_button_block">
				<div class="follow_button">
					<a href="http://twitter.com/<?php echo $profileInfo->screen_name; ?>" class="twitter_follow_button">Follow Me</a>
				</div>
			</div>
		</section>
	<?php } ?>

Style The Twitter Profile Card

With the profile information now being displayed on the Twitter card we can now style the profile to look how ever we want. If you want to make the profile look the same as mine, here is the CSS I used.

.twitter_profile
{
	width:400px;
	margin: 0 auto;
	box-shadow: 0 0 3px 3px #555;
}

.profile_header
{
	height:140px;
	border-radius: 5px 5px 0 0;
	background:#2bb5dc;
	padding:15px 25px;
	box-sizing: border-box;
	width: 100%;
}
.profile_header h1, .profile_header h3
{
	color:#FFF;
	float:right;
	margin:0;
	padding:0;
	width:60%;
}
.profile_header h3
{
	font-size: 16px;
}
.profile_header h3 a
{
	color: #FFF;
	text-decoration: none;
}
.profile_header img
{
	border-radius: 50%;
	width:100px;
	height:100px;
	border:6px solid #2bb5dc;
	box-shadow: 0 0 0 4px #FFF;
	float:left;
}

.followers_count_block
{
	background:#FFF;
	display: inline-block;
	font-size: 14px;
	padding:15px 25px;
	box-sizing: border-box;
	width: 100%;
}
.followers_count_block .followers_count
{
	height:75px;
}

.followers_count ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}
.followers_count ul li
{
	display:inline-block;
	margin:0;
	padding:20px 0;
	width:32%;
	text-align: center;
	background:#eee;
}
.followers_count ul li:hover
{
	background:#ddd;
	cursor: pointer;
}
.follow_button_block
{
	background:#eee;
	padding:15px 25px;
	box-sizing: border-box;
	width: 100%;
}

.follow_button_block .twitter_follow_button
{
	background:#e7613c;
	color: #FFF;
	text-decoration: none;
	padding:5px 30px;
	margin:0 auto;
	display:block;
	text-align: center;
	width:150px;
}
.follow_button_block .twitter_follow_button:hover
{
	background:#e3481e;
}

To view the demo of the Twitter profile you can view it on the demo page here.

Demo

If you want to download the full code of this demo you can find the project on Github.

Github

Back to top

Fastest WordPress Hosting With WPEngine

Stunning speed, powerful security, and best-in-class customer service. At WP Engine.

Risk free for 60 days