Estos dias he recibido varias consultas de personas que me han pedido la version para Twitter del fanbox flotante,pues bien basandome en la creacion del Potro El Fanbox de Facebook Flotante,he creado una adaptacion de dicho fanbox para Twitter.
Para añadir dicho fanbox ve a la Edición de HTML y antes de </head> pega lo siguiente:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
Ahora antes de ]]></b:skin> agrega los estilos:
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(http://4.bp.blogspot.com/-1Bwy7Br6OeQ/TuqLoITm9UI/AAAAAAAAAoE/TXulC2hQoo0/s1600/tw_ag.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
Guardas los cambios y ahora vas a Diseño| Añadir gadget | HTML/Javascript,alli pegas lo siguiente:
<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("Tu Usuario");</script></div></div></span></div></div>
Reemplazas Tu Usuario por el nombre de tu usuario en Twitter sin @,el resultado final lo pueden ver en el siguiente blog de pruebas.
41 comentarios
Administrador@ · diciembre 15, 2011 a las 11:48 pm
Gracias Juvinao! Por fin lo consigo! Y te hago una consulta! no importa si no se puede! si quiero ponerle mis ultimos twets eso es posibe en vez de mis seguidores? 😀 Espero tu respuesta saludos! :buenpost: :] :headbang:
Juvinao · diciembre 16, 2011 a las 12:09 am
Administrador@ que bueno que hayas podido agregar el truco bueno intentare a ver que puedo hacer.
Saludos 😈
Administrador@ · diciembre 16, 2011 a las 1:00 am
Gracias Saludos! 😛
Juvinao · diciembre 16, 2011 a las 12:56 pm
Administrador@ de nada 😀
Administrador@ · diciembre 16, 2011 a las 9:47 pm
Otra cosilla Bro! Mira yo encontre esto → http://loseasi.blogspot.com/2011/10/seguidores-blogger-twitter-y-facebook.html Sabes¿?!…
Es un »seguidores de blogger twitter y facebook».
A mi me gustaria poner solo el de twitter y facebook pero con efecto deslizante, osea con jQuery Tu me darias el codigo para hacerlo?¿ Desde ya muchas gracias por toda tu paciencia y ayuda Saludos!!! 😀
Juvinao · diciembre 17, 2011 a las 12:02 am
Administrador@ ok tratare de hacerlo pero eso si dame un tiempillo para hacer pruebas con los codigos y si resulta algo bueno lo publico,ok.
Saludos 😎
Dryken · diciembre 17, 2011 a las 2:49 am
Magnífico gadget, te ahorra bastante espacio en la sidebar, tengo que probarlo a ver que tal va.
Excelente aporte compañero, saludos!
Blosk Sánchez · diciembre 17, 2011 a las 4:37 am
Hola apenas el día de hoy ley tu comentario, perdón por copear tu post pero solo estaba haciendo unas pruebillas nada de afectar tu gran esfuerzo, y descuida ya no vuelve a suceder saludos man 😀
Sarasota Computer Services Intl · diciembre 17, 2011 a las 5:26 am
Que buena información muchas gracias por compartirla.
Visiten nuestro sitio web
Juvinao · diciembre 17, 2011 a las 2:02 pm
Dryken sin duda alguna ahorra un gran espacio.
Blosk Sánchez ok amigo no hay problemas com tal de que no vuelva a suceder. :shrug:
Saludos
Juvinao · diciembre 17, 2011 a las 2:04 pm
Sarasota Computer Services Intl gracias por comentar.
Administrador@ · diciembre 17, 2011 a las 4:02 pm
Ok Juvinao gracias por tu esfuerzo y dedicacion 😉 Saludos
Chiknaui.Mikistli Joel Molina Reyes · diciembre 23, 2011 a las 12:26 am
eres grandioso, tambien vi un blog, con ese mismo efecto deslizante pero para seguir el blog, mediante el gadget que proporciona blogger, quien sabe como lo hizo.. jejeje saludos
Anonymous · febrero 4, 2012 a las 12:29 am
hola sepodria poner algo asi en una pagina web
Juvinao · febrero 4, 2012 a las 3:28 pm
A decir verdad no tengo ides,pero creo que si porque esto es HTML y CSS lenguajes web standar.
Anonymous · febrero 5, 2012 a las 12:03 am
mmm por si un dia tienes la idea de como seguire pendiente de tu blog para seguir las instrucciones, gracias xD
Juvinao · febrero 5, 2012 a las 12:43 am
Ok amigo intentare hacer algo por ti,Saludos
www.shulmeister.es.tl · febrero 12, 2012 a las 3:53 am
puse el de twitter y de facebook los dos juntos pero solo el de twiiter se ve.. q puedo hacer.. si pueden me dan un mensajito a shulsito@facebook.com para ver la respuesta aqui…
Juvinao · febrero 12, 2012 a las 5:23 pm
Pues amigo no se que pueda ser el problema,asi que revisare el codigo para ver cual es el problema.
Road Show Rally · febrero 15, 2012 a las 4:15 pm
xqe me sale de afuera twitter y cuando abro me sale facebook?
coke · febrero 19, 2012 a las 4:23 pm
ami tambien me pasa :S
Juvinao · febrero 19, 2012 a las 5:01 pm
Ese problema de verdad no lo sabia,mirare cual es la solucion.
coke · febrero 20, 2012 a las 1:29 am
envia solucion x fa
coke · febrero 26, 2012 a las 12:27 am
Juvinao puedes haces el fanbox de twitter y facebook que se vea por la derecha de la pantalla?
premium.hunt.2012 · abril 3, 2012 a las 5:13 am
hola amigo gracias por el codigo, pero tengo una duda. como ya tengo el del facebook a la derecha, quisiera colocar el del twitter a la derecha… sera que este se puede modificar para tal efecto? gracias!! 🙂
http://premiumhunt2012.blogspot.com/
Juvinao · abril 7, 2012 a las 4:47 pm
Tienes que configurar el tamaño de las imagenes,las cuales estan en el css y en el caso de el fanbox de Twitter es la siguiente imagen:
http://4.bp.blogspot.com/-1Bwy7Br6OeQ/TuqLoITm9UI/AAAAAAAAAoE/TXulC2hQoo0/s1600/tw_ag.png
Eulises Avila · mayo 7, 2012 a las 12:44 am
Hola Amigo,
Muy bueno este tutorial, habra algo parecido para WordPress? o bien donde pongo ese codigo que en blogger seria en » Diseño| Añadir gadget | HTML/Javascript»?
Saludos y espero tus respuestas
Juvinao · mayo 7, 2012 a las 3:27 pm
En wordpress seria «Apariencia,Widgets,Texto»..
Pero no se si este truco funcione en WordPress.
Ricardo Salvador De Toma · junio 1, 2012 a las 10:39 pm
Saludos!! gracias por el tutorial! lo coloque en mi blog, pero por alguna razon la imagen del fanbox no se desliza… que puedo hacer?
Juvinao · junio 1, 2012 a las 11:20 pm
Ricardo estuve revisando tus blogs y no veo en niguno de ellos el fanbox,talvez el error se deba a la version de jquery que tienes en tu blog.
Rikardo Benites · junio 3, 2012 a las 12:12 am
Tengo ese gadget pero de facebook y lo tengo posicionado en el medio. Al añadir este, cómo hago para que uno quede debajo del otro?? en qué parte del código está el posicionamiento??
Gracias
Juvinao · junio 3, 2012 a las 3:33 pm
Rikardo para manipular este truco hazlo desde el CSS pero te recomiendo que solo pongas uno de los dos ya que que usando los dos tu blog cargara muy lento.
PRODUCCIONES METROPOLI · junio 5, 2012 a las 11:01 pm
hola que t al saludos… mi cuestion es que bueno el deslizante que muestras es para el lateral derecho pero como puedo hacer para que pueda ponerlo delk lado hisquierdo ya que en el derecho ya tengo el da facebook…te agradeceria mucho la ayuda….
Juvinao · junio 6, 2012 a las 12:51 am
Bueno amigo dejame revisar el codigo un poco y mañana te doy una respuesta.
PRODUCCIONES METROPOLI · junio 5, 2012 a las 11:02 pm
hola que tal juvinao saludos mi pregunta es como podria poner el deslizante de twitter del lado isquierdo ya que en el derecho ya tengo el de facebook.. agradeseria mucho la ayuda…
JesusRNavas · julio 8, 2012 a las 9:19 am
Exelente post «lo estaba buscando» está muy bueno, aunque tuve que configurarlo un poco para ponerlo a mi gusto!!
Juvinao · julio 8, 2012 a las 8:31 pm
Que bueno que hayas encontrado en mi blog lo que buscabas,Saludos 😀
Josu Nuñez Albeniz · diciembre 1, 2012 a las 5:48 pm
muy bueno!… solo una consulta, me sale el recuadro perfecto y se desliza tambien perfecto, pero no se ve el contenido una vez abierto, sale en blanco… por que puede ser?. agradeceria una respuesta 🙂
Hayder Juvinao · diciembre 3, 2012 a las 1:12 am
Amigo lo que pasa es que el script del fanbox de twitter esta fallando, tengo que actualizar la entrada con otro script, estos dias lo hare 😛
Alberto Franco · enero 19, 2013 a las 10:41 am
A mi me pasaba lo mismo Josu y lo que pasaba es que cambie de Usuario y una vez que cambias de usuario no se te vera si no lo modificas en el codigo revisa tu usuario que tienes puesto y mira a ver si es el mismo usuario que usas porque a mi me funciona.
Espero averte ayudado. Saludos 🙂
Hayder Juvinao · enero 21, 2013 a las 9:10 pm
Alberto gracias por tu aporte a la entrada, de hecho el script ya funciona.