Twitter API: How to create a stream of messages Monitter-like with PHP and jQuery

 This tutorial illustrates a very simple way to work with the Twitter API in order to implement a search in the Twitter public timeline and display search results with an animated stream of messages (tweets) similar to Monitter. In this example I used PHP, jQuery and a very useful Twitter Search API for PHP based on the work of David Billingham and actually developed by Ryan Faerman. This implementation is very simple to customize and integrate on your project. The result is something linke this:

You can download the full code here and reuse it for free on your projects.

1. A little introduction

This package contains the following files:

– index.php: page with the search form + search results
– search.php: PHP search
– twitterapi.php: Twitter Search API for PHP
– jquery/jquery-1.3.2.min.js: jQuery framework

How it works? After submission the search form calls an ajax request to the page search.php that returns search results into an array. Each element of the array (every single tweet) appears into the div twitter-results with a nice fade-in effect. I set a delay between each tweet equal 2 seconds (2000 ms).

I suggest you to take a look at Monitter, and download the full code to try this tutorial on your local host. Now, take a look at the code.

2. index.php: HTML code

HTML code is very simple. Copy the following code in the tag :

<div class="twitter_container">
<form id="twittersearch" method="post" action="">
<input name="twitterq" type="text" id="twitterq" />
<button type="submit">Search</button>
</form>
<div id="twitter-results"></div>
</div>

…and add into the tag of the page a link to jQuery:

<script src="jquery.js" type="text/javascript">
</script>

The result is a simple search form:

3. search.php

Now copy and paste the following code into search.php:

<?php
include('search.php');
if($_POST['twitterq']){
$twitter_query = $_POST['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();

foreach($results as $result){
echo '<div class="twitter_status">';
echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a&glt;: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
}
}
?>

$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:

foreach($results as $result){
...
}

… and to get a specific attribute of the array I used this simple code:

$result->name_of_element

Take a look at this post for info about the search on Twitter.

4. index.php: JavaScript Code

Now take a look at the following JavaScript code that enables an ajax request for the search and display results into the page index.php with a fade in effect and a delay between each tweet equal to 2 seconds:

<script type="text/javascript">
$(document).ready(function(){
var twitterq = '';

function displayTweet(){
var i = 0;
var limit = $("#twitter-results > div").size();
var myInterval = window.setInterval(function () {
var element = $("#twitter-results div:last-child");
$("#twitter-results").prepend(element);
element.fadeIn("slow");
i++;
if(i==limit){
window.setTimeout(function () {
clearInterval(myInterval);
});
}
},2000);
}

$("form#twittersearch").submit(function() {
twitterq = $('#twitterq').attr('value');
$.ajax({
type: "POST",
url: "search.php",
cache: false,
data: "twitterq="+ twitterq,
success: function(html){
$("#twitter-results").html(html);
displayTweet();
}
});
return false;
});
});
</script>

This is a very basic implementation you can modify to get a real-time stream of messages for example calling a new ajax request (to search.php) every time the current array with the search results is totally displayed in the page.

That’s all. If you have some suggestion please add a comment. Thanks!
You can download the full code of this tutorial here and reuse it on your projects.