Sam Bernard

twitter

Cached Twitter Profile Widgets in Cakephp

Posted by Sam Bernard 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&amp;in_reply_to_status_id=<?php echo $tweet->id?>&amp;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.