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.
Dec 19, 2011
Subscribe to:
Post Comments
(
Atom
)
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
ReplyDeleteyou need to tweak the jquery for displaying two tweets at a time
ReplyDeleteThis is great, been looking for something just like this.
ReplyDeleteA 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
Code is really excellent, I have the same query, how come I show the time?
ReplyDeletehow can we see others tweets as well
ReplyDeleteYou cant do it, cause thats the RSS feed of your own timeline, you ll need to search more on RSS feeds of tweets
ReplyDelete