You can download the full code here and reuse it for free on your projects.
I suggest you to take also a look at these posts:
- Simple PHP Twitter Search ready to use in your web projects
- Super simple way to work with Twitter API (PHP + CSS)
- Send messages from a PHP page using Twitter API
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 <body>:
<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>
<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 <head> of the page a link to jQuery:
<script type="text/javascript" src="jquery.js"></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']){
?>
include('search.php');
if($_POST['twitterq']){
$twitter_query = $_POST['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();
foreach($results as $result){
}$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>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
}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>: ';
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){
},2000);
}
$("form#twittersearch").submit(function() {
twitterq = $('#twitterq').attr('value');
$.ajax({
return false;
});
});
</script>
$(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);
});
}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();
}
});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.
