jQuery + Twitter: newsticker
Hace poco se me planteó sobre utilizar un newsticker en forma de marquesina en donde se mostrarán los últimos tweets. Para lograr esto, utilicé un plugin jQuery e hice uso de pocas lineas en JS para lograr esto.
Como primer medida descargaremos el plugin li-Scroller: http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
Descargado esto, y teniendo en cuenta que también necesitamos la librería jQuery, procedemos a insertar el siguiente código entre las etiquetas <head>:
<!-- jquery -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<!-- /jquery --><!-- jquery: liScroller --> <link rel="stylesheet" type="text/css" media="screen" href="js/liScroll/jquery.liScroll.css" /> <script type="text/javascript" src="js/liScroll/jquery.liScroll.js"></script> <!-- /jquery: liScrollter -->
Y por último en el lugar donde queremos que nuestro “newsticker” se muestre:
<ul id="ticker01" class="newsticker"></ul>
<script>
$(function(){
var user = 'viktormorales';
var url = 'http://twitter.com/status/user_timeline/'+user+'.json?count=10&callback=?';
$.getJSON(url, function(data) {
$.each(data, function(i, item) {
var _date = new Date(item.created_at);
var _date = _date.getDate() + '/' + (_date.getMonth() + 1) + '/' + _date.getFullYear() ;
$("#ticker01").append('<li><span>'+_date+'</span><a href="http://twitter.com/'+user+'/status/'+item.id+'" target="_blank">'+item.text+'</a></li>');
});
$("ul#ticker01").liScroll();
});
});
</script>
Esto mostrará los últimos 10 tweets de mi usuario (@viktormorales). Cambien la variable “user” por su nombre de usuario para mostrar su tweets y ya!.
Sencillo verdad?! Hechenle una prueba y tendrán un scroll de tweets como el que armé para @studiopatagonia (studiopatagonia.com.ar).
Hasta la próxima!!
Relacionados: css, javascript, jquery, newsticker, twitter
Compartir
¿Opiniones?