TwitterCounter for @bigclick_dean

dBlog.com.au

My Development Blog

Posts Tagged ‘ twitter ’

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% [?]

Hi Everyone,

Sorry about the delays, I have been flat out with changing jobs (starting my own business actually) and getting all that setup and running smoothly.

I am hoping to get back into the iPhone tutorial writing headspace very soon and I have some great ideas to put down, the first one will be a lengthy (probably 10 part) tutorial series on developing a complete RSS application that uses SQLite, XML, Multiple Views, Save States, Caching, etc

I also have a simple puzzle game in the works that I would love to turn into another tutorial series so you can get a jump start on your iPhone Game Development.

Being in the Web/Application Development “scene” I have decided to give the whole Twitter craze a go and to see what all the fuss is about, so you can follow me by clicking the icon on the right.

If youo have any ideas or anything you would like me to write about then please leave a comment and I will give you a buzz.

Thanks,
Dean

P.S. Check out my new business at http://www.bigclick.com.au

Popularity: 3% [?]