Dec 19, 2011

How To Show Latest Tweets Using PHP JQuery

Today I am sharing my newly PHP and JQuery coded snippet which is going to display your latest tweets in a fade in and fade out effect using Twitter timeline RSS feeds.



Here is the PHP function to get the tweets:

 
[php]
<?php
function latest_tweets(){
//global $post;
$doc = new DOMDocument();
$meta='webstutorial';
$feed = "http://twitter.com/statuses/user_timeline/$meta.rss";
$doc->load($feed);

$outer = '<ul id="tweets">';
$max_tweets = 15;
$i = 1;
foreach ($doc->getElementsByTagName('item') as $node) {
$tweet = $node->getElementsByTagName('title')->item(0)->nodeValue;
//if you want to remove the userid before the tweets then uncomment the next line.
//$tweet = substr($tweet, stripos($tweet, ':') + 1);
$tweet = preg_replace('@(https?://([-w.]+)+(:d+)?(/([w/_.]*(?S+)?)?)?)@',
'<a href="$1">$1</a>', $tweet);
$tweet = preg_replace("/@([0-9a-zA-Z]+)/",
"<a href="http://twitter.com/$1">@$1</a>",
$tweet);

$outer .= "<li>". $tweet . "</li>n";


if($i++ >= $max_tweets) break;
}
$outer .= "</ul>n";
return "<div class='post'><p><b>Latest Tweets </b>".$outer."</div>";
}
echo latest_tweets();
?>
[/php]
 

In the above function we are fetching the RSS feed from the twitter timeline. Then we finally break it into segments and display it using the loop method.

Now we have to display the tweets with jquery effect.

So here is the jquery function to display the tweets in a fadeIn effect.

 
[js]
<script type="text/javascript">
function tweetRender( prospectID )
{
prospectID.delay() .fadeIn() .delay(2000).fadeOut(
function(){
if(prospectID.next().length > 0)
{tweetRender( prospectID.next() );}
else
{tweetRender( prospectID.siblings(':first'));}

}
);
}

$(function(){
$('#tweets li').hide();
tweetRender( $('#tweets li:first') );

});
</script>
[/js]
 

In this tutorial we are using basic PHP and JQuery to display the tweets. You can download it and check the Demo.

6 comments :

  1. great piece of code! I am trying to show 2 at a time, and for the life of me, I can't do it - do you have any tips on what can be done

    ReplyDelete
  2. you need to tweak the jquery for displaying two tweets at a time

    ReplyDelete
  3. Devve Knulle29/1/12 12:06 PM

    This is great, been looking for something just like this.

    A couple questions if I may:

    1. How do you get hashtags to link?
    2. How do you get the "x hours/days ago" status to display and link?

    Thanks

    ReplyDelete
  4. Code is really excellent, I have the same query, how come I show the time?

    ReplyDelete
  5. Rahilar No1127/4/12 1:14 AM

    how can we see others tweets as well

    ReplyDelete
  6. You cant do it, cause thats the RSS feed of your own timeline, you ll need to search more on RSS feeds of tweets

    ReplyDelete