28 may 2012

Cómo poner el botón de "pinear" de Pinterest en cada post de Blogger



En este artículo aprenderás a colocar el botón "Pinear" de Pinterest en cada post de tu blog usando Blogger. Vemos interesante este botón sobre todo para blogs con un fuerte componente visual en sus entradas, por ejemplo, blogs de moda, complementos, fotografía, maquillaje, viajes, decoración, artes visuales, cocina, etc.

Si tu blog encaja dentro de los tipos de blogs mencionados anteriormente y no conoces Pinterest o bien quieres conocer un poco más sobre esta red social, te invito a leer Pinterest y Blogger una combinación explosiva.

¿Cual es el objetivo de este botón?

Al poner este botón en cada uno de tus post, estás facilitando la tarea "pinear" a quién visita tu blog. Al hacer clic sobre el botón el usuario podrá elegir qué foto o video contenido en el post es el que quiere pinear o pinchar, hasta qué tablero y la descripción del mismo. Cuando más sencillo se lo pongas a quién visita tu blog, mejor estará integrado en las redes sociales y mayor tráfico de entrada generarás.

¿Cómo poner el botón de Pinterest en cada post de Blogger?

  1. Haz clic en Pestaña Plantilla
  2. Haz una copia de seguridad pulsando el botón "Crear copia de seguridad/Reestablecer"
  3. Haz clic en el botón "Edición de HTML"
  4. Pulsa la combinación de teclas Ctrl F o Ctrl B  (en Mac ⌘F o ⌘B)  y busca l
    <div class='post-footer-line post-footer-line-1'> o bien esto otro <div class='post-footer'>   para situarlo al pie del post .
    <div class='post-header'>
    para situarlo en la
    parte superior del post.
    (Si encuentras varios resultados es el primero en este caso)
  5. Copia el siguiente código

  6. Vuelve a la plantilla HTML y péga el código justo debajo de la linea encontrada en el paso 6
  7. Guarda, visualiza tu blog y haz una prueba de "pinear"

Acerca del contador del botón 

Por defecto el código ofrecido muestra un contador en la parte derecha del botón. Si quieres que el contador se muestre por encima, cambia donde pone data-pin-config='beside' por data-pin-config='above'. Si por el contrario no quieres el contador, cambia donde pone data-pin-config='beside' por data-pin-config='none'

Nota: Si tienes varios botones sociales es posible que tu linea quede mejor si este botón es el último de ellos tal y como está en iniciaBlog.com


¿Cómo alinear este botón?

Esta es una pregunta que me han hecho no solo con respecto a este botón sino también con respecto a resto de los botones que tenemos para compartir las entradas, como por ejemplo el botón de Twitter, Facebook, Linkedin, Google+, imprimir.  Aquí va mi sugerencia, debes poner una división (div) que envuelta tanto a este botón como a todos los demás que tengas. El código es muy sencillo:


<div style='width:600px; vertical-align:top;border:0'>
        ...aquí el código del botón de Pinterest
        ...y el resto de código de los otros botones que tengas para compartir
</div>
Con el parámetro vertical-align podemos alinearlos al Top (arriba), middle (medio), botton (abajo) +info sobre esta propiedad CSS
Con el parámetro width establecemos el ancho de la división. 

¿Te ha gustado esta publicación?

Si te ha gustado esta publicación, te invito a dejar tu comentario y compartirla con tus amigos y seguidores mediante los botones sociales, Ah! una cosa antes de terminar, si quieres recibir las próximas publicaciones directamente en tu buzón, suscríbete ahora al botetín de iniciaBlog indicando tu email (recuerda recibirás un correo electrónico con un enlace para confirmar tu suscripción).

Gracias y feliz Blogging!

160 comentarios:

  1. Jesús-Inicia Blog, hola! felicitaciones, como siempre, cada post es muy útil y nos ayuda mucho a todos quienes tenemos un blog! ya tengo en mi blog el botón de "pinear"!
    gracias!
    Victoria - videcoyvintage

    ResponderEliminar
    Respuestas
    1. GRacias Victoria, ya lo he visto en tu blog, te ha quedado genial. Ademas he hecho pin en algunas de tus entradas.

      Lo que si he visto es que el contador no va...pero no va desde ayer, he dejado un comentario en el post donde la gente que provee el código...espero que me responda cuanto antes.

      Un fuerte abrazo y gracias por tu comentario
      Jesús González

      Eliminar
  2. Ya he utilizado tu artículo de como posicionar el blog, y con este tengo un problema y es que las frases del apartado 6 no me aparecen en edición de HTLM, como podría solucionarlo?
    Muchas gracias, tus post son de lo mas util.

    ResponderEliminar
    Respuestas
    1. Hola Raquel,
      Muchas gracias por avisarme, te he puesto otra variante que es más común por favor vuelve a intentarlo, recuerda que debes expandir la plantilla de artilugios antes de buscar.

      Espero un nuevo comentario.

      Mucha suerte
      Jesús González.

      Eliminar
    2. Con este nuevo ha funcionado a la perfección,me parecen muy buenos tus post, sigo atenta a cualquier cosa para mejorar mi blog.
      Raquel

      Eliminar
  3. Como siempre otro gran y útil post para todos los bloggeros!!! Saludos y muchas gracias por tus siempre útiles consejos!!!

    ResponderEliminar
    Respuestas
    1. Gracias Daniel!
      Siempre es un placer contar contigo....muchas gracias de verdad!
      Jesús González

      Eliminar
  4. Hola Jesús! qué tal? espero que bien! una cosa, cómo has implementado el botón que tienes de PDF?
    Muchas gracias y un saludo!!!

    Carolina

    ResponderEliminar
    Respuestas
    1. Hola Carolina,

      El botón de PDF lo tienes este tutorial, esta ideal para imprimir, exportar a pdf o enviar por correo electrónico.

      Cualquier duda dejame otro comentario en esa entrada. Muchas gracias por pasarte por aquí

      Un fuerte abrazo!
      Jesús González.

      Eliminar
  5. Gracias una vez mas desde http://psicologia-terapias.com

    ResponderEliminar
    Respuestas
    1. Mil gracias por este estupendo comentario! y tu blog más que recomendado, contenidos sumamente interesantes!

      Felicidades
      Jesús González

      Eliminar
  6. ¡Genial! ¡Ha quedado perfecto! ¡Muchas gracias! :D

    http://www.elmundoatravesdeunvisor.com/

    ResponderEliminar
    Respuestas
    1. Gracias Ainara!
      Por cierto, cuando tengas un hueco trata actualizar tu código del
      botón de Twitter, ya que en la vista inicial del blog no toma el titulo del post

      Felicidades por tu blog

      Eliminar
    2. ¡Actualizado! ¡Gracias de nuevo! ;D

      Eliminar
  7. Muchísimas gracias por el post. Me ha ido que ni pintado.

    Gracias a tus explicaciones y a un poco de investigación he conseguido añadir los botones y que queden más o menos a mi gusto, incluyendo el de pinterest.

    Un abrazo. :)

    ResponderEliminar
    Respuestas
    1. Gracias a ti, he visto el botón en tu blog y te ha quedado genial!
      Felicidades

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

    ResponderEliminar
  9. ¡¡¡Por fin uno que funciona bien!!!
    Un saludo.

    ResponderEliminar
  10. Hola!!! buenos días!!! seguro que mi pregunta es absurda pero... los que tenemos vistas dinámicas... no podemos??? No hay opción para añadir CSS???
    www.claroscurostudio.com

    ResponderEliminar
    Respuestas
    1. Efectivamente ClarooscuroStudio....con las plantillas dinámicas no puedes (de momento) modificarl el HTML....debe contar única y exclusivamente con los Gadget (que poco a poco son más).

      Es una pena...pero de todas formas lo anoto y si sale algo te aviso ¿te parece?

      Gracias por tu comentario,
      Jesús González

      Eliminar
  11. Muchas gracias por el post, por fin uno que funciona, en cuanto a las vistas dinámicas, yo la he tenido durante una semana y he vuelto atrás (perdiendo la plantilla anterior grrr, no había guardado) pq no te deja personalizar casi nada. Ahora tengo mi blog de nuevo en construcción, así que gracias por tus consejos.

    claraguevaraphoto.blogspot.com

    ResponderEliminar
    Respuestas
    1. Gracias Clara por dos cosas, primero por comentar y segundo porque haciéndolo es como si me hubieras dejado tu tarjeta de visita, así que he visto tu blog y ahora te sigo. Me ha encantado y es que la fotografía es una de mi pasiones... así que disfruto visitando tu blog.

      Mucha suerte y recomendado visitar el blog de clara.

      Bienvenida!
      Jesús González

      Eliminar
  12. Después de seis intentos por fin uno que funciona a la perfección... gracias por el post, yo le daría un 20!! a este y a muchos más, una grata sorpresa descubrir un blog de ayuda con cosas que aparte de funcionar son "entendibles" para los no muy iniciados en html

    Altamente recomendable, enhorabuena por el blog!

    ResponderEliminar
    Respuestas
    1. Gracias Miranda por tu comentario...precisamente ese es el objetivo de este blog, ayudarte a dar los primeros pasos con el tuyo. Te agradezco la visita y nuevamente tu comentario....mucha suerte con tu blog....te sigo a través de Twitter y Google Friend Conect!

      Un fuerte abrazo y bienvenida!
      Jesús González

      Eliminar
  13. Muy útil , gracias!! A ver si alguien le da al botoncito ;)

    ResponderEliminar
    Respuestas
    1. Gracias!....Ta lo he tocado yo...te he "pineado"...además te sigo...gracias por visitarme y dejar tu comentario!

      Un fuerte abrazo!
      Jesús González

      Eliminar
  14. Muchas gracias!
    Ya lo pude poner y muy fácil ^^

    ResponderEliminar
  15. Hola Jesus,
    ya he probado alguna de tus sugerencias y me han funcionado bien, pero esta me esta dando algun problemilla. Tengo un blog que lo utilizo para ir haciendo todas las pruebas y con este de Pinterest alguna cosa he hecho mal pq no lo veo per ningun lado.
    el blog és annaenpruebas.blogspot.com.
    Debo decirte que he encontrado dos opciones al comando del paso 6 y opté por la segunda de busqueda pues salia la frase tal cual, sin comandos que le siguieran com <spam.....etc etc
    puedes hecharme una mano?

    ResponderEliminar
    Respuestas
    1. Hola Anna,
      Acabo de ver tu comentario, comentarte que he estado por tu blog de pruebas y te he dejado un comentario allí.

      Disculpa por la demora en responderte.

      Eliminar
  16. Hola! a mi tmb me ha ido bien pero habría alguna forma de centrar el botón? gracias y saludos!

    ResponderEliminar
    Respuestas
    1. Para centrar el botón tendrías que colocar el código que te he facilitado dentro de un div <div....el codigo ... espera espera....voy a explicarlo en el mismo post, he agregado una pregunta que se llama ¿Cómo alinear el botón?

      Espero que te sirva y que puedas aplicarlo.
      Jesús González

      Eliminar
  17. Hola Jesús,

    Gracias por tus tutoriales, son la caña! He puesto el botón de "pinear" y todo perfecto, excepto por una cosa: funciona perfectamente cuando es una entrada, pero no cuando es una pagina... Por ejemplo:
    Aquí funciona: http://www.dresses2kill.com/2012/08/vestido-jo-ann.html
    Aquí no: http://www.dresses2kill.com/p/vestidos-dresses.html
    Se te ocurre alguna solución?
    Mil gracias de nuevo!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Floren por avisar con tu comentario sobre el problema con el botón de pinterest. Comentarte que ya he dejado un comentario a los que en este caso desarrollaron el código, es decir a la gente de My Blogger Tricks....en cuanto me respondan algo te digo.

      Seguimos conversando....

      Gracias,

      Jesús González

      Eliminar
  18. Genial....gracias por tu comentario, he visto tu blog y te he dejado un comentario.

    Seguimos conversando.

    Jesús González

    ResponderEliminar
  19. Hola!!!

    Acabo de descubrir tu Blog, buscando precisamente lo que explicas ... pero ... no me funciona ... :-(
    Si pinchas en él te salen las fotos, seleccionas una ... y ahí se acabó no lo enlaza ... qué tengo mal???
    Mi blog es: http://lascositasdelyra.blogspot.com.es/

    Un saludo!!!
    Lyra

    ResponderEliminar
    Respuestas
    1. También me gustaría saber cómo localizo los códigos de los otros botones que tengo para ponerlo como tu??? ... como ves no tengo ni idea ... :-(

      Gracias!!!
      Lyra

      Eliminar
    2. Estoy de nuevo aquí ... Acabo de comprobar que me pasa lo mismo cuando intento subir una imagen de mi Blog, con el botón de Pinterest que tengo en la barra de marcadores. Con otros Blogs no me pasa ... así que va a ser un problema de mi Blog.

      Un saludo!!!
      Lyra

      Eliminar
    3. Hola Lyra,
      Lo primero es lo primero ¡Bienvenida!
      Si te parece vamos primero a resolver el tema del botón de Pinterest. Tu blog es muy visual y creo que te viene como anillo al dedo.

      He visto tu blog pero no he visto el botón de Pinterest asociado a cada entrada como lo tengo yo.

      También me preguntabas por el resto de los botones de Twitter, Facebook. Fíjate al pie de esta entrada en color rojo tienes un enlace hasta cada uno de los tutoriales.

      Tremendo blog el tuyo...y gran trabajo el que haces alli. ¡Felicidades!

      Espero tu comentario.

      Jesús González

      Eliminar
    4. Hola Jesús!!!
      Muchas gracias por tu bonitas palabras hacia mi Blog y por tu calurosa bienvenida.
      Te cuento, quité el botón porque no me funcionaba tal y como te dije, pero lo pongo ahora mismo para que compruebes lo que te digo.
      Un saludo!!!
      Lyra

      Eliminar
    5. Hola nuevamente Lyra,

      Gracias por poner el botón, efectivamente algo no va bien y como bien decias también pasa con el botón de Pinear. Puede estar provocado por varias razones...pero no te diria que esa cabecera que tienes en el blog con un elemento FLASH podría ser el elemento que está entorpeciendo el proceso. Muchas veces lo que se intenta es proteger en esta caso al servicio Pinterest. Puede que ese elemento se vea como una posible "amenaza"

      Prueba esto. Mira tu blog usando las vistas dinámicas y trata de hacer un Pin con el botón que tienes en tus marcadores para que veas que el comportamiento es totalmente correcto.

      Seguimos conversando...

      Un fuerte abrazo y a la espera de lo que me digas

      Jesús González

      Eliminar
    6. ehehe.. este es el enlace para que lo veas con las vistas dinámicas: http://lascositasdelyra.blogspot.com.es/view/sidebar

      Eliminar
    7. Tienes razón, lo acabo de mirar y si que se puede desde las vistas dinámicas ... Entonces, qué me aconsejas, quitar la cabecera??? ... si es así, a cuál te refieres a la del cubo o a la otra??? ... La del cubo me daría mucha pena, porque forma parte de mi Blog desde el primer día ... :-(

      Gracias!!!
      Lyra

      Eliminar
    8. Uff esa decisión debes tomarla tu. Además tampoco estoy 100% seguro que sea ese elemento. Lo que puedes hacer es ir a la vista diseño y arrastrar esos dos gadget con el flash hasta el pie del blog temporalmente y comprobar si puedes hacer el pin. Con el fin de ir descartando cosas. En función de como te salga la prueba ya miras ¿vale?

      Eliminar
    9. He quitado los dos y sigo teniendo el mismo problema ... :-(
      Puedes comprobarlo???
      Gracias!!!

      Eliminar
    10. Bueno descartado..no es eso.

      He visto que en tu código HTML tienes una función JavaScript de Bloquear...al comienzo del blog. Yo probaría (con copia de seguridad de la plantilla previamente) a quitar esta función y volver a probar. Si sigues con el problema lo más que puedo compromenterme es revisar la plantilla pero tendrías que hacermela llegar por email. Si te parece seguimos conversando por email, cumplimenta el formulario de contacto y deja tu email. ¿te parece?

      Eliminar
    11. Hola Jesús!!!
      Pues yo sigo teniendo el mismo problema ... :-(
      Saludos!!!
      Lyra

      Eliminar
  20. Respuestas
    1. Muchas gracias Cassandra...te ha quedado genial además de que tu blog me ha encantado...todo el protagonismo lo tiene las fotos y aunque parece lógico por el tipo de blog que tienes, no es fácil lograrlo.

      Un fuerte abrazo

      Jesús González

      Eliminar
  21. Hola Jesús,

    No sabes la falta que nos hacía tener el botón en nuestro blog, ví otros tutoriales, pero eran mucho más complejos.

    Muchas gracias por compartir, un abrazo.

    Elena

    ResponderEliminar
    Respuestas
    1. Genial, muchas gracias Telas Cajas y Tinajas por compartir tu comentario.

      Ahora te sigo a través de Pinterest, me ha encantado tu blog ¡Felicidades!

      Jesús González

      Eliminar
  22. muchisimas gracias!!! es el único blog que me ha dado una solución a la primera y sin fallos.

    http://worldofweicrafts.blogspot.com.es/

    ResponderEliminar
  23. Pero qué grande eres leche!! ME DECLARO FAN DE TUS TUTORIALES!!
    De hecho ya he puesto referencias a tu blog en el mío. Y gracias a ti me enteré del curso para bloggers al que he asistido hoy en Barcelona. un 10! He aprendido mucho más de lo que esperaba

    Mil millones de gracias por acercarnos temas como este.
    Marta
    2ndfunniestthing.blogspot.com

    ResponderEliminar
    Respuestas
    1. jajaja Marta!,
      Muchas gracias y que buena información sobre el curso de Barcelona. Me alegra saber que te ha gustado.

      Te sigo a través de Pinterest,

      Seguimos en contacto,
      Un abrazo
      Jesús González

      Eliminar
  24. Estupendo, facil y comprensible, gracias por el tema.

    ResponderEliminar
    Respuestas
    1. Muuuchas gracias Mareta!,

      Seguimos en contacto
      Jesús González

      Eliminar
  25. Cómo siempre genial!!!! muchas gracias por tus sabias enseñanzas :D

    ResponderEliminar
    Respuestas
    1. Mil gracias miniña por tu comentario
      Seguimos hablando.
      Jesús González

      Eliminar
  26. ¡Gracias por el tutorial! Por fin tengo el botón Pinterest en mi blog (elblogdelovelylulu.com.es), gracias a este artículo. Un saludo

    ResponderEliminar
    Respuestas
    1. Genial Lucía!...muchas gracias por tu comentario

      Te recomiendo veas este otro artículo

      Un fuerte abrazo
      Jesús González

      Eliminar
  27. Muchas gracias por compartir toda esta información, acabo de dar con tu blog y me parece muy útil para personas que como yo, estamos empezando en este mundo (llevo sólo una semanita, pero con mucha ilusión). Mañana mismo lo llevaré a cabo, ya que ahora estoy desde el móvil
    Un saludo.
    haliadecoracion.blogspot.com

    ResponderEliminar
  28. ¡Genial! Acabo de insertar el botón en mi blog, lo único es que a mí no me sale el contador al lado del botón ¡Un abrazo!

    ResponderEliminar
    Respuestas
    1. Ya he visto que lo tienes controlado. Supongo que vistes el apartado de cómo alinear estos botones.

      Tengo que mejorar estos tutoriales un poquito más para que queden perfectos

      Como siempre, muchas gracias Pauline

      Jesús González

      Eliminar
  29. Gracias gracias gracias! funciona a la perfección!!!

    http://olvidomadrid.blogspot.co.uk

    ResponderEliminar
    Respuestas
    1. Muchas gracias por el comentario y por compartir tu blog.
      Te sigo a través e Twitter....tu blog me ha encantado

      Jesús González

      Eliminar
  30. Hola, he hecho varios intentos de poner el botón de pinterest en mi blog y no hay manera... me podrías ayudar? Dime qué información necesitas saber, gracias!!

    ResponderEliminar
    Respuestas
    1. Hola The clothier of Violeta,

      Estas usando una plantilla dinámica y hace poco Blogger ya permite la edición del código HTML. Esto es novedoso y no lo he probado. ¿En qué punto del tutorial no consigues avanzar?...de todas formas voy a tratar un ejemplo utilizando una plantilla dinámica como la tuya.

      Ya me dices algo, ¿vale?

      Bienvenida,

      Jesús González

      Eliminar
    2. Hola Jesús, muchas gracias por tu respuesta! Yo he seguí los pasos tal y como los detallas arriba, el problema es que uso una plantilla distinta? No soy nada experta en lenguaje informático, así que sólo puedo decirte que inserté varias veces el "código" justo debajo de lo caracteres que dices en tu explicación pero aún así no he logrado poner el botoncito... gracias!!!

      Eliminar
    3. Hola Jesús, muchas gracias por tu respuesta! Yo he seguí los pasos tal y como los detallas arriba, el problema es que uso una plantilla distinta? No soy nada experta en lenguaje informático, así que sólo puedo decirte que inserté varias veces el "código" justo debajo de lo caracteres que dices en tu explicación pero aún así no he logrado poner el botoncito... gracias!!!

      Eliminar
    4. Hola Jesús, muchas gracias por contestar! Lo único que puedo decirte es que me limité a seguir los pasos que indicas más arriba, entrando en edición HTML o algo así y pegando el código donde indicaste. No entiendo mucho la jerga informática, pero intuyo que mi plantilla no se debe modificar así, no? Muchas gracias!!

      Eliminar
    5. Hola de nuevo Jesús, tengo otro blog: http://theprettiesthandmadecompany.blogspot.com.es con formato sencillo y he conseguido poner RAPIDÍSIMO el botón de pinterest, así que ya veo que el problema es que tengo "vista dinámica", como me interesa para ponerlo difundir con mayor facilidad (ya que estoy empezando), cambiaré la vista y si más adelante me animo probaré a seguir las nuevas instrucciones que colgarás. Mil gracias!! Si aún así no lo logro, te digo!!! :)

      Eliminar
    6. Hola de nuevo Jesús, tengo otro blog: http://theprettiesthandmadecompany.blogspot.com.es con formato sencillo y he conseguido poner RAPIDÍSIMO el botón de pinterest, así que ya veo que el problema es que tengo "vista dinámica", como me interesa para ponerlo difundir con mayor facilidad (ya que estoy empezando), cambiaré la vista y si más adelante me animo probaré a seguir las nuevas instrucciones que colgarás. Mil gracias!! Si aún así no lo logro, te digo!!! :)

      Eliminar
  31. Hola Jesús,

    Muchas, muchas, muchísimas gracias. Ya puedo "pinear" las imágenes de mi blog. Lo has explicado perfectamente. NO tengo ni idea de plantillas, códigos HTML...me suena a chino. Parecía una operación, se podía mascar la tensión en el ambiente, corta, pega... y yo pensando me voy a cargar el trabajo de una semana... pero no, ha funcionado. Muchas gracias de nuevo, por esta nueva herramienta de la que pienso abusar.

    Carolina Mesas

    ResponderEliminar
    Respuestas
    1. Muchismias gracias Carolina,

      He visto tu blog, he probado el botón y todo perfecto.
      Te he dejado un comentario.

      Gracias por la visita y seguimos conversando ¿te parece?

      Jesús González

      Eliminar
  32. hola que tal Jesus Gonzalez,
    soy Kader, gracias por tu blog, es muy interesante.
    estoy aprendiendo mucho. por cierto, acabo de soltar
    el pajarito de twitter, y esta volando por todos los posts.
    iniciablog es muy bueno.
    lo mio es: kon k d kader
    gracias.

    ResponderEliminar
    Respuestas
    1. Perfecto Kader!...aquí todos estamos aprendiendo y para mi es un placer contar con tu opinión y comentarios.

      Bienvenido!

      Jesñus González

      Eliminar
    2. gracias Jesus... iniciablog me esta ayudando mucho.
      ¿en qué post puedo encontrar info sobre como enlazar una entrada con otra en mi blog? este boton de saltar de un post a otro.
      ya he podido colocar el boton g+ en cada post.
      muchas gracias
      saludos.

      Eliminar
    3. A qué te refieres Kader a las entradas relacionadas.

      Eliminar
  33. Hola, muchas gracias por este tutorial, está muy bien explicado.
    Solo una pregunta, he conseguido colocar el botón correctamente pero al pinear un post me aparecen, además de las fotos que tiene mi post, otras muchas fotos de otras entradas.
    ¿Por qué podrá ser?
    el blog es: http://detijerarapida.blogspot.com.es/
    Gracias y un saludo!

    ResponderEliminar
    Respuestas
    1. Hola de Tijera Rápida,

      Llevas toda la razón. Eso pasa si haces pin desde la vista inicial de tu blog, sin embargo si entras en la entrada y haces pin solo te salen las fotos de esa entrada en particular. Esta sería la forma más correcta de pinear.

      Tengo que felicitarte por tu blog, la verdad es que está genial. Muchas gracias por compartirlo.

      Seguimos conversando,

      Jesús González

      Eliminar
    2. Efectivamente Jesús, es tal y como dices, no me había dado cuenta. Gracias por la aclaración.
      Por cierto, una de mis fotos acaba de ser repineada!!! que ilusión!!
      Un saludo

      Eliminar
  34. Súper! Pero sale sin counter!

    ResponderEliminar
    Respuestas
    1. Muchas gracias por comentarlo

      Es curioso ya que yo tengo el mismo código, he revisado tu blog y la verdad es que no veo nada extraño. Seguiré investigando un poco más a ver si doy con lo que le pasas.


      Jesús González

      Eliminar
  35. ¿Por qué después de añadir el botón tal como has descrito fantásticamente no me hace ni puñetero caso? Le doy y no se abre nada.

    ResponderEliminar
    Respuestas
    1. jejeje...qué rabia da eso verdad que si.

      He revisado tu blog y ya veo que lo tienes, supongo que al final lo pudiste resolver.

      Gracias por comentarlo y siento no haberte podido responder antes.

      Eliminar
  36. Amigo eres un genio!!!!!! Seguí tus instrucciones y mejor no me pudo quedar. Ya lo probé y es excelente. Desde ahora me hago tu seguidora incondicional Jejeje
    Muchísimas gracias por la información

    ResponderEliminar
    Respuestas
    1. Pues sabes qué, que también yo te sigo.

      Te he dejado un comentario en tu blog. Muchas gracias por el tuyo y me alegra saber que te ha funcioando.

      Jesús González

      Eliminar
  37. Me ha encantado!!! Súper útil, muy bien explicado, algo complicado lo has hecho súper sencillo te sigo desde ya!!!

    ResponderEliminar
    Respuestas
    1. Gracias Carita Bonita,

      Te invito a que compartas tu blog con nosotros he querido seguirte a través de Pinterest y no he podido.

      Jesús González

      Eliminar
  38. Hola y gracias, ya tengo mi botón para pinteretear.

    ResponderEliminar
  39. Hola Jesús!
    Muchas gracias por el tuto, viene muy bien ahora que me estoy metiendo en el mundo Pinterest.

    Ya he puesto el botón, pero me no me queda junto con los otros botones, me queda arriba. Supongo que alineándolos se arregla, pero el problema es que no tengo ni idea de cuáles son los códigos para los otros botones que tengo. El HTML este es como chino para mi.

    Pero bueno, aunque quede arriba no está mal.

    Muchas gracias por todo!, un saludo!

    ResponderEliminar
  40. Muchas gracias, Jesús. Nos hemos atrevido a colocar el botón de pinear, pero alinearlo ya para otro día...¡Qué informaciones más útiles contiene tu blog! Estoy empezando y mi mujer y yo nos apoyamos mucho en tus explicaciones.
    Saludos,
    Alberto.

    ResponderEliminar
    Respuestas
    1. Wow!

      Muchísimas gracias Alberto, de eso se trata probar, no pasa nada y poco a poco vamos mejorando y entre todos vamos aprendiendo. Me alegra saber que has podido aplicar este tutorial.

      Gracias por tu comentario,
      seguimos conversando,

      Jesús González

      Eliminar
  41. Muchas gracias,con tus explicaciones del paso a paso me ha sido super facil poner boton,muchas gracias!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Elena y bienvenida, creo que es la primera vez que comentas en el blog. Seguimos hablando ¿te parece?. Te invito a que veas el índice de contenidos www.iniciablog.com/contenidos
      para que puedas ver todos los temas que tengo publicados.

      Jesús González

      Eliminar
  42. Gracias, pero algo estoy haciendo mal, porque no funciona!!
    He puesto el botón sin ningún problema (muy bien explicado, por cierto), pero al pinchar en él no me muestra la foto, y aunque sí me deja darle a Pinear luego si la busco en Pinterest me doy cuenta que no lo ha hecho.
    El blog es www.metienestarta.blogspot.com me puedes ayudar?
    Mil gracias

    ResponderEliminar
    Respuestas
    1. lo estoy probando ahora mismo y está ok
      Cuando hagas pin entra en la entrada, pulsa el botón y debes ver todas las fotos del post.
      Por ejemplo haz clic en este enlace y luego presiona el botón Galletas

      a la espera de lo que me comentes nuevamente,

      Jesús González

      Eliminar
    2. De todas formas, si es posible dime qué puedo tener yo mal configurado para que no me deje ver las fotos ni escoger ninguna. Gracias!!

      Eliminar
    3. Me tienes tarta, voy a mirar que pasa, efectivamente algo no va bien. Muchas gracias por comentarlo y te vuelvo a avisar.

      Eliminar
  43. Gracias Jesús, me tranquiliza que me digas que funciona. Está claro que sea lo que sea es cosa de mi ordenador.

    ResponderEliminar
    Respuestas
    1. A mi me pasa exactamente lo mismo. Al intentar pinear, no me salen las fotos de la entrada para escoger una. Aún asi, le doy a pinear pero no pinea nada.
      :-(

      Eliminar
    2. Wow!, llevas razón En La Gloria,

      Acabo de volver a probarlo y me hace lo mismo. Qué cosa más curiosa. ¡En fin! pudo haber cambiado algo en Pinterest que provoque que este código no esté funcionando de manera correcta.

      Miraré qué pasa y vuelvo a comentar.

      Muchas gracias!

      Jesús González

      Eliminar
  44. Buenas! Hace tiempo implementé el Pinterest en mis posts, junto con la pila de otros servicios. Cuando lo hice, al pulsar el botón Pin lo que hacía era superponerse una rejilla con todas las imágenes de la página, para elegir una, que era la que luego se podía repinear. Pero ahora que he vuelto (lo he tenido unos meses abandonado), veo que ya no sale esa rejilla, sino solamente el popup para pinear una imagen... pero sin imagen :(
    Alguna idea?
    Saludos y gracias!

    ResponderEliminar
  45. Hola Jago, Me tienes Tarta y En La Gloria,

    Les comunico que acabo de volver a actualizar el código para el botón de Pinterest. El problema de no mostrar la imagen del post fue debido a que en el servicio Pinterest, ha habido un cambio en los parámetros del botón y esto provocaba el código anterior dejara de funcionar.

    Si ya tenias el botón anterior, solo tienes que reemplazar el código anterior por el nuevo que está en esta misma post. El procedimiento es exactamente igual.

    Sería muy importante que me confirmen a través de nuevos comentarios que el problema de que no mostraba la imagen a pinear está resuelto.

    Yo lo acabo de aplicar en iniciaBlog.com y va bien.

    Jesús González

    ResponderEliminar
    Respuestas
    1. Hola Jesús, yo tenía el mismo problema. He sustituido el codigo anterior por el nuevo y ahora directamente no aparece el boton... :S

      Eliminar
    2. upss!, qué cosa más rara, ehi pero si que lo veo. Esta al pie del post, lo veo, lo veo ¿?

      Floren coméntame si lo has resuelto...yo lo veo jejeje.

      Jesús

      Eliminar
    3. Hola!! Sí, lo ves porque volví a restaurar la antigua plantilla :) He vuelto a sustituirlo por el nuevo, verás como ahora no lo ves! :)

      Quiero darte las gracias porque imagino el curro que has de tener con todas nuestras consultas y aun así respondes a todos con una sonrisa!! (al menos eso imagino por tus comentarios). De verdad GRACIAS!!!

      Eliminar
    4. Hola Floren
      Gracias por volver a comentar, es complicado seguir todos los casos por eso me alegra que vuelvas a comentar. Voy por 4.000 comentarios nada más y nada menos en menos de dos años con el blog.

      Bueno, si que aparece! pero no en la vista inicial de tu blog sino cuando entras en el post completo.
      Por ejemplo mira este post tuyo

      No entiendo el motivo por el cual no te sale en la vista inicial ya que lo tienes en la misma sección que los otros.

      Si pudieras ponerlo como el primero de los botones a ver qué pasa.

      Seguimos hablando.

      Jesús

      Eliminar
  46. GRACIAS!!! GRACIAS!!!! GRACIAS!!!!!!
    no sabes mi emoción!!!!!!!
    estoy empezando el blog pero creo que con buen pie!!!
    te recomendaría que lo revises la semana que viene porque estoy preparando las entradas de inicio..
    un millón de gracias!!!!!!

    PD: http://pajaritoengrama.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Jennyasecas,
      como vez he esperado algo más, que chulada tu blog... Me gusta, la primera impresión ha sido muy buena. Felicidades, ya te dejaré un comentario en el mismo.

      abrazos,
      Jesús.

      Eliminar
  47. Hola Jesús.
    Mi nombre es Camila, y hace poquito que descubrí este rinconcito a donde recurro cada vez que quiero agregar un botón, o ver si hay algún tipo de solución a mi problema, al igual que todos los demás, a causa de que decidí comenzar un blog.
    Primero, quería agradecerte debidamente por las demás cosas que he leído de aquí y no he tenido tiempo de comentar y agradecer, porque te podrás imaginar que con las ganas de ver como quedan las cosas en mi blog... jajaj tú me entenderás. En fin, soy nueva en esto, pero de todas maneras me llevo bastante bien con todo esto de la plantilla y demás, por ahora iba "solita" (tutorial por aquí, tutorial por allá, pero sin preguntas personales). Resulta que el botoncito no quiere aparecer...
    Pego el código por acá, pego el código por allá... y nada. NO APARECE. Jajajja así que decidí recurrir a gente que sabe del tema.
    Bueno, espero que me sepas ayudar. Disculpa por no darte más detalles es que es simplemente eso, como verás, los botones de Facebook, Twitter y G+ los tengo, me falta ese.
    Ah, por cierto, muy bueno lo de alinear los botones, cuando lo consiga lo pondré en práctica.
    Te invito a visitar mi blog: http://camilaguerrafotografia.blogspot.com/
    Espero tu respuesta.
    Saludos, muchas gracias y felicidades por el blog.

    ResponderEliminar
    Respuestas
    1. Hola Jesús. Jaja, yo de nuevo. Como no era de esperar... el error fue mio... yo le daba al "Vista previa" y al principio me lanzaba un error... Bad request, y luego cambié de explorador y se me abrió la vista previa, pero no se mostraba el botón...
      Cuando puse los demás botones me aparecían allí, pero resulta que se me dió por poner "Guardar blog", y entré a una entrada ¡y allí estaba! me funciona y todo, pero lo único que no me gusta es que no se vea en la Página principal, es decir, sin tener que entrar a la entrada y lo segundo (que en realidad es lo que más me molesta y escribo para preguntarte si existe alguna solución) es que se vea abajo de los demás, es decir, no en línea recta todos juntos...
      Yo, además, lo veo todo demasiado separado... mirá el botón de Pin it y abajo las etiquetas... mmm... no me convence.
      Me gustaría colocarlo junto al "Me gusta" de Facebook... pero bueno, tú dirás.
      Ah, por cierto, intenté hacer eso de alinearlos... pero no pude, no me aparecían alineados. Me serviría mucho que pasaras por mi blog para ver de lo que hablo. http://camilaguerrafotografia.blogspot.com/
      ¡Perdón por escribir tanto! ajajjaja.
      Ah, luego... si tienes tiempo (no es algo de vida o muerte) pero si te das cuenta, mi menú tiene un detallecito... sigue aunque no tenga botón jajajaj, ¿se puede arreglar?
      Muchísimas gracias desde ya y disculpa las molestias ajjaja, pero te puedo confirmar que el nuevo botón sí funciona.
      Saludos, y te agradezco por la gran ayuda que nos das a todos con este blog y tus respuestas.

      Eliminar
    2. Hola Camilia,

      Wow! menudo gran comentario. Muchas gracias por los dos, me alegro que finalmente tu misma lo resolvieras. Estoy mirando en estos momentos tu blog, a penas tengo tiempo ya esta noche, pero mañana te dejo un comentario.

      Por cierto F E L I C I D A D E S! por tu blog

      Jesús Gónzález

      Eliminar
    3. Hola Jesús, seguro que te asustaste de mi comentario, porque aún no he recibido tu respuesta jajaj, ¡ayudaaaaaaaaa!
      Gracias y disculpa las molestias. ¡Gracias y felicidades por tu blog!

      Eliminar
    4. ¿qué nos está pasando Camila? algo falla en nuestra comunicación. Pensé que había quedado resuelto, miro tu blog, jejeje.

      Eliminar
  48. Un saludo Jesús al estilo tinerfeño EH! ¿qué pasó?,
    Hoy me he preocupado del dichoso botón de Pinterest y ya lo he cambiado por tu nueva actualización que funciona perfectamente.
    Mi consulta es que a pesar de el div style que mencionas para la alineación no soy capaz de poner los botones (FB, TW, G+ y PIN) en el mismo "nivel" como estaban con el anterior código, (ahora Pinterest se me queda "descolgado". ¿dónde está el error?.
    (OJO lo tengo implementado en el blog Décimas Espinelas y Poemas, al cual se puede acceder desde mi perfil G+ y así evitamos el spam).
    Agradezco de antemano tu atención y te PEGO el HTML que he utilizado para tener los 4 BOTONES JUNTOS.(El de pinterest solo se ve en entradas individuales).

    <center>
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:auto; width:100px; height:21px'/>
    <a class='twitter-share-button' data-count='horizontal' data-lang='es' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
    <g:plusone expr:href='data:post.url' size='medium'/>
    <!-- Botón de Pinterest por cortesía de iniciaBlog.com y BloggerSentral.com-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
    <span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
    <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
    </b:if>
    </center>

    <div class='post-footer-line post-footer-line-1'>

    ResponderEliminar
    Respuestas
    1. Hola Gabriel,

      Si te parece lo conversamos via email, de esta manera puedo facilitarte el código mio. Por favor cumplimenta el formulario de contacto, estaré pendiente y te respondo a la cuenta que me indiques.

      Muchas gracias por pasarte por aquí y dejar tu comentario,

      Jesús

      Eliminar
    2. Buenos días Jesús, por arte de "magia" porque no he tocado nada, hoy el botón de pinterest ha aparecido muy bien alineado.
      Gracias por tu atención.

      Eliminar
    3. Vaya!, perfecto, magia magia no creo pero lo importante es que lo has logrado!

      Jesús.

      Eliminar
  49. Hola Jesús soy un desastre no he logrado poner el boton. Lo lamento Gracias por la ayuda que brindas.

    ResponderEliminar
    Respuestas
    1. Que no Susana...que no..

      Dime donde te has quedado, has podido completarlo. La otra cosa que me hace falta es que me digas la dirección de tu blog para verlo y ayudarte dentro de mis posibilidad.

      Gracias por comentar,
      Jesús.

      Eliminar
  50. Hola Jesús, he actualizado el código pero ahora no aparece en la vista principal del blog, sólo cuando abro una entrada.
    ¿Habré hecho algo mal?

    Mi blog: http://detijerarapida.blogspot.com.es/

    Gracias!!

    ResponderEliminar
    Respuestas
    1. llevas razón y además coincide con la respuesta que le di a otro lector. Déjame revisar a ver qué pasa, lo pondré en el mio en la vista inicial. Ya te comentaré algo más.

      Eliminar
  51. Hola! lo probé varias veces pero no me sale, que estaré haciendo mal?
    Saludos!

    ResponderEliminar
    Respuestas
    1. Voy a tratar de localizar otro código, se ve que este está dando demasiados problemas. Déjame volver a estudiar el tema y te vuelvo a comentar.

      Aprovecho para desarte unas felices fiestas,

      Jesús González

      Eliminar
    2. Gracias por la respuesta! sabés que cuando veo el post en modo Vista Previa si se ve el botón, pero cuando lo publico no.
      Felices fiestas!

      Eliminar
  52. Recién entre al blog y si estaba el botón, volví a entrar y se había ido, debe ser problema de blogger entonces!

    ResponderEliminar
    Respuestas
    1. Gracias por avisarme,
      Acabo de dejarte un comentario en tu blog.
      Un fuerte abrazo y feliz 2013!
      Jesús

      Eliminar
  53. Hola Jesús!
    Muchas gracias por este post!, he tratado de poner el botón en mi nuevo blog pero no aparece, espero puedas ayudarme.

    http://claudellcraftsdesigns.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Claudia,
      Acabo de volver a actualizar el código que ofrezco en este tutorial. Puedes por favor volver a intentarlo.

      Gracias y disculpas las molestias.

      Jesús

      Eliminar
  54. Hola Jesús.
    He seguido los pasos que explicas, y me sale el botón, pero no me recoge ninguna imagen, y sí tengo fotografías en el post. ¿Cómo puedo solucionarlo?
    Muchas gracias de antemano.
    Saludos y felices fiestas!!
    Aurora.

    http://pasionxlafotografia.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Hola Aurora
      Lo he probado, veo el botón cuando visualizo tu post completo y si que me pone la lista de imágenes que contiene tu artículo. De todas formas comentarte que lo acabo de actualizar...Puedes probar con el nuevo código para ver si te va mejor.

      Eliminar
  55. Hola Jesús, gracias por la ayuda!
    He intentado hacer el cambio, poniendo el nuevo código pero me sale un error y no me deja ni previsualizar, ni guardar cambios.
    Dice que es por la linea: #pin-wrapper > a {background-image:none !important;}
    Que cosa más rara...
    Un saludo y mil gracias por la ayuda.

    ResponderEliminar
  56. Hola Jose,
    Felicitaciones por tu blog, he empezado un blog desde hace 3 meses y estoy aprendiendo mucho, ayer descubrí el pinterest y lo quise añadir a mi blog siguiendo tus instrucciones pero me sale un error y no puedo hacerlo

    Error al analizar XML, línea 1567, columna 52: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    Solo me sale cuando añado el texto que especificas, me puedes dar algún consejo please?
    Mil gracias

    ResponderEliminar
  57. perdona no te he puesto blog ;) http://elrincondealma.blogspot.com.es/

    ResponderEliminar
  58. Hola,gracias por el post,he intentado poner el código pero no me sale el boton,no se que es lo que hago mal porque me dice que la plantilla no está bien formada,lo he intentado varias veces y nada :(
    gracias!

    ResponderEliminar
  59. Buenas tardes Jose!
    Muchas gracias por ayudarnos con esto! Al igual que en el comentario anterior de "El Rincón de alma" tengo el mismo problema:

    Error al analizar XML, línea 1567, columna 52: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    Te agradecería un montón que pudieses ayudarme.
    Muuchas gracias por adelantado!

    http://blog.giuliayminot.es/

    ResponderEliminar
  60. Me pasa lo mismo que al (la) amig@ de aqui arriba!!

    ResponderEliminar
  61. Hola Isabella, Giulia y Erika.

    Les pido disculpas por los problemas que están teniendo con este botón. He estado bastante complicado estos últimos días así que es una tarea que tengo pendiente.

    Le daré la máxima prioridad a este tema.

    Un abrazo,
    Jesús González

    ResponderEliminar
  62. Hola! yo tengo el mismo problema, me tira error cuando trato de guardar los cambios :(

    ResponderEliminar
  63. Jesús, hola!

    He intentado ponerlo pero indudablemente algo estoy haciendo mal porque me da un error. Abajo me ha arrojado la leyenda: Error al analizar XML, línea 1245, columna 52: Element type "a" must be followed by either attribute specifications, ">" or "/>".
    Podrías decirme en dónde me equivoqué?
    Gracias!!

    ResponderEliminar
    Respuestas
    1. Por si te sirve a mi me pasa exactamente lo mismo.

      Eliminar
    2. Sonia copia el código de pinterest del comenario de Javier Bárcena (11/12/12) y te desaparecerá Error al analizar XML......
      Copia desde y verás como lo admite.

      Eliminar
  64. Gracias por la explicación!

    ResponderEliminar
  65. Hola Jesús, verás hace tiempo que puse el botón de pinterest y me funcionaba bien, pero ahora no sé qué pasa que cuando le das al botón no reconoce ni sale ninguna imagen. Un abrazo!

    ResponderEliminar
    Respuestas
    1. Por favor vuelve a poner el código, lo he actualizado.

      Eliminar
  66. Hola, me ha encantado tu blog, es mas, he encontrado muchas utilidades que estoy poniendo en practica, pero en este caso me sale un error y lo he intentado con todas las variantes que has puesto. En concreto me dice lo siguiente:
    Error al analizar XML, línea 1678, columna 52: Element type "a" must be followed by either attribute specifications, ">" or "/>".
    Muchas gracias por tu ayuda.
    Saludos

    ResponderEliminar
  67. A mí también me da un error y no me deja guardar la configuración. He de decirte que me encanta tu blog y me ha ayudado en algunas cosas para poner mi blog a punto. Besos

    ResponderEliminar
  68. Hola!

    Creo que has hecho que una cosa muy complicada parezca simple para los que no entendemos de porgramación. pero me aparece simepre el mismo error y no me deja guardar la plantilla.

    Error al analizar XML, línea 1248, columna 52: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    ResponderEliminar
  69. Hola !!
    bueno por lo que veo andamos todos igual con el error a vueltas.mi pregunta es la siguiente :cuando tengo que poner al pie del post el punto 6 te refieres a hacerlo en la pagina cuando la estoy editando????
    soy suuuuper novata en eso pero a pesar de todo he conseguido abrir 2 blogs .todo un acontecimiento !!
    gracias por alumbrarnos el camino !!

    ResponderEliminar
  70. He intentado poner el boton de pinear en mi blog pero no lo he conseguido, tras el paso 7 al dar a guardar cambios me pone esto Error al analizar XML, línea 1127, columna 52: Element type "a" must be followed by either attribute specifications, ">" or "/>".
    Que es lo que he hecho mal?
    Gracias

    ResponderEliminar
  71. Hola. A ver si puedes ayudarme cuando pongo el codigo que indicas me da error y me pone esto:

    Error al analizar XML, línea 798, columna 52: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    ResponderEliminar
    Respuestas
    1. Hola Susi.a
      He vuelto a actualizar el código, por favor vuelve a intentarlo. Gracias y disculpa las molestias

      Eliminar
  72. Hola a todos,
    Gracias por avisar, efectivamente el botón no estaba funcionando correctamente, lo he vuelto a actualizar. Disculpar mi demora en responder y espero que ahora el código esté más estable.

    Un fuerte abrazo a todos
    Jesús González

    ResponderEliminar

Te agradezco la participación en iniciaBlog a través tu comentario. Recuerda que te responderé con otro comentario justo debajo del tuyo. Gracias y mucha suerte! ;-)

¿Cómo poner el botón de...:?

Premio Bitácoras

Aviso Legal

Licencia Creative Commons
iniciaBlog - Te ayuda con Blogger a mejorar tu blog
iniciaBlog se encuentra bajo una Licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
Basada en una obra en www.iniciablog.com.

Creado por Jesús Manuel González Fuentes

Política de Privacidad de iniciaBlog | Política de Cookies
2023 © Jesús Manuel González Fuentes es el autor de iniciaBlog.com
Tema creado por Way2themes y adaptado por inciciablog