jQuery Twitter Ticker Una combinación de scripts en jQuery para mostrar no sólo tus tweets, sino los de todos aquellos usuarios que elijas
Este script lo hemos visto en Tutorialzine y aunque a simple vista parece uno de tantos widgets para mostrar tweets, tiene la particularidad de que puedes mostrar los tweets de varios usuarios... independientemente de que estén o no incluidos en una lista.
El HTML
Como ves es muy sencillo, un contenedor twitter-ticker donde se mostrará la etiqueta que contiene los tweets. El mensaje que aparece en el encabezado (en rojo) puedes dejarlo vacío si lo deseas.
Scripts jQuery
Por supuesto, tendrás que tener implementada en el código de tu site la llamada a jQuery, bien sea desde tu propio servidor o utilizando la API de Google:
Además vas a necesitar el script jquery.mousewheel.js que puedes descargar desde aquí y también jScrollPane-1.2.3.min.js descargable aquí.
En el script que muestra los tweets tan sólo debes cambiar el nombre de los usuarios cuyos tweets quieres mostrar en el widget (en rojo):
Para "instalarlos" en tu site hazlo siempre después de la llamada a jQuery:
El CSS
Lo puedes descargar directamente desde aquí. Igual que en el caso del HTML las imágenes están alojadas en Blogger, así sírvase usted mismo.
La demo
El original
Si quieres, puedes ver la explicación y la demo original haciendo click en la siguiente imagen para acceder al tutorial de Tutorialzine
El HTML
<div id="twitter-ticker">
<div id="top-bar">
<div id="twitIcon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xeP7WNOBsrTCLBxKmFlX9esLLHfbqQh-fk_tF74IoyQzEKPQweNwrSIs7zc22tw4-sXq5hpWUWg_p8w0vsXH-y_XnvE_YJGiZThkSp-iivy2I-XVbupy5u37m2yehdY4xT2XcwcjZg-3/s1600/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
<h2 class="tut">ENCABEZADO</h2>
</div>
<div id="tweet-container"><img id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBvwC-hsop-hQXww7FvqFQHTrdUV6S82_WOxBI2J1LU-qAbA3mxJm458FaEGv0AT8yio58H9PyO9oDZU9G5z1JUcZg_lAgeI_o3LAA1jSX0qxEb6j8n5KAyHStLDIGsxPc-e0TxMdPzx_K/s1600/loading.gif" width="16" height="11" alt="Loading.." /></div>
<div id="scroll"></div>
</div>
Como ves es muy sencillo, un contenedor twitter-ticker donde se mostrará la etiqueta que contiene los tweets. El mensaje que aparece en el encabezado (en rojo) puedes dejarlo vacío si lo deseas.
Scripts jQuery
Por supuesto, tendrás que tener implementada en el código de tu site la llamada a jQuery, bien sea desde tu propio servidor o utilizando la API de Google:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>
Además vas a necesitar el script jquery.mousewheel.js que puedes descargar desde aquí y también jScrollPane-1.2.3.min.js descargable aquí.
En el script que muestra los tweets tan sólo debes cambiar el nombre de los usuarios cuyos tweets quieres mostrar en el widget (en rojo):
var tweetUsers = ['usuario1','usuario2','usuario3','usuario4'];
var buildString = "";
$(document).ready(function(){
$('#twitter-ticker').slideDown('slow');
for(var i=0;i<tweetUsers.length;i++)
{
if(i!=0) buildString+='+OR+';
buildString+='from:'+tweetUsers[i];
}
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=50");
document.getElementsByTagName("head")[0].appendChild(fileref);
});
function TweetTick(ob)
{
var container=$('#tweet-container');
container.html('');
$(ob.results).each(function(el){
var str = ' <div class="tweet">
<div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>
<div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>
<div class="time">'+relativeTime(this.created_at)+'</div>
<div class="txt">'+formatTwitString(this.text)+'</div>
</div>';
container.append(str);
});
container.jScrollPane();
}
function formatTwitString(str)
{
str=' '+str;
str = str.replace(/((ftp|https?)://([-w.]+)+(:d+)?(/([w/_.]*(?S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/([^w])@([w-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
str = str.replace(/([^w])#([w-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
return str;
}
function relativeTime(pastTime)
{
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "Just now";
if(difference <= 20) return "Seconds ago";
if(difference <= 60) return "A minute ago";
if(difference < 3600) return parseInt(difference/60)+" minutes ago";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" hours ago";
if(difference < 1.5*24*3600) return "One day ago";
var dateArr = pastTime.split(' ');
return dateArr[4].replace(/:d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}
Para "instalarlos" en tu site hazlo siempre después de la llamada a jQuery:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://URLSERVIDOR/jquery.mousewheel.js'></script>
<script type='text/javascript' src='http://URLSERVIDOR/jScrollPane-1.2.3.min.js'></script>
<script type='text/javascript' src='http://URLSERVIDOR/script.js'></script>
El CSS
Lo puedes descargar directamente desde aquí. Igual que en el caso del HTML las imágenes están alojadas en Blogger, así sírvase usted mismo.
La demo
El original
Si quieres, puedes ver la explicación y la demo original haciendo click en la siguiente imagen para acceder al tutorial de Tutorialzine
