Qué tal.
Estoy intentando implementar un div en nuestra web que destaque los últimos mensajes de twitter.
He encontrado este código que funciona muy bien:
Código Javascript
:
Ver original<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var tweets = {
el: '.twitterTicker .twitter-stream',
items: new Array(),
count: 0,
total: -1,
delay: 6000,
animate: true
};
$(tweets.el+' p').each(function(i) {
tweets.items[i] = $(this).html();
tweets.total++;
}).hide();
runTweeter();
function runTweeter() {
if(tweets.animate == true) {
if($(tweets.el+' p').length > 0) {
$(tweets.el).children('p').fadeOut(500, function() {
$(this).parent(0).empty().append('<p style="display: none;">'+tweets.items[tweets.count]+'</p>').children('p').fadeIn(500);
});
} else {
$(tweets.el).empty().append('<p style="display: none;">'+tweets.items[tweets.count]+'</p>').children('p').fadeIn(750);
}
} else {
$(tweets.el).empty().append('<p>'+tweets.items[tweets.count]+'</p>');
}
setTimeout(function() {
if(tweets.count == tweets.total) {
tweets.count = 0;
} else {
tweets.count++;
}
runTweeter();
}, tweets.delay);
}
});
</script>
<style type = "text/css">
.twitter-stream {
background: #d5e8ef;
border: 1px solid #d5e8ef;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
padding: 10px;
margin: 0 0 20px 0;
font-size: 10px;
color: #6e6f73;
font-weight: bold;
font-family: verdana;
float: left;
width: 87%;
}
.twitter-stream p {
padding: 0px;
margin: 0px;
}
.twitter-stream p a {
color: #45799f;
text-decoration: none;
}
</style>
</head>
<body>
<div class="twitterTicker"><img src="http://return-true.com/wp-content/themes/returntrue/images/layout/twittertickerbird.jpg" style="float:left;" />
<?php
$doc = new DOMDocument();
# load the RSS -- replace 'username' with your own twitter username
if($doc->load('http://twitter.com/statuses/user_timeline/USERNAME.rss')) {
echo "<div class='twitter-stream'>";
# number of <li> elements to display. 20 is the maximum
$max_tweets = 10;
$i = 1;
foreach ($doc->getElementsByTagName('item') as $node) {
# fetch the title from the RSS feed.
# Note: 'pubDate' and 'link' are also useful (I use them in the sidebar of this blog)
$tweet = $node->getElementsByTagName('title')->item(0)->nodeValue;
# the title of each tweet starts with "username: " which I want to remove
$tweet = substr($tweet, stripos($tweet, ':') + 1);
# OPTIONAL: turn URLs into links
$tweet = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@',
'<a href="$1">$1</a>', $tweet);
# OPTIONAL: turn @replies into links
$tweet = preg_replace("/@([0-9a-zA-Z]+)/",
"<a href=\"http://twitter.com/$1\">@$1</a>",
$tweet);
echo "<p>". $tweet . "</p>";
if($i++ >= $max_tweets) break;
}
echo "</div>";
}
?>
</body>
</html>
Aportado por AP Design en http://return-true.com/2010/09/building-a-twitter-ticker-with-jquery/
El problema es que no me respeta ñ, diéresis ni tildes como podéis ver en mi ejemplo:
http://www.forpe.es/ej_twitter-paul.php
No tengo conocimientos de javascript, por lo que si me pueden decir cómo solucionarlo se lo agradezco sumamente.
Gracias de antemano.