This tutorial shows you how to build a page with your twitter tweets. Features include
- displaying your own tweets
- displaying your friends (the ones your are following) tweets
- multiple pages tweets
- cache tweets
After researching for the twitter scripts that interact with twitter API, I chose this one developed by NC State University. The advantage of this script is that it keeps your tweets in cache. So if twitter goes down your site can still be running. Also it supports paginating, so you can display multiple pages of tweets.
Can’t wait to see a Demo
Pre-requests
- Have MAMP or XAMP running on your computer
- know a little php
Step 1: Downloading…
Download NC state’s script . Since this script is based on a library in Zend Framework. You have to download that one too.
Step 2: Put files in the right directory
- Unzip NC state’s script into htdocs folder ( Im using MAMP)
- make a folder named Zend under inc
- copy Zend Frameworks library into Zend folder
- Add permissions for the web server to write to /cache.
Step 3: Twitter user name and password
Open Ncsutwitter.php under inc folder. Put your twitter user name and password.
Step 4: Test it
Now go to your local server and make sure you can see your friend’s tweets. If you use MAMP the local server is http://localhost:8888/twitter/
Step 5: Make it display your own tweets
The code below from Ncsutwitter.php is the function (getTimeline) that fetch the tweets from your friend’s timeline and store them in cache
public function getTimeline($page = 1) { $cache = $this->_initCache(); $resultsPerPage = 40; $data = array(); try { $twitter = new Zend_Service_Twitter(self::USERNAME, self::PASSWORD); $timeline = $twitter->status->friendsTimeline(array('page' => $page, 'count' => $resultsPerPage)); foreach ($timeline as $t) { $data[] = array( 'id' => (string)$t->id, 'user-profile_image_url' => (string)$t->user->profile_image_url, 'user-name' => (string)$t->user->name, 'user-screen_name' => (string)$t->user->screen_name, 'text' => $this->_processTweet((string)$t->text), 'created_at' => (string)$t->created_at, 'elapsed_time' => $this->_elapsedTime(strtotime($t->created_at)), 'source' => (string)$t->source, 'in_reply_to_screen_name' => (string)$t->in_reply_to_screen_name, 'in_reply_to_status_id' => (string)$t->in_reply_to_status_id, ); } if ($page == 1) { $cache->save($data, 'timeline'); } } catch (Exception $e) { if ($page != 1 || !$data = $cache->load('timeline')) { throw $e; } } return $data; }
Now I modified the above code a little to make another function (getMyTimline) that displays your own tweets.AS you can see there isn’t much change here. Copy this code under getTimeline function in Ncsutwitter.php
public function getMyTimeline($page = 1) { $cache = $this->_initCache(); $resultsPerPage = 40; $data = array(); try { $twitter = new Zend_Service_Twitter(self::USERNAME, self::PASSWORD); $mytimeline = $twitter->status->userTimeline(array('page' => $page, 'count' => $resultsPerPage)); foreach ($mytimeline as $m) { $data[] = array( 'id' => (string)$m->id, 'user-profile_image_url' => (string)$m->user->profile_image_url, 'user-name' => (string)$m->user->name, 'user-screen_name' => (string)$m->user->screen_name, 'text' => $this->_processTweet((string)$m->text), 'created_at' => (string)$m->created_at, 'elapsed_time' => $this->_elapsedTime(strtotime($m->created_at)), 'source' => (string)$m->source, 'in_reply_to_screen_name' => (string)$m->in_reply_to_screen_name, 'in_reply_to_status_id' => (string)$m->in_reply_to_status_id, ); } if ($page == 1) { $cache->save($data, 'mytimeline'); } } catch (Exception $e) { if ($page != 1 || !$data = $cache->load('mytimeline')) { throw $e; } } return $data; }
Step 7: Prepare some files
- Make a file called friends.php in root directory to display your friend’s tweets
- Copy the code below into friends.php.
This code displays your friends’ tweets
<h2 class="tweetHeader">My Friends' Tweets</h2> <div class="tweet"> <div class="avatar"><img src="<?php echo $t['user-profile_image_url']; ?>" alt="<?php echo $t['user-name']; ?>" width="48" height="48" /></div> <div class="text"><a class="username" href="http://twitter.com/<?php echo $t['user-screen_name']; ?>"></a> </div> <div class="origination"> from <a class="user" href="http://www.twitter.com/<?php echo $t['in_reply_to_screen_name']; ?>/status/<?php echo $t['in_reply_to_status_id']; ?>">in reply to </a> </div> </div> <a class="twitterButton" href="index.php?page=<?php echo $page + 1; ?>">More...</a> Oops! Twitter is currently down.
- Make a file called mine.php in root directory
- Copy the code below into mine.php.
This code displays your own tweets
<h2 class="tweetHeader">My Tweets</h2> <div class="tweet"> <div class="avatar"><img src="<?php echo $m['user-profile_image_url']; ?>" alt="<?php echo $m['user-name']; ?>" width="48" height="48" /></div> <div class="text"><a class="username" href="http://twitter.com/<?php echo $m['user-screen_name']; ?>"></a> </div> <div class="origination"> from <a class="user" href="http://www.twitter.com/<?php echo $t['in_reply_to_screen_name']; ?>/status/<?php echo $m['in_reply_to_status_id']; ?>">in reply to </a> </div> </div> <a class="twitterButton" href="index.php?page=<?php echo $page + 1; ?>">More...</a> Oops! Twitter is currently down.
Step 8: index.php
I used Domtab to display my tweets in tabs. It will only take a minute to learn to use domtab.If you use the same tab script you can just use my index.php file here
<script src="domtab/domtab.js" type="text/javascript"><!--mce:0--></script> <div id="headerwrapper"> <div id="header"> <h1>Build Your Site with Twitter Tweets</h1> </div> </div> <div id="content"> <div id="main" class="domtab fl"> <ul class="domtabs"> <li><a href="#t1">My Tweets</a></li> <li><a href="#t2">Following</a></li> </ul> <div class="tab_content"> <a id="t1" name="t1"></a> getMyTimeline($page); } catch (Exception $e) { $down = true; } ?> <a href="#top">back to menu</a></div> <div class="tab_content"> <a id="t2" name="t2"></a> getTimeline($page); } catch (Exception $e) { $down = true; } ?> <a href="#top">back to menu</a></div> </div> <div id="sidebar" class="fr"> <h1>Your Sidebar</h1> This page is based on your twitter tweets. Two tabs displays your own tweets and the tweets on your timeline. Go back to tutorial</div> </div> <div id="footer" class="clear"> <h1>Footer</h1> </div>
If you would like to use another tab script. The code the for first tab’s content is here:
getMyTimeline($page); } catch (Exception $e) { $down = true; } ?>
The code for the second tab’s content is here:
getTimeline($page); } catch (Exception $e) { $down = true; } ?>
Here you can download all the code I have used. I didn’t include zend framework’s library. Please follow step 2 and put the library in the right folder.
