Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje01-12-2013, 03:18 (UTC)    
Título del mensaje: [Javascript] Gadget Últimos 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.

Vista Previa: http://dangrecks.es.tl/Gadget-para-mostrar-tweets.htm

Si ya tiene jQuery en nuestra plantilla la primera línea se puede suprimir. El codigo hay que incluirlo en Fuente HTML de Controlar páginas, o donde lo desees poner de tu diseño, y es el siguiente:

Cita:
<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 nuestro propio gadget de Twitter porque el que ves es el mío. Ahora si no se genera desde la página oficial, pues no funcionará nada. Es el número 386257031599910912 que ves 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= , y el número que se te da ese es tu ID, en mi caso es: "386257031599910912" (Si no te quedo Claro hazmelo saber xd)

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 .

Saludos y espero haber ayudado !


Ultima edición por dangrecks el Mar Dic 10, 2013 3:11 pm; editado 1 vez
Mensaje01-12-2013, 15:30 (UTC)    
Título del mensaje:

Buen código
______________
–Ver mi perfil o entrar a mi página web:
Ver mi perfil
Entrar a mi página web


Ultima edición por aumentarvisitantesweb el Dom Dic 01, 2013 2:57 pm; editado 1 vez
Mensaje01-12-2013, 18:06 (UTC)    
Título del mensaje:

No sabía de este widget. Gracias por compartir
Mensaje03-12-2013, 03:30 (UTC)    
Título del mensaje:

muy util! lindo aporte
______________
Mensaje04-12-2013, 21:11 (UTC)    
Título del mensaje:

animetemplates escribió:
muy util! lindo aporte


Gracias! Saludos !
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group