Update Timeline using Jquery as in Twitter | Live Twitter Search using PHP
anoopsachari | Aug 20, 2010 | Comments 3
Hello friends back to blogging after sometime . Recently i got a mail from one of my friend asking about how can we update a timeline using an animation effect as in twitter timeline .
Here i am giving you a code in jquery that would help you to implement the same .
I have also added a search feature in the code . Just check the demo .
The package contains 3 main files . 1.index.php 2.search.php and a 3.twitterapi.php
code within index.php
<!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=ISO-8859-1" />
<title>Twitter Search Flow</title>
<style type="text/css">
.woork{
color:#444;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
width:600px;
margin: 0 auto;
}
.twitter_container{
color:#444;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
width:450px;
margin: 0 auto;
background:#DEDEDE;
padding:8px;
}
.twitter_container a{
color:#0066CC;
}
.twitter_status{
height:60px;
padding:6PX;
border-bottom:solid 1px #DEDEDE;
background:#FFF;
}
.twitter_image{
float:left;
margin-right:14px;
border:solid 2px #DEDEDE;
width:50px;
height:50px;
}
.twitter_small{
font-size:11px;
padding-top:4px;
color:#999;
display:block;
}
#twitter-results{padding-top:8px;}
</style>
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<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>
</head>
<body>
<div>
<strong>Try to search something on twitter:</strong><br />
<br/>
<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>
</body>
</html>
code within search.php
include('twitterapi.php');
if($_POST['twitterq']){
$twitter_query= $_POST['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();
foreach($results as $result){
echo '<div style="display:none;">';
echo '<img src="'.$result->profile_image_url.'">';
$text_n=toLink($result->text);
echo $text_n;
echo '<span>';
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 '<input type="hidden" value="'.$result->id.'"></input>';
echo '</span>';
echo '</div>';
}
}
Download the source package for jquery.js and twitterapi.php .
Filed Under: ajax • javascript • php
Thanks dude really nice work really helped me a lot
Keep up the good work
@suhas. thankyou for your comment.
thank you for these great code
i have a question if its possible
can we make a search of 3 twitter account in the same time in print the result