Un FanBox para Twitter personalizable

22 de noviembre de 2012 167 comentarios ,
AVISO
La API de Twitter cambió y ahora requiere autenticación para obtener los datos de los seguidores, por tal motivo éste y los demás fanbox para Twitter han dejado de funcionar. Si me entero de una solución u otra alternativa lo publicaré de inmediato.



Hemos visto con anterioridad dos FanBox para Twitter, que no son otra cosa mas que gadgets que muestran los seguidores que tenemos en Twitter. El primer FanBox para Twitter que vimos es proporcionado por Moopz, un buen gadget pero que no tiene muchas opciones de personalización. El segundo que vimos fue un FanBox para Twitter que muestra los avatares en forma deslizante, muy llamativo aunque no se parece tanto al FanBox tradicional de Facebook.

El siguiente FanBox para Twitter que veremos (llamado por su autor "Twitter Follow Box") también está hecho con jQuery, pero con dos ventajas, una es que tiene un aspecto más semejante al de Facebook, y otra es que podemos personalizarlo mucho más, cambiarle el color de los nombres, del título, del borde, del fondo, incluso ponerle una imagen de fondo si se desea.

Sin embargo, cualquiera de estas tres opciones sufren de un problema constante, y es que suelen no mostrarse de vez en cuando, así que antes de usar cualquiera de estos tres habrá que considerar ese problema, que habrá veces en las que no se vea y de repende se mostrará otra vez.

Este es el FanBox para Twitter del que hablamos.




Este gadget lo pondremos todo dentro de un elemento HTML/Javascript para evitar tocar la plantilla, así que sólo entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el siguiente código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

<style>.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}.follow_box img{border: 0;}.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}.follow_box a:hover{text-decoration: underline;}.follow_action{padding: 0 0 0 8px;}.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}.follow_box .follow_button{margin: 5px 0 0;}.follow_box .total{min-width: 230px; overflow: hidden; display: block;}.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}.follow_box .clearfix{zoom: 1;}.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}.follow_box .footer_border{ margin-top: 5px;}.follow_box .uiImageBlock{line-height: 14px;}.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}.follow_box .titlecase{text-transform:capitalize;}.dark{background: #333;}.dark a,.dark .total, .dark .connections .connections_grid .grid_item .name, .dark .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}.dark .connections{border-bottom: 1px solid #444;}</style>
<script>
/*
* Twitter Follow Box jQuery Plugin
* http://jobyj.in/twitter-follow-box-widget/
* Copyright 2012, Joby Joseph
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(a){a.fn.followbox=function(b){function f(a,b){if(a>100)a=100;var c=new Array;for(var d=0;d<a;d++){c.push(b[d])}var e=c.join();return e}var c=a(this);var d="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigolp7j3OEz7dRoD3pbIS6q9Q7762W2LCjCPtcnjtklpUcgdepxGN0j42Rv5IC4XSSmcMrpgF2B7t-xvi6j3VD74lgBtVndE-hdqopLs5pAeIoOrWJG4HuMRwQVwnR_wSWu5Mo4XZz5do/";var e=a.extend({user:"jobysblog",width:292,height:252,theme:"light",border_color:"#AAA",bg_color:"#fff",bg_image:"",title_color:"#3B5998",total_count_color:"#333",follower_name_color:"#BBB"},b);a.ajax({url:"http://api.twitter.com/1/users/lookup.json?screen_name="+e.user+"&include_entities=true",dataType:"jsonp",success:function(b){var g=e.width-2;var h=e.height-2;var i=e.height-115;var j=parseInt(e.width/55);var k=parseInt(i/69)+1;var l=j*k;c.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+g+"px; height: "+h+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><img class="profileimage img" src="'+b[0].profile_image_url_https+'" alt="'+b[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><span class="name titlecase">'+b[0].name.toLowerCase()+"</span> @"+b[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+e.user+'&show_count=false&show_screen_name=false&lang=es" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+b[0].followers_count+'</span> personas siguen a <b class="titlecase">'+b[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+i+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+d+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitter Social Plugin</a></div></div></div></div></div></div></div></div>');if(e.theme=="dark"){c.find(".follow_box_main").addClass("dark")}c.find(".follow_box_follower_count").text(c.find(".follow_box_follower_count").text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"));if(a.browser.msie&&!a.support.boxModel)a(".follow_box .connections").css("padding-bottom","14px");if(e.theme=="custom"){c.find(".follow_box_main").css({"border-color":e.border_color,"background-color":e.bg_color,"background-image":'url("'+e.bg_image+'")'});c.find(".follow_box a").css({color:e.title_color});c.find(".follow_box .total").css({color:e.total_count_color})}a.ajax({url:"https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name="+e.user,dataType:"jsonp",success:function(b){var d=f(l,b.ids);a.ajax({url:"https://api.twitter.com/1/users/lookup.json?user_id="+d+"&include_entities=true",dataType:"jsonp",success:function(b){for(var d=0;d<b.length;d++){var f=a.trim(b[d].name);var g=f.split(" ");var h='<div class="grid_item"><a href="http://twitter.com/'+b[d].screen_name+'" target="_blank"><img class="img" src="'+b[d].profile_image_url+'" alt=""><div class="name titlecase">'+g[0].toLowerCase()+"</div></a></div>";c.find(".connections_grid").append(h)}if(e.theme=="custom"){c.find(".connections .connections_grid .grid_item .name").css({color:e.follower_name_color})}}})}})}})}})(jQuery)
</script>

<script>
$(document).ready(function(){
$('#twitterfollowbox').followbox({
'user':'usuario',
'theme':'custom',
'height':'250', // Altura del gadget
'width':'287', // Ancho del gadget
'border_color':'#cccccc', // Color del borde
'bg_color':'#ffffff', // Color de fondo
'bg_image':'', // Imagen de fondo
'title_color':'#3B5998', // Color del título
'total_count_color':'#333333', // Color del contador
'follower_name_color':'#BDBDBB' // Color del nombre de los usuarios
});
});
</script>

<div id="twitterfollowbox" class="follow-box-container"> </div>
Pon tu nombre de usuario de Twitter donde se indica (sin la @) y listo.
Si ya tuvieras jQuery en la plantilla no pongas la primera línea que está en azul.
Si usas Mootools o Scriptaculous cambia esta parte:
$(document).ready(function(){
$('#twitterfollowbox').followbox({
Por esta otra:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#twitterfollowbox').followbox({
En color verde puedes ver dónde se personalizan las distintas áreas del gadget.
Con la altura y el ancho podemos hacer que se muestren más o menos avatares.
Si quisieras ponerle una imagen de fondo entonces cambia esta línea:
'bg_image':'', // Imagen de fondo
Por esta:
'bg_image':'URL de la imagen', // Imagen de fondo

Como puedes ver es un gadget al que se le pueden personalizar los colores de manera que se adecúe al diseño de nuestra plantilla, pero su talón de Aquíles al igual que los otros es el detalle de que por ratos podría dejar de verse, pero al ser un "gadget de vanidad" quizá no importe mucho eso.

Autor | Twitter Follow Box


167 comentarios en:

" Un FanBox para Twitter personalizable "

  1. Respuestas
    1. como faço pra colocar não estou conseguindo colocar no meu blogger quero personalizar ele.. http://aryannetheodoro.blogspot.com.br/

      Eliminar
  2. Este cacharro, a diferencia del otro, es muy atractivo y en español le meteré en un gadget si se puede para tenerlo siempre a mano y bien visible.

    ResponderEliminar
    Respuestas
    1. De hecho el gadget original es en inglés, yo le he metido mano para traducirlo, no es gran cambio en el interior pero sí le da otra cara al exterior.

      Eliminar
    2. Si le has metido mano deberías haber intentado centrar las imágenes de los seguidores por aparecer un espacio muy reducido entre las imágenes de los seguidores y el lado izquierdo. Deberías intentarlo o indicar lo que se debe añadir para poder centrarle los que le tengamos.

      Eliminar
    3. Siempre se dan esos desajustes en los márgenes con los tamaños de estos gadgets, incluso con el de Facebook también sucede. Ya después con más tiempo veré si se puede recorrer el contenido hacia la derecha para que se vea un poco más centrado, aunque la verdad es casi imperceptible.

      Eliminar
  3. ... pero al ser un "gadget de vanidad". Palabras exactas o casi exactas pues muchos seguidores se fijan en la cantidad que aparece en el fanbox para sumarse a la tropa.

    ResponderEliminar
    Respuestas
    1. Pues muchos los usan para eso, para "presumir" cuántos seguidores tienen. Pero haciendo un lado la vanidad, siempre es bueno dejarles a la vista un gadget para que puedan seguirnos, mucha gente no nos sigue simplemente porque no encuentra un enlace, ícono, botón o gadget donde pueda hacerlo.

      Eliminar
    2. Mi caso es justo el contrario en el blog hay 3 enlaces por lo que este sería el 4º. A eso creo que se le dice estar sobrecargado de enlaces a twitter.

      Eliminar
  4. Una gran ayuda para conseguir followers!! No obstante, a ver si pudiérais resolverme este problema, en la web que tengo uso un jquery para el slide y si pongo el que indicáis "1.8.2" la navegación del slide ya no funciona. Me pasa también con otros trucos que publicáis. ¿Alguna idea de cómo solucionarlo? La web donde lo aplico es www.nuevolibro.net. Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Hola, como se menciona en la entrada, si ya tienes jQuery en tu blog entonces no pongas la primera línea en color azul.
      Saludos.

      Eliminar
    2. Gracias Potro!! Ya intenté esa opción pero al hacerlo el widget no aparece, en su lugar aparece una caja vacía. Bueno si se te ocurre algo sería genial!! Gracias de nuevo!!

      Eliminar
    3. Intenta de nuevo, toma en cuenta que como el gadget a veces no se ve, puede ser que justo cuando lo has probado no está funcionando el gadget, así que en unos minutos más puedes probar de nuevo.
      Saludos.

      Eliminar
    4. Vale Potro, lo probaré y comentaré los resultados!!

      Eliminar
    5. Hola de nuevo Potro, cambié de plantilla y ya me va genial, probablemente sería el lío entre el jquery y la línea azul, con una plantilla poco customizada y actual no ha habido problema y queda genial, gracias!!!

      Eliminar
  5. Buenas, Potro. Tengo una pequeña consulta con esto de Twitter. Al compartir post en webs o blogs si no sigues la cuenta de esa web el cuadro de diálogo para compartir no se cierra y te da la posibilidad de seguir a esa cuenta. ¿Eso cómo se hace?

    Espero que todo te vaya bien, saludos y gracias.

    ResponderEliminar
    Respuestas
    1. Hola Lluís, eso lo hace el propio sistema de Twitter cuando se usa algún gadget de "tuitear", no es algo que se añada.

      Eliminar
  6. Hola, Potro!!! Siempre es un placer leer tus posts tan útiles!!! Es una buena opción por akello de ke puedes kitarle y ponerle lo ke kieras, a mí me gusta la primera opción ke posteaste hace algunos ayeres, es el ke tengo y me ha funcionado genial, aunke sería bueno variarle. Sin embargo, estas cosas se ponen locas de repente y aparecen como se les da la gana ¬¬ =P. Defnitivamente voy a probarlo para darle otra vista la blog. Mil gracias, besote!!! =)

    ResponderEliminar
    Respuestas
    1. También me gusta la primera opción, pero esta me gusta más :)
      Gracias por el beso, otro para ti.

      Eliminar
  7. WOW Potro!, hace rato no pasaba por acá, que nuevos artículos hay y todo, me encanta tu estilo.!

    ResponderEliminar
  8. Hola potro no me funciono me puedes ayudar

    http://cacharpamusic.blogspot.com/

    gracias

    ResponderEliminar
    Respuestas
    1. Hola, prueba cambiar la parte del código que se menciona en la entrada como si tuvieras Scriptaculous (aunque no lo tengas), si eso no lo resolviera prueba poniendo el script de jQuery.
      Saludos.

      Eliminar
    2. Muchas gracias potro me funciono perfectamente. :)

      Eliminar
  9. Espero que se solucionen pronto esos problemas Potro.

    Muchos ánimos desde España!!!

    Un abrazo muy fuerte

    ResponderEliminar
    Respuestas
    1. Muchas gracias Gorka, espero poder estar pronto de regreso :)

      Eliminar
  10. Gracias Potro, la verdad es que te lo curras un montón, muchas gracias

    ResponderEliminar
  11. Hola, ahora que ya tengo el blog más avanzado, podrías ayudarme con la duda de como eliminar el espacio entre fotos en cada entrada que yo posteo?
    Muchas gracias
    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola Harmony, habría que ver a cuál espacio te refieres, podría ser un espacio generado por los márgenes del propio código de la imagen, o estilos de la plantilla.

      Eliminar
    2. Es decir, que si es márgenes propios de la plantilla no se pueden cambiar???
      Yo me refiero al espacio que se genera cuando pones tres fotos seguidas una detrás de otra, ese espacio entre ellas reducirlo

      Eliminar
    3. Por cierto muchísimas gracias por responderme ;-)

      Eliminar
    4. Todo se puede cambiar, pero como te decía, tendría que ver el espacio que dices para saber exactamente qué cambiar.

      Eliminar
  12. Hola Potro, quería preguntarte cómo hago para cambiar en mi blog lo de "mis tweets" por este fanbox personalizable....estaría bueno probar....no sé....en la plantilla de asesoramientoconsorcios no sé qué cambiar para reemplazarlo. Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Maria Mercedes, busca donde dice <!-- Twitter -->
      Debajo encontrarás el código del gadget de Twitter, puedes quitarlo y en su lugar poner el de esta entrada, aunque no recuerdo si directo en la plantilla funciona igual de bien.
      ¡Saludos!

      Eliminar
  13. Hola Potro, he estado buscando tu entrada en la que hablas de cómo hacer una imagen de tu perfil de blogger permanente, para que en unos comentarios no salga una foto y en otros otra. No encuentro tu entrada, podrías ponerme el link, por favor? Muchísimas gracias, y saludos :)

    ResponderEliminar
    Respuestas
    1. Hola Ansaher, esta es la entrada que buscas, pero lamentablemente no funciona en los comentarios anidados, sólo en los anteriores, los "normales" :(
      http://ciudadblogger.com/2011/06/usar-el-mismo-avatar-en-todos-los.html

      Eliminar
  14. hola potro, te hago una pregunta.. como hiciste para poner esas flechitas deslizables que tienes en la parte derecha del blog? tienes un post hecho con respecto a eso? Me interesan.
    vos me podrias ayudar?

    saludos

    ResponderEliminar
    Respuestas
    1. Hola Diego, sí tengo una entrada sobre ello, te la comparto en el siguiente enlace:
      http://ciudadblogger.com/2010/01/boton-de-ir-arriba-e-ir-abajo.html

      Saludos.

      Eliminar
  15. Hola Potro, muchas gracias por los tutoriales, me han sido super útiles. Desearía que me ayudaras con algo. Quiero saber si existe alguna aplicación para blogger que le permita a cualquiera adjuntar archivos para que lleguen a la cuenta del administrador del blog, como aparece en algunas páginas web. ;). Es esto posible en blogger?? Gracias!!!!

    ResponderEliminar
  16. Hola Potro, muchas gracias por los tutoriales, me han sido super útiles. Desearía que me ayudaras con algo. Quiero saber si existe alguna aplicación para blogger que le permita a cualquiera adjuntar archivos para que lleguen a la cuenta del administrador del blog, como aparece en algunas páginas web. ;). Es esto posible en blogger?? Gracias!!!!

    ResponderEliminar
    Respuestas
    1. Hola Sandra, para que puedan enviarte archivos a tu correo tendrías que agregar un formulario de contacto que permita adjuntar archivos, como este de EmailMeForm:
      http://ciudadblogger.com/2009/06/crear-un-formulario-para-el-blog.html

      ¡Saludos!

      Eliminar
    2. De nuevo quiero decir gracias siempre encuentro solución a mis inquietudes en Ciudad blogger, qué maravilla!!!

      Eliminar
  17. Aunque no lo use por ahora te agradezco el esfuerzo para poder personalizarlo, Potro, porque la verdad, la mayoría de las veces me echa para atrás el "diseñito" que traen por defecto. ¡Mil gracias!...y un beso enorme

    ResponderEliminar
    Respuestas
    1. Creo que la opción de poder personalizar cualquier gadget es algo que todos apreciamos :)
      Otro beso para ti.

      Eliminar
  18. He intentado ponerlo pero no hay forma de que me aparezca, mi site es http://www.kilianmartinez.com

    He probado a hacerlo como si tubiera scriptaculous (no lo tengo) he actualizado todos las lineas de jquery a la 1.8.2 y no hay forma, donde puede estar el error ? un saludo

    ResponderEliminar
    Respuestas
    1. Hola, he entrado a tu blog pero no veo puesto el código. Lo que sí veo es que tienes 2 veces la versión 1.8.2 de jQuery así que ya no hace falta ponerlo de nuevo.

      Eliminar
  19. Hola! Yo puse en mi blog, mil gracias!! pero no me aparecen las fotos de los seguidores... Te dejo el link, para que lo veas. Gracias!!

    http://www.museolibrogardel.blogspot.com.ar

    (te sigo en Twitter, me sigues?)

    ResponderEliminar
    Respuestas
    1. Yo sí los veo Ana o.O
      No sé si quizá estaba fallando pero ahora mismo lo veo bien.

      Eliminar
  20. Hola! He visto en algunos blogs que citan/ ponen comentarios de twitter en su blog de esta forma http://1.bp.blogspot.com/-4hshiRRNcfM/ULjPGAGm6jI/AAAAAAAATfU/M-pePPpBnFo/s1600/dddd.gif Como se hace?

    ResponderEliminar
    Respuestas
    1. Hola, da click en el tuit que deseas insertar (puedes darle click en la hora del tuit), y luego da click en "Insertar este Tweet", ahí tendrás el código para copiar y pegar.

      Eliminar
  21. Hola, ¿podrías actualizar este post? http://ciudadblogger.com/2009/07/personalizar-los-links-entradas.html. Es que con los cambios que ha introducido blogger no me deja utilizar este truco.
    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. Aun sigue funcionando, si tienes alguna duda sobre ello deja la pregunta en esa entrada.
      Saludos.

      Eliminar
  22. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola baltasar5010, no tengo alguna entrada sobre paginación pero busca en Oloblogger, ahí tienen una entrada que seguro te servirá.

      Eliminar
  23. gracias.......... mere sirvio.....

    ResponderEliminar
  24. gracias.......... mere sirvio.....

    ResponderEliminar
  25. Un pequeño apunte, se te olvidó en tu enlace a divertext en tu twitter, las "www" y no enlaza bien, por cierto muy bueno. :) Saludos desde Spain

    ResponderEliminar
  26. Un pequeño apunte, te olvidaste en tu enlace a divertext de tu twitter las "www" y no enlaza bien, por cierto muy bueno. :) Un saludo desde Spain

    ResponderEliminar
    Respuestas
    1. Gracias, a mí me abre bien tanto con las WWW como sin ellas :(

      Eliminar
    2. ok, es que tenías el enlace http://divertext.com en vez de http://www.divertext.com por eso no enlazaba bien ( a nosotros por lo menos nos daba error). un saludo

      Eliminar
    3. Supongo que falla de vez en cuando, a mí me abre bien de ambos modos, gracias de cualquier forma :)

      Eliminar
  27. Hola Potro, quizá esta no sea la entrada mas indicada para preguntarte esto, lo siento. ¿podrías ayudarme con los colorines de la plantilla?

    He puesto que el titulo de las entradas sean azules y al pasar el cursor sean verdes. Bien, pues siempre hay algun titulo que se me queda negro :S

    Y quiero poner que el titulo dentro de la pagina de la entrada tmb sea azul y no logro hacerlo.

    Este es el blog (te lo acorto para que no aparezca en los buscadores)

    http://tinyurl.com/bq4ebfc

    ResponderEliminar
    Respuestas
    1. Hola TheX, ¿cuál título ves en color negro? porque al menos las de las entradas están con los colores que modificaste.

      Eliminar
  28. Genio Potro, gracias por presentarnos este tipo de gatget, y en verdad se puede personalizar. así los botones sociales alcanzan una especie de simetría, siempre vengo aquí, este es un excelente blog, el cual ayuda mucho amigo mío ^^ Si entras en blog te darás cuenta que puse los dos gatgets el de facebook y el de twitter, quedaron igual o semejantes. Ojala puedas verlo. Ya sabes que mi blog es: El Averno de Dante. Saludos amigo, y espero estés pronto de nuevo publicando.

    ResponderEliminar
  29. Disculpa me olvide de decirte algo más...no se si sabes pero Mixpod ha cerrado, y mucha gente no sabe que otro reproductor poner tipo mixpod, que te permitía jalar las rutas de youtube. Espero si fuera posible, hagas una publicación con este asunto, y nos des mas información sobre otro reproductor que conozcas... Yo lo utilizaba mucho, en chats y blogs... :(

    ResponderEliminar
    Respuestas
    1. Uhhh, no sabía que había cerrado, pero en cuanto esté de vuelta por completo buscaré alguna otra opción, si me entero de algo te aviso ;)

      Eliminar
  30. ¡Hola Potro! Me encanta tu blog, y me ha sido muy útil en muchas ocasiones :) He visto que ahora estás ausente, pero te dejo una duda, por si me la puedes resolver cuando puedas... Puse en mi blog (lectorenelmuro.blogspot.com.es) un separador de entradas que ahora me gustaría quitar, cambiar por otro, pero no encuentro el código y claro, no puedo eliminarlo. ¿Sabes como podría quitarlo? Gracias por todo ^^

    ResponderEliminar
    Respuestas
    1. Hola Jon Nieve, expande los artilugios de tu plantilla, con las teclas CTRL + F busca esta URL:
      http://media.smashingmagazine.com/images/hr-images-yes/hr5_dennis_meene.png

      Esa es la URL de la imagen de tu separador de entradas actual.
      Saludos.

      Eliminar
    2. Ya había buscado la URL pero no me sale en el código HTML... :(

      Eliminar
    3. Recuerda que hay que marcar la casilla "Expandir plantillas de artilugios".

      Eliminar
    4. No me había fijado XD Que error más tonto jajaja ¡Muchísimas gracias! Me ha quedado mucho mejor... :D

      Eliminar
  31. Hola! Mira tengo una preguntilla que no tiene nada que ver con esta publicación (aunque no por eso la entrada deja de ser interesante!) y es que pretendo que en mi blog una de las páginas configurarla para que sólo la puedan leer miembros del blog (aunque el resto del blog sea público). He estado mirando la edición de páginas de blogger y nada...¿tu sabes que podría hacer? Un saludo y gracias de antemano! ;)

    ResponderEliminar
    Respuestas
    1. No se puede Juan José, el blog o es público o es privado, no hay más :/

      Eliminar
    2. Ok, no pasa nada. ¿Y alguna manera para que sólo pudieran descargar archivos o ver enlaces los miembros del blog? Perdona por darte tanto follón! jajaja

      Un saludo y gracias Potro!

      Eliminar
  32. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Yo lo veo bien Canal Dibus, si tienes alguna otra duda sobre ese tema deja la pregunta en la entrada que corresponde para no desviarnos del tema de este post.

      Pd. He eliminado el comentario por el aviso que está al final.
      Saludos.

      Eliminar
  33. El Potro! Esto no es exactamente de esta entrada pero no recuerdo de cuál era. Una vez, hiciste un post sobre un slider con imágenes para que la gente viere las última entradas del blog.

    Yo lo puse y me ha ido bien todo este tiempo pero el otro día estaba agregando nuevos gadgets y no se si los códigos serán incompatibles pero el slider no aparece.

    Te dejo el link del blog: http://elrincondedomive.blogspot.com.es/

    Los gadgets nuevos que he agregado estan en la barra lateral, son una encuesta y el gadget de blogger para traducir la página a otros idiomas.

    Gracias de antemano :)

    ResponderEliminar
  34. Por cierto, ya que estoy, como lo hago para borrar el espacio sobrante debajo del gadget de la página del facebook?

    Soy el mismo de www.elrincondedomive.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola domive, mira la sección "Slideshows" para que encuentres la entrada del slider que añadiste, ahí mismo seguro habrá sobre las versiones de jQuery y compatibilidad con Scriptaculous que suelen ser los problemas más comunes.

      En cuanto al gadget de Facebook (supongo que te refieres al fanbox) no veo ningún espacio que sobre :/

      Eliminar
    2. Ok, gracias :) Lo del fanbox a veces se ve bien ajustado, pero entonces se vuelve transparente el fondo, cuando tendría que ser negro... *Soy un desastre* jaja

      Eliminar
    3. jajaja :)
      El tema "dark" no es para que se vea negro, es para cuando el fondo de tu blog es negro lo uses y así los textos cambien de color y puedan verse. Si quieres cambiarle el fondo mira esta entrada:
      http://ciudadblogger.com/2011/02/agregar-fanbox-en-el-blog-sin-bordes-y.html

      Eliminar
  35. Holis Holis!

    Estaba viendo en varios blogs y sitios web que me gustan que han incorporado la barra de Iconos de redes sociales para compartir sus post de Shareaholic.

    Como me parecieron muy útiles y lindos estuve probado códigos y eso, pero tuve algunos problemas.

    1° Escogí la barra "Sexy Bookmarks" y la opción de Blogger que es donde está alojado mi blog, pero el problema es que si bien se instala sin problemas, no puedo escoger la redes sociales donde quiero que se compartan mis post.
    Entonces probé con la opción de Página web que este si te deja elegir, pero tienes que descargar una carpeta con un código y no termino de entender si tienes que poner el código dentro de las llaves que te marca o tienes que subirlo a un lugar como Dropbox y subir esa url.La cosa es es que no termino de entender como se haría. Y si bien pruebo las dos formas ninguna me sale con los iconos, sino que aparecen las palabras "Compartir en Facebook" (por ejemplo)y pinchando ahí se supone se compartiría.

    2° Probé entonces el que es simple "Classic Bookmarks". Pero no puedo centrarlo. Le pongo las "coordenadas" de center como corresponde pero se alinea al margen izquierdo y de hecho el separador de debajo de las entradas que puse lo alinea a la derecha!!!

    Lo que quería saber era si cuando tengas un tiempito podrías dar un tutorial.

    Gracias de ante mano, cualquier respuesta siempre es agradecida. Y espero que aquellos problemillas que tengas se puedan solucionar pronto! Besos ♥

    ResponderEliminar
    Respuestas
    1. Hola Magalí, nunca he usado ese servicio, pero según veo si eliges el de WebSite debes descargar el archivo ZIP, ahí verás dos archivos, un PNG y un CSS; crea una carpeta en Dropbox dentro de Public, ponle un nombre, por ejemplo "Shareaholic", dentro pon los dos archivos que descargaste.
      Luego, copia la URL de esa carpeta que acabas de crear, esa URL ponla dentro de:
      {Place_Path_Here}

      Por ejemplo:
      {URL de la carpeta Shareaholic}

      ¡Saludos!

      Eliminar
    2. Hola!
      Te agradezco inmensamente la respuesta. Siempre es bueno =)
      Pero al parecer nop, no se puede. Hice lo de la carpeta pero no sirvió porque una carpeta en Public no tiene link, una comprimida si, pero no funcionó queda completamente diferente...
      Shareaholic no es para mi sitio...
      Gracias igual.

      Eliminar
    3. Hola de nuevo Magalí, la carpeta sí tiene link aunque Dropbox no te la dé, pero tú puedes añadir la URL de forma manual a modo de deducción, por ejemplo:
      https://dl.dropbox.com/u/XXXXXXX/Shareaholic

      Eliminar
  36. Potro lo puse en un javascrit pero no sale nada. pense que tenia que quitarle el jquari, se lo quite y tampoco sale. No se que estará pasando. me ayudas.!

    Además quería decirte si sabes como hacer para colocar un efecto en el blog de que caican punticos blancos desde arriba del blog como si fuera nieve. Gracias.!!!

    ResponderEliminar
    Respuestas
    1. Hola Jose, mira la sección "Festividades", ahí hay algunos métodos sobre nieve en el blog.
      En cuanto al fanbox, ¿en cuál blog lo has puesto?

      Eliminar
  37. Hola! El otro día te consulté porque no me aparecían las fotitos de los seguidores. Despreocupate, ya lo solucioné. Lo cuento por si le sucede a alguien más: el problema era que tenía los twets protegidos; al cambiar la configuración, se solucionó todo. http://www.museolibrogardel.blogspot.com.ar

    ResponderEliminar
    Respuestas
    1. Muchas gracias por compartir la solución Ana, seguro a más de uno le servirá :)

      Eliminar
  38. Hola Raul, mira esta entrada de Pizcos:
    http://www.pizcos.net/2010/02/contador-de-visitas-para-entradas_05.html

    ResponderEliminar
  39. potro fijate que compre un dominio en dominioplus, ya segui el tutotial completo que tienes tu pero todo es distinto donde lo compre crees que lo pueda transladar a name.com

    ResponderEliminar
    Respuestas
    1. Sí, todos los dominios pueden transferirse con otra compañía, pero deberás crearte una cuenta en name.com y pagar la transferencia, que en realidad es un año extra que tendrás con el dominio:
      https://www.name.com/domain-transfer

      Si te decides a hacerlo usa alguno de estos promocodes para que la transferencia te salga más barata:
      NEWBIE
      SWITCHEROO

      Sólo toma en cuenta que la transferencia no es inmediata, tarda algunos días.

      Eliminar
    2. Gracias potro por tus sabios consejos

      Eliminar
    3. Una pregunta mas tienes alguna idia de como usar dominioplus

      Eliminar
  40. Si bien salen todos los seguidores, no lo hacen correlativamente y si alargas por ejemplo a 800 px las imágenes se ponen donde les apetece. ¿Hay solución o también es un detalle insignificante?

    ResponderEliminar
    Respuestas
    1. Igual el de Facebook hace eso, no los muestra según el orden como se han hecho seguidores, son al azar. El que sí los muestra conforme se han hecho seguidores es este:
      http://ciudadblogger.com/2011/02/mostrar-seguidores-de-twitter-con.html

      Eliminar
    2. Tengo los 3 en el blog-almacén y este es el único que no lo hace.

      Eliminar
    3. Pues los míos siempre lo han hecho así, excepto el de Seguidores del mismo Blogger.

      Eliminar
  41. <div style="text-align:justify;line-height:1.2;">
    <script type="text/javascript">
    function blnube_centro(feed) {
    max = 0;
    min = 10000;
    for (i=0;i<feed.count;i++)
    {
    blnube_elements = feed.value.items[i].commentcount * 1;
    if (blnube_elements > max)
    {
    max = blnube_elements;
    }
    if (blnube_elements < min)
    {
    min = blnube_elements;
    }
    }
    blnube_elementos = "";
    display = "";
    for (blnuub=0;blnuub<feed.count;blnuub++)
    {
    blnube_parent = feed.value.items[blnuub].commentcount - min;
    blnube_tam = 80 + (blnube_parent * 100) / (max - min) + "%";
    blnube_autrr = "'" + feed.value.items[blnuub].authorurl + "'";
    blnube_elementos = "(" + feed.value.items[blnuub].commentcount + ")";
    blnubID = feed.value.items[blnuub].title + blnube_elementos;
    blnubID2 = "<a style='text-decoration:none;font-size:" + blnube_tam + "' href=" + blnube_autrr + " target='_blank'>" + blnubID + " </a>";
    display = display + blnubID2;
    }
    document.write(display);
    }
    </script>
    <script src="http://pipes.yahoo.com/pipes/pipe.run?
    YourBlogUrl=[http]
    &Exclusions=Anonymous,Jaime Trujillo Escobedo
    &_callback=blnube_centro
    &ShowHowMany=30
    &_id=cfa196644e1d6159c9183548c4b5e2f5
    &_render=json"
    type="text/javascript"></script>
    <center><span style="line-height: 30px; margin-top:20px; text-decoration: none; border: 1px solid #ccc; padding: 2px; "><a href="[http] 2012/03/nube-de-top-comentaristas-para-el-blog.html" target="_blank">Conseguir este widget</a></span></center>
    </div>


    Para conseguir este widget solo hay que poner la url del blog donde pone [http]. Para ti o por si te apetece ponerle un una entrada.

    ResponderEliminar
    Respuestas
    1. Gracias unhidalgo, pero con las Pipes de Yahoo no me llevo muy bien, suelen ser lentas en cargar aunado a que dejan de estar disponibles por ratos o dejan de leer los datos correctamente.
      Gracias de todas formas.

      Eliminar
  42. COMO HAY GENTE QUE QUIERE SABER CUANTO HACE QUE HICIERON EL BLOG, CUANTAS ENTRADAS TIENEN Y CUANTOS COMENTARIOS AHÍ VA UN WIDGET PERSOLIZABLE “TAMAÑO DEL TEXTO” PARA SABER LOS DÍAS EN LINEA DEL BLOG, NÚMERO DE ENTRADAS Y NÚMERO DE COMENTARIOS

    SIN IMAGEN

    <div style="color: #fff;text-align: center;font-weight: bold;">

    <div style=" float: left; text-align: left; font-size:30px;">
    <script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() - Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(DÍA, MES, AÑO, "" );</script> Días en línea<br />
    <script style="text/javascript">
    function showpostcount(json) {
    document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
    }</script>
    <script src=" URL DEL BLOG
    feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script> Entradas <br />
    <script src=" URL DEL BLOG
    feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script> Comentarios</div><div style="clear: both;"></div></div>

    CON IMAGEN

    div style="float: left;"><img style="width: 53px; ; height:48px; padding-right:10px;" src="http://1.bp.blogspot.com/_dsEG33PDaHw/TJvkySNSsAI/AAAAAAAAAXo/xwOjSE9l92c/s1600/stats.png" /></div>
    <div style=" float: left; text-align: left; font-size:12px;">
    <script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() - Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(DÍA, MES, AÑO, "" );</script> DÍAS EN LÍNEA<br />
    <script style="text/javascript">
    function showpostcount(json) {
    document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
    }</script>
    <script src=" URL DEL BLOG
    feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script> ENTRADAS <br />
    <script src=" URL DEL BLOG
    feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script> COMENTARIOS</div><div style="clear: both;"></div></div>

    SOLO HAY QUE PONER EL DÍA EL MES Y EL AÑO DONDE PONE
    DÍA, MES, AÑOYLA URL DEL BLOG DONDE PONE URL DEL BLOG

    ResponderEliminar
    Respuestas
    1. Gracias, pero ya tengo publicada esa entrada:
      http://ciudadblogger.com/2009/09/gadget-de-estadisticas-del-blog.html

      Eliminar
  43. Hola Potro! todo bien? necesito bajar unos 5 o 10 px el gadget para que quede a la misma altura que otro que tengo al lado, pero no se donde agregarle el "margin-top" ya que en cada parte que trato de ponerlo me corre algun elemento de adentro de la cajita... :(

    Por si queres verlo, esta abajo de todo en restaurantmisiones.com.ar

    ResponderEliminar
    Respuestas
    1. Hola Lucas, puedes agregárselo al ID twitterfollowbox, por ejemplo:
      #twitterfollowbox {
      margin-top: 20px;
      }

      Eliminar
    2. Siiiiiiiiiii!!! funciona perfecto!! gracias sos un genio

      Eliminar
  44. Muchas gracias, estaba buscando algo así. ¿No habrá uno parecido para los miembros de un grupo de Facebook?

    ResponderEliminar
  45. Buenas noches Potro!.. Bueno acá es de noche, no se de donde serás tu :P.. Amigo tengo un problema, mi blog es compartido, somos 2 contribuyentes y al tratar de colocar los dos FanBox nunca carga el FanBox que queda abajo, y en el de arriba carga un FanBox cualquiera (El mío o el de mi compañero es como aleatorio) Si pudieras echarme una mano mucho sabría agradecértelo, gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Buenas tardes Kevin, sólo es un fanbox por página :(

      Eliminar
    2. Es una triste noticia u.u.. Bueno Gracias Potro Feliz Navidad :P

      Eliminar
  46. hola potro, tengo el tema Lugas en mi blog, pero no me aparece el gadget, ya probe cambiando el codigo azul, y todas las cosas que dices, pero aun asi no me sale. me ayudas? muchas gracias! http://chucknorristyle.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Yo lo veo funcionando bien, sólo que únicamente se ve al ingresar a un post.

      Eliminar
  47. Hola Potro, no consigo que me quede bien del todo. Necesitaría un width:220px y por mas que pruebo no queda bien. Donde pone Twitter Social Plugin se queda fuera de la caja. ¿Me puedes decir que tengo que modificar?
    Muchas gracias.

    ResponderEliminar
  48. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Parece que Firefox no se puede conectar con el servidor de Twitter, porque se queda cargando y en la barra de carga dice que está conectado a platform.twitter.com... después de mucho rato carga pero parece que no todos los datos, supongo que será cosa del navegador.

      Eliminar
  49. Ami no me sirve Potro por que sera ????

    ResponderEliminar
  50. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  51. hola amigo se puede usar como un banner con algun codigo que vayan pasando los teews como hacen todas las web que pase todos los trinos de una cuenta twitter como se ven en tv o algunas web de noticieros o famosas.

    ResponderEliminar
  52. hola amigo se puede usar como un banner con algun codigo que vayan pasando los teews como hacen todas las web que pase todos los trinos de una cuenta twitter como se ven en tv o algunas web de noticieros o famosas.

    ResponderEliminar
    Respuestas
    1. No, tendrías que buscar un gadget que tenga esas características, no sé si en Vagabundia u Oloblogger hayan publicado ya algo sobre ese tema, sería cuestión de buscar.

      Eliminar
  53. potro me gustaría saber como puedo poner que se vea el nombre del blog,,, osea cuando lo pongo sale mi usuario de twitter,,, pero yo quiero que se vea el nombre de mi blog,, si me puedes ayudar espero respuesta,,,.. y esta super tu tutorial

    ResponderEliminar
    Respuestas
    1. Siempre se mostrará el nombre del usuario, no del blog, a menos que tu nombre a mostrar lo cambies en Twitter.

      Eliminar
  54. Hola Potro! Intente el otro día poner este fan box pero no me aparecía. De programación entiendo poco por lo que no se si tenia ya previamente agregado el jquery y lo demas, probé todas las opciones que das y siguió sin funcionarme. Me puedes ayudar??

    Muchas gracias por todo

    ResponderEliminar
    Respuestas
    1. Hay una de esas opciones que no necesita jQuery así que debe funcionar sin problemas. Si ese tampoco te funcionara tendrías que dejar puesto el código y decir en cuál blog lo has puesto.
      Saludos.

      Eliminar
    2. Potro no se como hoy lo instale y funciono! Ahora te quisiera preguntar una duda de diseño ¿como puedo hacer que se vea una cuarta columnna? es que por mas que retoqué los padding y margin no consigo que aparezca. Muchas gracias de antemano por tu ayuda. Mi blog es www.pacoyverotravels.com saludos

      Eliminar
    3. Cambiando el ancho del gadget, pero la sidebar también deberá ser lo suficientemente ancha.

      Eliminar
    4. Lo cambie y conseguí la cuarta columna, pero solo aparecen 6 seguidores y yo quiero 8. Muchas gracias de antemano por tu ayuda!

      Eliminar
    5. Es porque son pocos, cuando tengas muchos más no tendrás ese problema.

      Eliminar
    6. Potro tengo actualmente 1733 seguidores y era por eso que me extrañaba que no se rellenara. Muchas gracias

      Eliminar
    7. Perdón, creí entender que tenías 8. No, entonces debe ser error del gadget porque 1733 son mas que suficientes para que se muestren todas las filas y columnas.

      Eliminar
    8. Potro finalmente lo he quitado porque me bloqueaba los otros dos sliders que tenia de entradas recientes y ultimas entradas. Me esperare a otra versión, mientras la antigua no personalizable no queda tampoco mal. Muchas gracias siempre por tu ayuda

      Saludos

      Eliminar
  55. Hola, necesito mucha ayuda, mi blog tiene apenas 1 mes de creado y no tengo mucha experiencia, no se como pegar el gadget ya que aparece la opción de URL pero no encuentro como pegar el link, la verdad no se que hacer, me gustaría que me ayudes, por favor.

    ResponderEliminar
    Respuestas
    1. Hola Natali, cuando das click en Añadir un gadget aparece una ventanita con la lista de gadgets, tienes que asegurarte que estés en "Lo básico", es ahí donde tienes que elegir HTML/Javascript y no te pedirá ninguna URL.

      Eliminar
  56. Tengo una botonera que tiene menús secundarios al agregar este elemento no sale el simbolito para desplegar el menú.... ( >>) , porque??

    ResponderEliminar
    Respuestas
    1. Habría que ver en qué blog, puede ser que tengas otra versión de jQuery, si a´si fuera deberás quitar la de este gadget, y/o si tuvieras Scriptaculous deberás hacer los cambios que se mencionan en la entrada.

      Eliminar
  57. Muchas gracias son el sitio N°1 de ayuda sin duda alguna. Entradas útiles y fáciles de entender.

    ResponderEliminar
  58. Hola Potro, tengo una duda!! he tenido esta fanbox puesta mucho tiempo en mi blog pero de repente ya no se ve ¿que puedo hacer para solucionarlo?
    Muchas gracias, eres una máquína!!

    http://www.cocoatutoriales.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Ya no está funcionando Laura :( he puesto un aviso arriba de la entrada acerca de ello.

      Eliminar
  59. Hola, no se porque mi fanbox de twitter ha desaparecido, se convirtió primero en un marco vacio pero rectangulo sin mucha altura, luego segui todos los pasos indicados para reinstalarlo y no funciona, si puedes ve el estado en el que está.
    No se que puedo hacer, agradeceré tu ayuda.

    www.trendyperuvianpeople.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Jessy, el fanbox ya no funciona, he puesto un aviso al respecto al inicio de la entrada.

      Eliminar
  60. Hola, me encanta este sitio, pero tengo una duda con respecto a este post, creo ya no funciona, tengo dos blogs en los que agregué este fanbox, y hace algunos dias dejó de funcionar... saben a que se debe?? http://www.bryan-guerra-69.blogspot.com/
    saludos, son lo máximo!!

    ResponderEliminar
  61. donde es que me pide poner la cuenta de twitter? saludos.

    ResponderEliminar
  62. Aún no tengo solución Ronald, en cuanto sepa algo se los hago saber.

    ResponderEliminar
  63. Si tenéis problemas con esta solución (yo los tuve) podéis probar con esta otra:

    www.areatic.net/2013/07/blogger-fanbox-para-twitter-solucionado.html

    ResponderEliminar
  64. Saludo potro, no se que es lo que esta pasando, pero no me quire funcionar de ninguna manera, intente corregirlo con las opciones que recomienda pero no tengo resultado, mi fin es ponerlo como lo tienes en la siguiente entrada:

    http://ciudadblogger.com/2013/01/fanbox-para-facebook-twitter-y-google-plus-flotantes-y-con-efecto-deslizante.html

    pero veo que en ella tampoco te funciona. ???????

    ResponderEliminar
    Respuestas
    1. Hola Domingo, mira el aviso que está al inicio de la entrada.

      Eliminar
  65. Hola Potro no sé si has visto este Fanbox de Twitter. Lo he probado y hasta ahora esta funcionando.




    ResponderEliminar
    Respuestas
    1. Hola Roudy, sí lo he visto anteriormente, pero soy enemigo de los links forzosos en los gadgets, por esa razón me he abstenido de compartirlo ;)

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger