DanGrecks ~ ¡Ayuda WebMaster!

Gadget para mostrar tweets

Adicionalmente este recurso se a combinado con un Slider jQuery y entre una cosa y otra obtenemos un rotador de tweets que podemos personalizar tanto en contenido como en aspecto.

Y aqui tenemos nuestro primer estilo de Tweets:

 

El codigo hay que incluirlo dentro de un gadget tipo HTML/JavaScript y es el siguiente. Si ya tiene jQuery en nuestra plantilla la primera línea la tiene que suprimir, este codigo se pondra en la página donde quiera que apareza el Gadget:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://olobloggerblog.googlecode.com/files/Twitter-post-fetcher-7.js"></script> <script type="text/javascript"> twitterFetcher.fetch('386257031599910912', 'rotatweet', 5, true, false, false); $(document).ready(function() { setInterval(function(){ $('#rotatweet ul li:first-child').fadeOut(0) .next('li').fadeIn(1000) .end().appendTo('#rotatweet ul');}, 4000); }); </script> <div id="rotatweet"></div> <style> #rotatweet { position:relative; width:335px; height:94px; margin:0 auto; background:url(http://2.bp.blogspot.com/-8jKyQz1JLTY/UHr-nCVNijI/AAAAAAAAFtU/T2XgWuNy2Uk/s1600/twitter.png); } #rotatweet ul { position:absolute; top:12px; left:90px; width: 232px; margin:0; padding:0; font-size: 12px; } #rotatweet ul li { list-style: none; margin: 0; padding: 0; display: none; } </style>

¿Y qué tenemos que cambiar de ahí? Pues casi nada. Sólo la ID correspondiente a vuestro propio gadget de Twitter porque el que veis es el mío. Ahora si no se genera desde la página oficial, pues no funcionará nada. Es el número 386257031599910912 que veis en el código.

*Para obtener tu ID, solo tienes que iniciar sesión en twitter y dirigirte al siguiente link: https://twitter.com/settings/widgets, ya estando hay le das en Crear Nuevo, y rellenas todos los datos que se te pide, ya rellenado los datos, le das a Crear Widget y se te dara un codigo y en ese codigo buscamos: data-widget-id="386257031599910912" y el número que se te da ese es tu ID, en mi caso es: "386257031599910912"

Otra cosa que se puede cambiar es el número de tweets a mostrar. Es ese tercer parámetro de la función twitterFetcher.fecth, o lo que es lo mismo, ese número 5.

Por último, el intervalo de tiempo entre tweets es en el ejemplo el parámetro 4000 e indica la demora en milisegundos.

*Para conseguir otro estilo distinto, pues sólo se trata de ajustar la parte CSS, ya tienes el modelo, es hora de ponerle creatividad a tu diseño .