Why did I do it?
While working on a client project I needed a way to heavily integrate with Twitter for an interactive competition. I could have built a quick and dirty script to do this but I knew that I would be dealing with more clients that wanted Twitter integration.
What did I do?
I built a CakePHP Component to access all the Twitter API features along with the Twitter Search API for Searching/Trending.
There are already some Twitter API components for CakePHP but they all had their own little bits that I didn’t like so I decided to whip one up and share it for everyone to use.
As the component is 1140 lines I wont be posting it here in the article, but you can view the source code here.
How does it all work?
There is nothing like a fully functioning example to show you how to use it! So I have built a quick replica of the Twitter homepage to give you a feel for it.
View the example first to see what we will be building, it is updated every refresh and everything is pulled straight from Twitter’s API.
First up you will need to put the Twitter Component into your /app/controllers/components/ folder and call it twitter.php, you can find the text version here or download the source files at the bottom of the page.
Now create a new controller called twitter_controller.php and put the following content into it. Don’t forget to change the {USERNAME} and {PASSWORD} place holders to your Twitter details.
<?php
/**
* Twitter Controller
*
* This class is used to manage twitter communication
*
* @version 0.1
* @author Dean Collins <dean@bigclick.com.au>
* @project dblog
*/
class TwitterController extends AppController {
/**
* Controller Name
* @access public
* @var string
*/
var $name = 'Twitter';
/**
* Components that are used in this controller
* @access public
* @var array
*/
var $components = array('Twitter');
/**
* Models that are used in this controller
* @access public
* @var array
*/
var $uses = array();
/**
* Helpers
* @access public
* @var array
*/
var $helpers = array('Text', 'Html');
/**
* Default action
*
* The index function is used as a default action, in this case it will replicate your twitter page
*/
function index() {
$this->layout = 'twitter';
$this->Twitter->username = '{USERNAME}';
$this->Twitter->password = '{PASSWORD}';
// Grab the recent activity
$feed = $this->Twitter->statuses_friends_timeline();
// Grab the users details
$user_details = $this->Twitter->account_verify_credentials();
// Get your friends
$friends = $this->Twitter->statuses_friends();
// Get your followers
$followers = $this->Twitter->statuses_followers();
$this->set('feed', $feed);
$this->set('user_details', $user_details);
$this->set('friends', $friends);
$this->set('followers', $followers);
}
}
?>
Now create a new layout in your /app/views/layouts/ called twitter.ctp and put the following content in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CakePHP/Twitter API Example</title>
<style type="text/css">
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
</head>
<body>
<div style="top: 0px; left: 0px; width: 100%; height: 45px; padding-top: 20px; margin-bottom: 10px;">
<div style="width: 800px; margin: 0 auto;">
<h1 style="font-size: 24px;">CakePHP Twitter API Class Example</h1>
</div>
</div>
<?php echo $content_for_layout; ?>
</body>
</html>
Finally create a new view under /app/views/twitter/ called index.ctp and put the following content in:
<style type="text/css">
body { font-size: 12px; font-family:Arial, Helvetica, sans-serif; background-image: url('<?php echo $user_details['User']['profile_background_image_url']; ?>'); background-attachment: fixed; background-repeat: no-repeat; }
.status_update img, .avatar { float: left; width: 48px; height: 48px; margin-right: 10px; }
.status_update { overflow: hidden; color: #333333; font-size: 12px; padding: 5px; border-bottom: 1px dashed #333; }
.status_update:hover { background-color: #CFF }
a {color: #0084B4;}
#lcol { width: 600px; border-right: 1px solid #333; float:left; }
#rcol { width: 180px; padding: 10px; float:left;}
#wrapper {width: 801px; margin: 0 auto; border: 1px solid #333; overflow: hidden; background-color: #FFFFFF}
#user_stats { margin-left: 15px; overflow: hidden; }
#user_stats a { color: #333333; display: block; float: left; font-size: 20px; text-align:center; text-decoration:none; background-color: transparent;}
#user_stats a span { font-size: 12px; color: #0084B4; }
#profile_title { font-size: 18px; margin-bottom: 10px; overflow: hidden; }
.avatar_small { width: 24px; height: 24px; }
.avatar_list { list-style: none; list-style-type:none; overflow: hidden }
.avatar_list li { float: left; }
#rcol h2 { font-size: 18px; padding: 5px; margin-bottom: 5px; margin-top: 10px; }
</style>
<div id="wrapper">
<div id="lcol">
<ol>
<?php foreach($feed['Statuses']['Status'] as $status) { ?>
<li class="status_update">
<img src="<?php echo $status['User']['profile_image_url']; ?>">
<p><?php echo $status['text']; ?></p>
</li>
<?php } ?>
</ol>
</div>
<div id="rcol" style="background-color: #<?php echo $user_details['User']['profile_sidebar_fill_color']; ?>">
<div id="profile_title">
<img class="avatar" src="<?php echo $user_details['User']['profile_image_url']; ?>"/>
<?php echo $user_details['User']['screen_name']; ?>
</div>
<strong>Name</strong> <?php echo $user_details['User']['name']; ?><br/>
<strong>Location</strong> <?php echo $user_details['User']['location']; ?><br/>
<strong>Web</strong> <a href="<?php echo $user_details['User']['url']; ?>"><?php echo $text->truncate($user_details['User']['url'], 20, '...'); ?></a><br/>
<strong>Bio</strong> <?php echo $user_details['User']['description']; ?><br/>
<div id="user_stats">
<a href=""><?php echo $user_details['User']['friends_count']; ?><br/><span>following</span></a>
<a href="" style="margin-left: 20px;"><?php echo $user_details['User']['followers_count']; ?><br/><span>followers</span></a>
</div>
<h2>Followers</h2>
<ul class="avatar_list">
<?php foreach($followers['Users']['User'] as $follower) { ?>
<li><a href="http://www.twitter.com/<?php echo $follower['screen_name']; ?>/" target="_blank"><img alt="<?php echo $follower['screen_name']; ?>" width="24" height="24" class="avatar_small" src="<?php echo $follower['profile_image_url']; ?>"/></a></li>
<?php } ?>
</ul>
<h2>Following</h2>
<ul class="avatar_list">
<?php foreach($friends['Users']['User'] as $follower) { ?>
<li><a href="http://www.twitter.com/<?php echo $follower['screen_name']; ?>/" target="_blank"><img alt="<?php echo $follower['screen_name']; ?>" width="24" height="24" class="avatar_small" src="<?php echo $follower['profile_image_url']; ?>"/></a></li>
<?php } ?>
</ul>
</div>
</div>
And that’s it! You can head to http://yourcakeinstall.com/twitter and you should see a Twitter-like page with all your details with friends, followers, tweets, etc.
You can see my example over here
There is ALOT you can do with the data from Twitter so please let me know if you build something using this component and I will chuck a link up here for you.
Download the Source Files
You can download the source files, including the above example below.
CakePHP/Twitter API Component Download
Don’t forget to follow me on twitter and subscribe to my RSS to stay in the loop.
Popularity: 1% [?]
Its good article and tutorial. As mentioned by some one previousl...
Hi,
Just replying to my own mail about not seeing the data change...
Hi,
Really great tutorial. But I’ve got one problem i.e. i...
jgraham,
I am facing same issue, opening itunes URL from within w...