Cached Twitter Profile Widgets in Cakephp
Posted by on Fri, Mar 11 2011 15:33:00
Configuring the Cache
I use the following cache config in my core.php which will cache the tweets for 15 minutes:
Cache::config('social', array(
'engine' => 'File',
'duration'=> 60*15, //15 minutes
));
Retrieving the Tweets
The following pulls the last 5 twitter posts for the user traffick911. It first checks if there is a cached version, and if not it will request the latest tweets from twitter.com. I kept all this in my twitter element, which does break MVC, but it could easily be moved to app_controller.php.
$twitter_response = Cache::read('tweets', 'social');
if(empty($twitter_response)){
App::import('Core', 'HttpSocket');
$HttpSocket = new HttpSocket();
$twitter_response = $HttpSocket->get('http://twitter.com/statuses/user_timeline/traffick911.xml', 'count=5');
if(strlen($twitter_response)>0){
Cache::write('tweets', $twitter_response, 'social');
}
}
Displaying the Tweets
To actually display the tweets I basically copied the HTML and CSS produced by the twitter widget and converted it into an element:
HTML:
<div class="twtr-doc" style="width: 300px;">
<div class="twtr-hd"><a target="_blank" href="http://twitter.com/traffick911" class="twtr-profile-img-anchor">
<img alt="profile" class="twtr-profile-img" src="http://a3.twimg.com/profile_images/544416859/traffick_two_FLAT_edited_normal.jpg" /></a>
<h3>Traffick911</h3>
<h4><a target="_blank" href="http://twitter.com/Traffick911">Traffick911</a></h4>
</div>
<div class="twtr-bd">
<div class="twtr-timeline" style="height: auto;">
<div class="twtr-tweets">
<?php if(!empty($twitter_response)):
$tweets=new SimpleXMLElement($twitter_response);?>
<?php foreach($tweets as $tweet):?>
<div class="twtr-tweet">
<div class="twtr-tweet-wrap">
<div class="twtr-avatar">
<div class="twtr-img">
<a target="_blank" href="http://twitter.com/<?php echo $tweet->user->name;?>">
<img alt="Traffick911 profile" src="<?php echo $tweet->user->profile_image_url;?>" />
</a>
</div>
</div>
<div class="twtr-tweet-text">
<p>
<a target="_blank" href="http://twitter.com/<?php echo $tweet->user->name;?>" class="twtr-user"><?php echo $tweet->user->screen_name;?></a>
<?php
$message=preg_replace("/http:\/\/(.*?)\/[^ ]*/",'\\0',$tweet->text);
$message=ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]","<a href=\"\\0\" rel=\"nofollow\">\\0</a>",$message);
echo $message;?>
<em> <a target="_blank" class="twtr-timestamp" href="http://twitter.com/<?php echo $tweet->user->name?>/status/<?php echo $tweet->id?>"><?php echo $this->Time->timeAgoInWords(strtotime($tweet->created_at) + $tweet->utc_offset);?></a>
<a target="_blank" class="twtr-reply" href="http://twitter.com/?status=@<?php echo $tweet->user->name?>%20&in_reply_to_status_id=<?php echo $tweet->id?>&in_reply_to=<?php echo $tweet->user->name?>">reply</a> </em>
</p>
</div>
</div>
</div>
<?php endforeach;?>
<?php else:?>
<div class="twtr-tweet">
<div class="twtr-tweet-wrap">
<div class="twtr-tweet-text">
<p>
Tweets could not be loaded at this time.
</p>
</div>
</div>
</div>
<?php endif;?>
</div>
</div>
</div>
<div class="twtr-ft">
<div><a target="_blank" href="http://twitter.com"><img alt="" src="http://widgets.twimg.com/i/widget-logo.png" /></a>
<span><a target="_blank" class="twtr-join-conv" style="color:#ffffff" href="http://twitter.com/traffick911">Join the conversation</a></span>
</div>
</div>
</div>
CSS:
The easiest way to generate the css is to go to http://twitter.com/about/resources/widgets/widget_profile and actually design your widget- then just copy and paste it into your stylesheet.