Botones sociales. Facebook, Twitter y Bitacoras | Oloblogger A más de uno parece que le da problemas esto de los botoncitos para votar, recomendar, compartir o retuitear anotaciones. Unas veces son los...

5 de noviembre de 2010

Botones sociales. Facebook, Twitter y Bitacoras

A más de uno parece que le da problemas esto de los botoncitos para votar, recomendar, compartir o retuitear anotaciones. Unas veces son los códigos que no funcionan bien y otras que las imágenes quedan dónde no queremos.

Lo de los códigos es fácil, porque cada servicio facilita los suyos en apartados específicos y sólo hay que copiar y pegar. Pero lo de la ubicación... pues realmente también. También es fácil. Y desde aquí vamos a intentar ponéroslo todavía más fácil.

Accedeis a vuestro escritorio, Diseño, Edición HTML, pinchais en Expandir plantillas de artilugios, buscais <data:post.body/> y justo después, pegais todo esto:

<b:if cond='data:blog.pageType == "item"'>

<div style='clear:both;'></div>

<!--Facebook-->
<div style='float:right;padding:4px;z-index:500;'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>

<!--Twitter -->
<div style='float:right;padding:4px;z-index:500;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-via='tu_cuenta_twitter' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>

<!-- Bitacoras -->
<div style='float:right;padding:4px;z-index:500;'><a expr:href='"http://bitacoras.com/anotaciones/" + data:post.url'><img alt='Votar esta anotación en Bitácoras.com' border='0' expr:src='"http://widgets.bitacoras.com/votar/mini/" + data:post.url'/></a></div>

</b:if>

Lo único que hay que modificar es el data-via del botón de Twitter, tecleando en esa variable vuestra cuenta, sin arroba (@).

Con Vista Previa no vereis nada porque la primera condición que se pone es para que los botones salgan sólo en las páginas de entradas. De otra manera, se promocionaría la dirección principal de la página o aquella otra de navegación por etiquetas o por recientes/antiguas en la que estemos. Así que podeis probar para ver que no se ha estropeado nada, pero tendreis que Guardar y acceder a un post para comprobar el resultado.

Como veis, lo único que hemos hecho algo "especial" es meter cada botón dentro de un div flotante para que todos se alineen a la derecha. También hemos incluido un z-index alto por si nuestra plantilla solapa algún elemento por encima de los botones accidentalmente. Por último hay un padding que tal y como está redactado deja el mismo espacio por los cuatro lados (4px). Esto está por si algún botón os da problemas de ubicación. Sólo habría que cambiar ese valor o aquel de los cuatro (arriba, derecha, abajo, izquierda) que fuera necesario para desplazar el botón y cuadrarlo con el resto.

De la misma manera, podeis añadir nuevos div's con los botones de otros servicios, siempre dentro del condicional.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

119 comentarios :

  1. Muy bueno el tuto, hace rato que lo estaba buscando...
    Gracias Oloman

    ResponderEliminar
  2. Esto combinado con lo de usar sprites en CSS está genial ;)

    ResponderEliminar
  3. Que gran ayuda!.....saludos oloman!

    ResponderEliminar
  4. Hola, acabo de descubrir tu blog, interesantísimo.
    Podrias decirme como puedo poner en mi blog una grabacion de voz des de mi ordenador?
    muchas gracias.

    ResponderEliminar
  5. Hecho! muchas graaaaaaaacias.

    ResponderEliminar
  6. Si quisiera añadir un botón Me gusta dentro del condicional que debo hacer?Gracias Oloman, por todo. Un abrazo.

    Emilio Luna

    ResponderEliminar
  7. Esteban, Lils, visto y comprobado que funciona ;) Julio, a tí no te quedan mal los de Blogger.

    Dayer, me acabo de dar cuenta de que dos de esos tres botones usan sprites. Normal por otra parte.

    jomateixa puedes probar con este sistema o con cualquier otro servicio de alojamiento de sonidos. Se trata sólo de subir tu fichero de audio y luego copiar el código que te dan.

    Por aquí tienes eso Emilio.

    ResponderEliminar
  8. Buenos días. Tengo una consulta que, aunque no tiene nada que ver con este blog, quería hacerte para ver si me podías dar solución.
    Mi blog es www.mesoncico.blogspot.com. Es un blog dedicado a mi ciudad y a cosas mías, que tiene bastantes visitas. Bien, hace un par de días me encuentro que la columna de la derecha se me ha pegado al cuerpo central de las noticias y no sé cómo corregir eso. Aún tengo la plantilla antigua porque me va muy bien, pero ya te digo, ahora no sé qué coño le pasa. Te agradecería mucho que me dijeras, si la sabes, cuál es la solución para poder arreglarla.
    Gracias de antemano. Un abrazo y enhorabuena por Oloblogger.

    ResponderEliminar
  9. Amigo Oloman,

    Muchas veces he recurrido a ti para solucionar problemas del Blogger y siempre me has dado la solución. De todo ello te estoy muy agradecido. Ahora me salgo del tema y, como sé que eres un gran experto en Informática, te solicito que me soluciones, si puedes, un problema que tengo actualmente:

    Prácticamente en todos los ordenadores que utilizo me salen ahora una cantidad excesiva de anuncios, y no conozco la forma de configurar el Explorer, o el Antivirus que utilizo, que es el AVG Gratis, para solucionarlo..

    ¿Podrías darme alguna indicación de cómo puedo configurar el ordenador para que no me acribillen con tanta propaganda?

    Te envío mi agradecimiento por anticipado y aprovecho la oportunidad para enviarte un muy afectuoso saludo,

    Antonio Martín Ortiz

    ResponderEliminar
  10. Lo he estado intentando incluyendo dentro del condicional la dirección del botón Me Gusta...aunque dando palos de ciego, para variar, porque no se lo que tengo que modificar son dos tipos de botones muy diferentes...grr,que torpe xd!!

    ResponderEliminar
  11. Oye Amigo, me gusto mucho tu post y me quedo casi bien mi Blog con estos tres botones, digo casi porque quedo desfasado boton Bitacoras con los otros dos, es decir quedo mas abajo que Twitter y Facebook. Como puedo arreglar el problema?...
    http://bit.ly/cJa6Xx Mi Blog
    Gracias esta muy bueno tu Blog. XD

    ResponderEliminar
  12. Mesoncico ¿lo arreglaste ya o es que quieres la sidebar más separada del contenido de la entrada? A priori a mí me parece que está bien. Un regional saludo ;)

    Hola de nuevo Antonio. Tendría que preguntarte algunas cosas para saberlo a ciencia cierta, pero visitando tu página intuyo que el problema radica en tu propio blog.
    Cuando es visitado, saltan ventanas nuevas con publicidad. Supongo que te refieres a eso, porque también supongo, que cuando por ejemplo visitas la mía, esto no ocurre.
    Si es así, lo más probable es que la causa sea algún gadget o cacharrito que has cogido de algún servicio externo; de esos que se añaden como nuevo gadget HTML/JavaScript. Tienes tantos que me resulta imposible... bueno, muy difícil, averiguar cual puede ser en concreto.
    Por tanto, haz memoria sobre desde cuando te aparece esa publicidad y qué cosas nuevas has instalado desde entonces. Luego, prueba a quitarlos uno a uno, copiando y guardando previamente el código en un bloc de notas (por ejemplo). Vas probando y cuando cese la publicidad habrás encontrado al culpable. Luego, simplemente reinstala los que son inofensivos, comprobando de nuevo por si en lugar de uno, fueran varios los intrusos.

    Emilio Luna en el código que se cita aquí, cada párrafo corresponde a un botón distinto. Cada uno va etiquetado con el servicio al que corresponde. Tendrías que borrar el que lleva el rótulo de Facebook y en su lugar poner el del post que te enlacé.

    Fernando, se explica en el penúltimo párrafo. Tienes que usar el padding correspondiente a ese botón, modificando sus valores. Como hay que "subir" el de Bitácoras y "bajar" los otros, cambia esos padding por estos:
    Twitter - padding: 12px 4px 0px;
    Facebook - padding: 12px 4px 0px;
    Bitácoras - padding: 0px 4px;

    ResponderEliminar
  13. Copiado tal cual da error div, quitándole los condicinales da el mismo error, editando dejando el estilo añadiendo a partir de iframe y cerrar con div da también error. Repasando todos los elementos parece que está bien formada cerrando con div pero no funciona...

    ResponderEliminar
  14. Emilio es muy extraño porque acabo de copiar y pegar en un blog de prueba y el código me lo ha aceptado sin problemas.

    Creo imaginar qué puede ser y es que probablemente no hayas cambiado las comillas dobles por &quot; Las dobles no le sientan bien a la plantilla Blogger en ciertas zonas, y lo mismo ocurre con el &

    El código completo del botón me gusta, sería entonces así:

    <!--Facebook-->
    <div style='float:right;padding:4px;z-index:500;'><iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' scrolling='no' frameborder='0' allowTransparency='true' style='border:none; overflow:hidden; width:100px; height:16px;'></iframe></div>

    ResponderEliminar
  15. Ya lo he conseguido Oloman!Muchas gracias

    ResponderEliminar
  16. Menos mal, porque contigo siempre me cuesta trabajo acertar :D Me alegro.

    ResponderEliminar
  17. Oloman, muchas gracias, esta nueva solución me hace respirar aliviado. Siempre he tenido tu blog como un sitio valioso de referencia. Cuando algún amigo se me acerca porque desea iniciar su blog, lo remito a tu página sin vacilaciones. A mí en particular, me has sacado de calles sin salida y durante estos años he aprendido muchísimo, gracias a tu sencilla y clara manera de explicar los temas y encrucijadas de este mundo digital y lleno de "palabras raras". Un saludo y gracias, por fin tengo los botones.

    ResponderEliminar
  18. Hola de nuevo Oloman. Pues no lo he podido arreglar. Me gustaría separar un poco la sidebar del cuerpo central de las noticias, como estaba al principio. Ya te digo, algo he hecho que se me ha pegado y no sé cómo arreglarlo. Muchas gracias.

    ResponderEliminar
  19. ¡Olé! Muchas gracias por hacérmelo saber Yamil :D

    Mesoncico. Prueba a cambiar el WIDTH de #content, haciéndolo más grande. Eso separará más las columnas porque dará más espacio al contenedor general (content). Luego, si quieres, cambia también el del HEADER, para ponerle el mismo ancho. Por último, si lo has ampliado bastante, aprovecha para ensanchar también el MAIN y tener un blog más grande ;) Más info, aunque con otros nombres: http://oloblogger.blogspot.com/2007/01/blogger-ancho-de-columnas.html

    ResponderEliminar
  20. yo quisiera tener un boton de twitter como el de esta pagina http://www.intercambian2warez.com/

    Es un pajarito twitter que te persigue por el sitio cada vez que subes o bajas..
    sera posible ponerlo en blogger?

    ResponderEliminar
  21. Puede... Ya le echo un vistazo ElektroDanZ y si veo que sí, lo publico. Simpático el pajarraco.

    ResponderEliminar
  22. Hola Oloman:

    Quería saber si es posible reemplazar estos íconos por otros que tengo yo. Intenté y no pude, pero quizás haya un truco que no conozco. Saludos.

    ResponderEliminar
  23. José, con el código que se propone no puedes cambiar la imagen, porque se trata de botones "oficiales" de los distintos servicios y estos incluyen la imagen en la mayoría de casos.

    Tendrías que usar otro sistema si quisieras poner tus propias imágenes.

    ResponderEliminar
  24. hola
    coloque el boton de facebook pero solo me aparece cuando entro a cada una de las entradas, y no en la pagina principal del blog que lo tengo configurado para que solo se vea la ultima entrada, como hago para solucionarlo?
    muchas gracias
    Christian

    ResponderEliminar
  25. ... continua el msg anterior

    me falto comentar que el boton de facebook no me aparece en la pagina principal tampoco cuando voy navegando hacia las entradas anteriores, solo aparece, como decia antes, cuando "entro" en cada una de las entradas individuales

    y por cierto cual es la diferencia entre el boton que tenes "me gusta" y el "compartir" que esta en este post

    gracias nuevamente!
    saludos

    ResponderEliminar
  26. Gracias, Oloman. Voy a ver si encuentro (o armo) algún sistema; encontré unos botones que me gustan mucho. Saludos.

    ResponderEliminar
  27. Hola Oloman!
    Hace rato que tengo problemas con bitácoras. Nunca pude poner sus botones.
    Ahora que veo este post tuyo que me parece más completo, sigo tus indicaciones y me tira el siguiente error:
    Hay dos ID HTML6 repetidos.
    Busco en la platilla desplegada y es cierto. Pero no tiene que ver con lo pegado y fue el único cambio que hice. De hecho, acabo de poner una plantilla estándar nueva de Blogger.
    Estoy confundido :/

    Este es mi blog: abremente.blogspot.com

    Si me podés ayudar te lo agradecería muchísimo!
    Saludos fraternos.

    ResponderEliminar
  28. Anónimo, para que te salga en todas las páginas -cosa que no está exenta de problemas- sólo tienes que quitar la primera y última línea del código, que son las que forman una condición para que, precisamente, los botones sólo se vean en entradas individuales. Pero bueno, cada cual que lo haga al gusto.
    Y aquí tienes un enlace para conocer la diferencia entre 'Compartir' y 'Me gusta'

    OliverX, creo que ese error no tiene nada que ver con los botones. Prueba a editar y sólo insertar un espacio en blanco dónde no estorbe y casi seguro que te dará el mismo error. Esto es porque con el cambio, hay dos gadgets con la misma ID (HTML6). Busca uno cualquiera y cambia esa denominación por HTML96 (por ejemplo). Así tendrán IDs distintas y no te dará problemas.
    Una vez solucionado eso, prueba de nuevo con los botones.

    ResponderEliminar
  29. muchas gracias! Oloman!

    ResponderEliminar
  30. Muy bueno, lo de meter cada botón dentro de un div flotante para que todos se alineen a la derecha está realmente bueno. Google también ofrece botones sociales para compartir tus posts en Blogger, Twitter, etc... pero a veces no qeda bien y hace cosas raras...

    ResponderEliminar
  31. Oloman tengo tres iconos en blanco y negro y los mismos en color rojo.?la idea es que cuando situen la flecha del raton sobre uno de ellos aparezca el rojo y cuando lo quite aparezca el negro.¿como lo hago ?

    ResponderEliminar
  32. Pon en el buscador superior 'rollover'. Creo que eso es lo que me pides. Encontrarás varias opciones. Saludos Juan Martin

    ResponderEliminar
  33. Ok gracias,es que no sabia el término a buscar.

    ResponderEliminar
  34. Oloman,
    Disculpa, busque el codigo() en mi plantilla, expandi artilugios y todo eso, pero no di con el,
    Hay otra opcion algun otro lugar donde ponerlo para que aparezca en laas entradas?.

    De antemano, Gracias.

    ResponderEliminar
  35. Sí que hay otros sitios Apasionados por Dios, pero teniendo un blog Blogger como es el tuyo, SEGURO que tienes que tener en tu plantilla el <data:post.body/> que cito. Sólo tienes que pinchar en la casilla 'Plantillas de artilugios expandidos' y luego buscar con CTRL+F

    ResponderEliminar
  36. Buenos días Oloman,

    En primer lugar agradecerte todo lo que nos ayudas aquí para nuestros blogs.

    He modificado por entero la apariencia de mi blog Rescoldos en la trébede y quería poner este artilugio, que me ha parecido muy elegante y sencillo, y creo que em puede quedar muy bien. Pero a la hora de ponerlo he tenido dos problemas que espero me puedas ayudar.

    El botón de votación en bitácoras me sale más grande lo que te sale a ti aquí y no he tocado nada. ¿Sabes por qué puede ser? ¿como lo puedo arreglar?

    me ha gustado mucho donde lo tienes puesto tu
    debajo del título de la entrada, me gustaría ponerlo ahí, pero no se donde de la plantilla debo colocarlo. ¿Me puedes ayudar con esto?

    Así mismo, me gustaría que saliese en todas las páginas, no solo en las de los artículos. Veo que dices que esto no es recomendable, aunque no he visto por qué. ¿Puedes decirme que debo hacer para que salga en todas las páginas? Si me dices que no es nada nada recomendable, lo pondré solo en las de entrada.

    Y ya por último y agradeciéndote la ayuda que te estoy pidiendo mucho. ¿sabes como podría colocar el botón de meneame junto a esos? No he sido capaz de encontrar el códifgo necesario y a lo mejor tu sabes como puedo hacerlo.

    Muchas gracias otra vez por la ayuda

    Trébede

    http://sentadoenlatrebede.blogspot.com/

    ResponderEliminar
  37. Hola Trébede

    En primer lugar, para lo del botón de bitácoras, pon el padding a cero e incluye delante del SRC un border="0". Lo primero es para ajustarlo en línea con los otros botones, aunque puede ser que tengas que poner otro valor. Ya vas probando. Lo segundo es para quitar un efecto genérico que debes tener metido para otras, que le pone un borde y sombra a las imágenes.

    Para ponerlos al principio del post, deberías mover todo ese código detrás de post-header-line-1, en el mismo sitio dónde tienes tu nombre como autor de los posts (post-author vcard)

    Si quitas los condicionales (primera y última línea), los botones te aparecerán en todas las páginas, pero en ese caso algunos botones enviarán la dirección del blog y no la del post, que es de lo que se trata.

    Menéame no lo uso, así que tendría que verlo más despacio. Pero creo que lo que tengo en la cabeza funcionaría.

    ResponderEliminar
  38. Muchas gracias por la ayuda Oloman,

    Ya he conseguido que saliese como quería. Aunque para que quede bien, he tendido que meter un par de espacios en blanco que si no me montaba el texto sobre las imágenes, quedaba mal. Muchas gracias.

    Pero sigue pasando algo curioso, que puedes ver en cualquier artículo del blog: Si lo instalo debajo del título, al lado del autor se ve bien, en cambio, si lo dejo donde estaba, justo al acabar la entrada, en el footer, el botón de bitácoras sigue quedando mal. Cosas raras a las que a lo mejor tienes una explicación.

    Por lo que te entiendo al final de tu respuesta, estás pensando en hacer algo para poder incluir ahí el botón de meneame con el contador. Muchas gracias por atender la petición.

    Salu2
    Trebede

    ResponderEliminar
  39. Muchas gracias me resulto excelente...

    ResponderEliminar
  40. No hay de qué Francisco

    Trébede, la culpa es de la caja de sombra y del padding que tienen por defecto las imágenes del cuerpo de las entradas. Tendrás que añadir al IMG algo más, para forzar el cambio de estilo:

    style="-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);padding:0px;"

    Suerte ;)

    ResponderEliminar
  41. Muchas gracias otra vez por la ayuda, Oloman.

    Pero en este caso creo que es mi patosidad con el HTML lo que hace que no me funcione la solución que me das. He intentado ponerlo en varios sitios ese código ni no consigo que no me de error de HTML inválido en la plantilla de blogger.

    Lo he puesto creo que en todos los sitios posibles de esta linea: div style='float:right;padding:4px;z-index:500;' !> y no consigo nada.

    ¿Me puedes ayudar para ver donde la tengo que poner exactamente?

    Muchas gracias otra vez por tu ayuda

    ResponderEliminar
  42. No es en el DIV Trébede, sino en el IMG:

    <img style="-moz-box-shadow: 0 0 0 rg(ETC)... alt='Votar esta anotación en Bitácoras.com'

    ResponderEliminar
  43. Lo conseguí.

    Queda perfecto. Muchas gracias por la ayuda y la paciencia Oloman. Te debo unas birras fresquitas

    Salu2

    Juan

    ResponderEliminar
  44. Hmmm... Palencia me pilla un poco retirado, pero a ver qué podemos hacer ;)

    ResponderEliminar
  45. Compañero, estoy frustrado, he metido el codigo de mil maneras, y lo guarda sin problemas alguno, sin errores. Pero luego no se ve absolutamente nada, que estoy haciendo maal?? quiero que se veaa!!

    ResponderEliminar
  46. Lokiyo, si no dejas el código puesto en tu plantilla, me resulta imposible ver qué pasa.

    ResponderEliminar
  47. Hola! Lo acabo de poner en mi blog pero no sale ningún botón... Solo sale en las neuvas entradas a partir de que lo pones? Ayúdame que es la vigesima vez que intento poner el botón de facebook y nunca me sale o no lo veo T__T. Lo he puesto igual que el tuyo, pero he quitado el de twitter, ya que no tengo ninguna cuenta ahí... he hecho mal? por que no lo entiendo :S

    ResponderEliminar
  48. Zoe, sí te sale en todas las entradas, que es de lo que se trata. Lo mejor es que copies el código tal cual se proporciona aquí y lo pongas dónde se indica. Aunque no tengas cuenta en Twitter, ese botón permite que otras personas puedan enviar tu post a través de ese medio.

    ResponderEliminar
  49. Hola Oloman:

    Soy uno de los administradores del blog "loNuestro" y siguiendo los pasos que proporcionas los botones sociales colocados al final del artículo me quedaron perfectos y también lo intenté los botones "Me gusta" "Twitter" y "Me gusta" (como lo tienes tú, debajo del título) y al colocar "Me gusta" me salen los tres botones descuadrados.

    La pregunta es: ¿Como consigo poner dichos botones debajo del título tal y como lo tienes tu?, lo intenté de mil maneras y no hay forma.

    Un saludo.

    ResponderEliminar
  50. Diego, tal y como lo tienes ahora sale bien. No obstante, usaste otro tipo de botones y hay que tener en cuenta que algunos no son simples imágenes, sino scripts o incluso iframes. Cada cosa tiene su tratamiento y este ejemplo que puse aquí es para colocarlo tal cual.

    Si te da problemas, una solución genérica sería colocar un <div style='clear:both;'></div> antes y/o después de los botontes para eliminar problemas provocados por los FLOAT.

    ResponderEliminar
  51. Gracias Oloman, creo que lo he conseguido y me quedó bien.

    Nuevamente Gracias!.

    ResponderEliminar
  52. "Ferpecto"

    ¿Era cosa de los FLOAT?

    ResponderEliminar
  53. Si, era problema con los float (anda que no me dieron quebraderos de cabeza).

    Gracias nuevamente!.

    Un abrazo.

    ResponderEliminar
  54. GRACIAS POR EL TRUQUITO, PERO YO QUISIERA PONERLO ARRIBA Y NO ABAJO. Y DE NUEVO MUCHAS GRACIAS!

    ResponderEliminar
  55. Gerencia, comentario #37 ;)

    ResponderEliminar
  56. El nuevo botón de 'me gusta' añade un thumbnail y una descripción al enlace que se comparte en facebook. ¿Existe alguna manera en Blogger para poder obtener esta información desde el contenido de un post? A día de hoy, lo único que he conseguido es añadir el meta og:image y meta og:description del Open Graph de facebook directamente en la plantilla pero no esta solución no es válida para cada post. He visto que para WordPress existe un plugin que soluciona este problema. ¿Alguna idea para Blogger?

    ResponderEliminar
  57. Hola, gracias por el dato. Una pregunta, sé que aparece en la parte inferior de las entradas, pero quisiera que aparezca en la parte superior o en su defecto tanto arriba como abajo ... cómo logro eso? gracias!

    ResponderEliminar
  58. Uf, después de probar muchos posts, por fin este me funcionó! Gracias, amigo!!

    ResponderEliminar
  59. Isgarlo a ver si el contenido de este post te ayuda http://goo.gl/dMNCa Hay algunas etiquetas DATA interesantes ;)

    Fredy Zapata, en lugar de ponerlo después del data:post.body, ponlo delante. Y para que aparezcan dos veces, tendrás que copiar el código otras tantas ocasiones.

    Om Xperience, no hay de qué. Me alegro de que te funcionara.

    ResponderEliminar
  60. ¿Cómo se añadiría a estos tres botones uno de Meneame? ¿Y como se consiguen poner los botones arriba del texto en lugar de abajo? Gracias

    ResponderEliminar
  61. Jbros, para ponerlos antes del texto habría que insertar el código debajo de post-header-line-1 y lo de Menéame lo tengo en mi lista de tareas pendientes, que son muchas...

    ResponderEliminar
  62. Hola Oloman!! me ha quedado genial estos botones, pero tengo un pequeño problema con Bitácoras, cada vez que pulso para votar me salta error en cualquiera de las páginas donde lo pongo. En cambio si voy a otro blog, como este mismo, pulso y me deja votar sin dramas! eso es porque puse algo mal? No creo porque copié y pegué textual y en face y twitter me anda bien!! Qué frustración! Aquí te dejo un enlace para ver si es algo que haya hecho mal.
    Estrenos

    ResponderEliminar
  63. Otra vez yo! jajaja ya lo solucioné! perdón, es que los estaba poniendo por fuera del post y se ve que no hallaba qué indexar, pero ahora los puse luego del título y ya me toma sin problemas la cosa!! Gracias!! =:D

    ResponderEliminar
  64. .-OLOMAN: Y si quieres colocar esos botones a redes sociales en todas las entradas del blog y no solamente que aparezca cuando seleccionas una sola entrada como en el caso que explicas...¿qué hacer?

    .-Gracias.

    ResponderEliminar
  65. Tal y como yo lo he planteado aquí, Andybel, los botones saldrán en TODAS las entradas, pero sólo cuando accedas a una entrada en concreto. Se puede hacer para que salga también en la página de inicio, en las de etiquetas o en las de navegación (en estas se muestran varios posts de golpe), pero en ese caso, los botones "votarían" la página, no un post.

    ResponderEliminar
  66. Muchisismas gracias! muy lindo el diseño de tu blog!! =)

    ResponderEliminar
  67. HOLA QUE TAL SABES QUE NO HE PODIDO HACER FUNCIONAR LO PEGO DESPUES DEL POST.BODY\ Y NO PASA NADA NO SE QUE HACER EN VERDAD LO HE HECHO DE TODAS FORMAS INCLUSO ACTIVE LA OPCIÓN QUE NOS DA BLOGGER Y ESA TAMPOCO ME FUNCIONA O SEA NO ME APARECE EN MI BLOG SIENDO QUE LA TENGO ACTIVADA Y E INTENTADO ACTIVARLA CON TRUCOS QUE ME RECOMENDARON DE OTRA PAGINA Y TAMPOCO FUNCIONA, NO SE QUE PROBLEMA PUEDA TENER MI PLANTILLA, AGREDECERIA SU AYUDA

    ATTE. LUIS SAAVEDRA G.

    ESTE ES MI BLOG

    http://milenioenigmatico.blogspot.com/

    ResponderEliminar
  68. DISCULPE ME FALTO QUE INCLUSO TENGO UNOS BOTONES DE FACEBOOK QUE VENIAN EN LA PLANTILLA Y NO HE PODIDO HACERLOS FUNCIONAR PORQUE NO SE QUE LINKS COPIAR AHI, AGRADECERIA SU AYUDA EN VERDAD ESTA PARTE DE LOS BOTONES ME HA DADO UN DOLOR DE CABEZA JAJAJAJAJ, ME SALIO CHUCARO EL CABALLO COMO DICEN EN MI PAIS.

    SALUDOS GRACIAS NUEVAMENTE POR LEER MIS COMENTARIOS

    ResponderEliminar
  69. Administrador, este código lo puedes poner en muchos sitios. Prueba en la misma parte de tu plantilla dónde ahora tienes ese botón para Facebook. Copia y pega todo justo a continuación de él. Si te funciona, entonces borra el que tienes.

    ResponderEliminar
  70. Oloman, el diálogo donde me marca el número de "me gusta" me sale entrecortado, ¿qué es lo que tendría que modificar? www.mariposascrochetfina.blogspot.com

    ResponderEliminar
  71. Fina, verás que la manera en que presento aquí los botones es metiendo el código de cada uno dentro de un div con algunas propiedades de estilo. Eso precisamente es para alinearlos y separarlos lo que cada uno quiera. Bien, pues puedes hacer lo mismo, pero añadiendo un WIDTH al de Facebook, con un tamaño suficiente como para que quepa el botón y el número. Ahora mismo no sé cuanto sería exactamente, pero calcula unos 60px una vez que veas el resultado, lo amplías o lo reduces según necesites.

    ResponderEliminar
  72. ¿Y cómo habría que ponerlo? <div widht:60px ¿o algo así?

    ResponderEliminar
  73. No exactamente :)

    <div style="width:60px;">
    CODIGO
    </div>

    ResponderEliminar
  74. Oloman, perdona mi torpeza pero tengo que agregarlo detrás de esto o dónde?
    ...button count

    ResponderEliminar
  75. Fina, la estructura es la que comenté en #75. Dónde pone CODIGO tienes que sustituir por todo el código que forma el botón de Me Gusta. El código completo iría entre los dos DIV's.

    ResponderEliminar
  76. ¡Qué bueno! Muchas gracias. :)

    ResponderEliminar
  77. Me alegro de que te sean útiles Javier.

    ResponderEliminar
  78. Mil gracias... no habia manera de colocarlo... quisiera haber puesto unos botones algo mas bonitos...pero con estos me vale...

    saludos...¡¡¡

    ResponderEliminar
  79. Ŧirєηzє, estos son los botones oficiales de cada red. Para personalizarlos y poner tu propia imagen habría que usar otros que, por ejemplo, no llevarían contados... pero todo se puede hacer.

    ResponderEliminar
  80. Hola, yo tengo un problema que no veo cómo solucionar. Resulta que algunos de mis blogs, cuando pincho para compartir con facebook, lo que me publica allí, es la fotografía, el título y en vez de poner un trocito del contenido del post, me pone uno de los comentarios. No entiendo el motivo, ya que lo hace en algunos y todos los he configurado de la misma manera, aunque son plantillas diferentes. Encima como no se puede modificar ese contenido, no puedo quitar el comentario y claro, de esa manera es difícil publicar.
    A ver si puedes ayudarme, saludos y graciass!!!

    ResponderEliminar
  81. Se me olvidó poner el blog, aunque me pasa en varios, uno de ellos es http://destylou-historia.blogspot.com

    ResponderEliminar
  82. Ok.. graciass!!! lo voy a intentar, ya te contaré.

    ResponderEliminar
  83. hola, mira, lo hice pero no me funciono, te explico como esta mi plantilla: mi plantilla esta modificada, en la pagina principal del blog se muestra 3 o 4 entradas pero solo un fragmento de cada entrada con la opcion de "leermas", esto es porque yo la configure asi con algunos codigos que no me acuerdo de donde los saque, tambien tiene otro pedacito de codigo que agregue para que cuando ingreses a alguna entrada se muestre debajo de la misma 3 o cuatro entradas mas en modo miniatura...todo eso funciona perfecto pero al aplicar el codigo que citas vos en tu blog no veo la diferencia, todo sigue como si no hubiera hecho los cambios, a los pasos los hice correctamente y tambien aclaro que al pedacito de codigo del boto de twitter lo borre porque no tengo cuenta de twitter...si sabes cual es el problema de esto te agradeceria infinitamente...al codigo lo tengo aplicado y no lo borre...te voy a dejar la direccion de mi blog asi lo ves y te das una idea...http://tumundoinsolito.blogspot.com

    pd: te felicito, esta buenisimo tu blog, me sirvio muchisimo y tengo el banner de tu blog en el mio...gracias!!!

    ResponderEliminar
  84. Matiastamaltodo, no sé exactamente cómo compruebas los cambios, pero estos no serán visibles ni desde "Vista Previa", ni desde una página que no sea la propia de una entrada concreta. De todas formas, hoy veo que los tienes "escondidos" tras un globo con la leyenda "Comparte esta entrada", aunque parece que son otros.

    Sobre el botón de Twitter, no es necesario tener cuenta para que ponerlo. Con él, tus lectores que sí tengan cuenta podrán enviarlo a esa red.

    ResponderEliminar
  85. Hola de nuevo:

    No he conseguido que funcione, sigue igual, si pongo un enlace de mi blog en facebook, me coge el título y la imagen en miniatura, pero en vez de ponerme un extracto del post, me pone uno de los comentarios ;(
    ya no se lo que hacer porque por lo demás creo que todo está bien.
    Saludos!

    ResponderEliminar
  86. Destylou, Facebook en concreto usa otro protocolo que no es el de Schema. Se llama Open Graph, pero sobre él no he visto casi nada. A ver si aquí y con esto, tienes más suerte:

    El protocolo Open Graph

    ResponderEliminar
  87. Excelente Olo!! Justo era esto lo que buscaba!! Gracias por tan buen aporte!!

    ResponderEliminar
  88. Pero la de G+ como lo pongo! es el que me falta porfavor!!

    ResponderEliminar
  89. Aquí se explica con detalle Microboy90: Boton +1

    ResponderEliminar
  90. Pero yo lo kiero asi como lo tienes tu.. juntos los 3,solamente G+,twtter y facebook ,los demas no me interesan.

    asi como los tienes tu .. mira la imagen...,

    Gracias@@

    ResponderEliminar
    Respuestas
    1. Lee los dos últimos párrafos. Ahí se explica que se puede poner cualquier botón con el mismo sistema que los anteriores, con div's que floten.

      Los tres botones de la entrada tienen cada uno un div idéntico en estilo y sólo cambia el código propio de cada botón. Para G+ lo haces igual pero poniendo entre el div de apertura y el de cierre:
      <g:plusone></g:plusone>

      Eso suponiendo que ya tengas el botón +1 aunque sea sin alinear o en caso contrario, poniendo previamente en tu plantilla el código que te puse en el enlace del comentario 92.

      Eliminar
  91. pfffffff,He intentado poner los codigos que nos das aqui pero el de Twitter no me contabiliza el post sino que me cuenta la cantidad que han twitteado en todo el blog, no lo consigo de ninguna manera, ¿y no se podria arreglar, subir los que tengo mal con algun pading o algo asi? yo soy una ignorante en esto, porfa necesito tu ayuda

    ResponderEliminar
  92. A mí no me aparecen ninguno de los botones, y la segunda línea se me ha transformado en . No aparece absolutamente nada (mi blog http://bit.ly/gThKeT). ¿Qué puede pasar? Gracias por la paciencia

    ResponderEliminar
    Respuestas
    1. No lo tienes incluido en tu código, por lo que supongo que sólo probaste con Vista Previa. Lo que ocurre si es así, es que la condición que incluye el código es para que sólo se vea en las entradas individuales y por eso no se ve en Vista Previa, ya que eso sólo muestra la página principal (excluída por la condición).

      Eliminar
    2. Creo que ya lo he arreglado. Parece que estaba puesto después de un data:post.body incorrecto. Ahora me aparecen al final de mi post, ¿cómo conseguiría que aparecieran al principio, por favor? Gracias!

      Eliminar
    3. En lugar de poner ese código tras data:post.body, insértalo antes.

      Eliminar
  93. Oloman. Llevo toda la tarde con el temita (importante) de los botones. He estado viendo y aprendiendo algo sobre el "padding" pero estos temas no se pueden aprender en unas horas y no alcanzo a dejarlos visibles y bonitos. Los botones me salen muy separados y he probado innumerables combinaciones que, al hacerla a ciegas no me dan el resultado esperado. Te ruego que me ayudes o que me des una URL donde poder guiarme. Yo lo que busco es que queden más juntos todos. Tal como están en línea y todos al mismo nivel pero con menos separación entre ellos. (G+. Bitácoras, twitter y facebook).
    Mi URL de pruebas: http://agrplant1.blogspot.com.es

    Gracias por compartir.

    ResponderEliminar
    Respuestas
    1. El DIV con el botón de bitácoras ponlo justo antes del de Twitter y además añádele un margin-top:-4px;

      Al de G+ añádele un width:80px;overflow:hidden;

      Eliminar
  94. Gracias Oloman! No me funcionaron, pero es algo que ya se escapada de tus manos, el tutorial está bien. Definitivamente tendré que cambiar de plantilla pues esta no me muestra ningún tipo de botones de compartir.

    Los he instalado todos y nada.

    Un abrazo! Si alguna vez necesitas algo sobre iOS no dudes acudir a mí, con gusto espero poder ayudarte en algo de la misma forma que tú lo haces con todos nosotros.

    ResponderEliminar
    Respuestas
    1. Supongo que no intentaste verlo con Vista Previa, porque sólo lo verás en páginas de entradas. Tienes que incorporar el código a la plantilla, guardarlo y luego acceder a un post para comprobar cómo salió.

      De todas formas veo que los tienes flotantes en la izquierda, así que supongo que no necesitas complicarte. Saludos.

      Eliminar
    2. Si, así lo hice, lo guardé y luego fui a una entrada a ver. Pero como te dije antes me sucede igual con todos los botones que he tratado, solo con los flotantes como este que pude encontrar ahora me funciona.

      Lo dejaré así mientras. Gracias mil por todo Oloman. ¡Besos y abrazos desde República Dominicana!

      Eliminar
    3. Bonito país ;) Estuve allí hace como dos años. Fue para la boda de mi primo que todavía sigue allí con su querida esposa :)

      Es muy raro que no te funcionen los botones pero como dije, no merece la pena molestarse cuando hay alternativas sin problemas.

      Eliminar
  95. Hola oloman, muy interesante tu articulo. sabes tengo una duda sobre este tema. Lo que quiero es agregar mas botones a los que ya tengo y que queden flotando hacia algun costado, siempre a la vista del lector.

    Este es mi blog http://smsfan.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Joseck.

      Para eso tendrías que meter todo ese código excepto la apertura y cierre del condicional dentro de una caja o contenedor auxiliar (div) y a esa capa darle estilo añadiendo position:fixed. Aquí tienes más información sobre esa propiedad.

      Eliminar
  96. Oloman, hola. He buscado el el post.body y en mi blog no aparece. Se me hace raro... lo he buscado much'isimas veces y nada. Saludos.

    ResponderEliminar
    Respuestas
    1. Si tienes Blogger, tienes al menos un data:post.body por narices. Tienes que pinchar en el cuadradito de "Expandir plantillas de artilugios" para poder verlo.

      Eliminar
  97. Muy práctico Olomán. Saludos nuevamente. Y si quiero que salga en la descripción en miniatura de las entradas? es decir, en los thumbnail. Me gustaria implementar los botones de twitter, google y facebook en cada descripcion. Espero me puedas ayudar. Saludos.

    ResponderEliminar
    Respuestas
    1. Para eso tendrías que quitar la primera y última línea que forman una condición precisamente para que sólo se vean en las entradas. De todas maneras como los dos primeros son los "oficiales", al darle a compartir o tuitear la dirección que se enviará será automáticamente la de la página y en la página Inicio esta será la dirección principal del blog, no la del post. Por eso puse la condición.

      Eliminar
  98. Te has dado cuenta de que el botón de bitácoras no funciona en Blogger si lo pulsas desde otro país? Ahora las direcciones de Blogger acaban según el país, y por eso Bitácoras no las reconoce. Ejemplo: mi blog yo lo veo como http://lilleskvat.blogspot.dk/ aunque en realidad es http://lilleskvat.blogspot.com/. Sabes si se puede hacer algo con ello? Gracias!

    ResponderEliminar
    Respuestas
    1. Sí, se pueden hacer dos cosas:
      1) Cambiar todas las data:post.url que veas, que representan la dirección con subdominio nacional, por data:post.canonicalUrl que es la dirección sin ese subdominio.
      2) Aplicar este truco para que siempre salgas como .com y así no tendrás que tocar lo de las data.

      Si usas la segunda opción, el código óptimo es el que hay al final del post, en la última actualización.

      Eliminar
  99. Hola Oloman.

    Resulta que ya tengo mi blog con muchos scripts y no quiero poner más. He visto que se puede utilizar el botón de compartir de Twitter sin script. Es este:

    https://docs.google.com/document/d/1PDQQXN3nUNGTHJx7HzhHFzY_xHH7rvTz1WCHEML6Tcg/edit

    ¿Sabes dónde le podría introducir el atributo target blank para que se abriera en otra página? Un saludo.

    ResponderEliminar
    Respuestas
    1. Eso es más o menos lo que yo tengo en el botón Twitter de esa barra fija que puse a la izquierda. El _blank tienes que meterlo dentro de la etiqueta < a target="_blank" href...

      Eliminar
  100. Hola,
    el motivo de ponerme en contacto con vosotros es el siguiente. Tengo agregado en mi blog www.ocioenpocaspalabras.blogspot.com vuestro widget para los votos en bitacoras.com y siempre me ha funcionado bien.
    El caso es que, desde que ha activado la opcion de etiquetas meta en blogger, el botón ha desaparecido de la pagina principal donde se muestran las entradas. Sí que se ven si entramos directamente a una entrada concreta, pero no si las vemos desde la pagina principal. ¿Podrías aportarme alguna solución para esto?

    Muchas gracias por adelantado.

    ResponderEliminar
    Respuestas
    1. Pero... no es sólo el de Bitacoras el que te aparece únicamente en las entradas y no en el resto de páginas. Son todos los botones que tienes al principio de cada entrada.

      Eso casi seguro es porque esos botones se han quedado dentro de alguna condición que provoca precisamente eso, pero desde aquí es imposible para mí decirte dónde está porque ya veo el código interpretado y por el lado de la condición cumplida.

      Eliminar