11 abr. 2011

¿Cómo incluir un botón de imprimir en cada entrada del blog?



Según en qué tipo de blogs puede tener mucho sentido un botón de imprimir asociado a cada entrada. Imagínate un blog de recetas de cocina o un blog de manualidades. A parte de imprimir también podremos descargar el post en PDF.

De todos los servicios evaluados te recomiendo PrintFriendly (haz clic para ver el botón de impresión estándar del servicio). Puedes personalizar el botón y obtienes un código para Web, Blogger y WordPress. Una vez puesto, al hacer clic se abre una nueva ventana de PrintFriendly como si de una vista previa se tratara. El usuario puede elegir entre imprimir, exportar a PDF o enviar por email. Puedes incluso quitar texto. También te explican como ponerlo en el blog (paso 7 en adelante en este tutorial).

Una vez visto, si el resultado es el que esperas ya has terminado. Si por el contrario quieres mejorar el código o personalizar el icono con otro gráfico sigue leyendo.

Pasos para mejorar el código de PrintFriendly y agregar un icono personalizado

  1. Conseguir el icono de impresión. Te recomiendo el servicio www.iconfinder.net
  2. Elige bien el tamaño del icono, el que yo seleccione es de 24px*24px
  3. Descarga en formato PNG hasta tu ordenador
  4. Ahora debemos alojar el PNG. Te recomiendo Google Sites (ya lo vimos cuando hablamos de los iconos sociales en el blog),  el cual te permite crear un sitio web y también alojar archivos para luego acceder a ellos desde el blog, sigue estos pasos:
      • Entra en Google Sites 
      • Abre tu sitio o crear uno nuevo (recuerda que el sitio que tengas debe ser público)
      • Ve a la opción Administrar Sitio desde el que podrás subir archivos adjuntos.
      • Sube el icono de impresión que has elegido.


  5. Ahora fíjate en el código HTML Mejorado de PrintFriendly (un simple enlace):
  6. <a expr:href='&quot;http://www.printfriendly.com/print?url=&quot; + data:post.canonicalUrl' target='_blank'><img alt='Imprimir o exportar PDF' src='https://sites.google.com/site/iniciablog/PDF24.png'/> </a>
             En lo seleccionado en rojo desde indicar la dirección url de tu sitio y el archivo PNG
        
  7. Copia el fragmento de HTML hasta un bloc de notas para personalizarlo.
  8. Cuando lo tengas, cópialo y ve a la Pestaña Plantilla y luego a Editor HTML
  9. Por seguridad haz una copia de la plantilla "Descargar plantilla completa".
  10. Busca <b:include data='post' name='shareButtons'/> (usa el buscador del navagador).
  11. Pega el código que copiaste justo debajo de la linea que has encontrado.
  12. Guarda la plantilla y visualiza el Blog. 

El mi caso el sentido que tiene este botón es que te sirva a ti y puedas aplicarlo con éxito. Deja tus comentarios. Gracias.

Extensión de PrintFriendly para Google Chrome

Si usas Google Chrome, quizás te interese valorar la extensión correspondiente a PrintFriendly para agregarla a tu navegador.


Actualizado el 08 de Enero de 2013

39 comentarios:

  1. Muchas gracias por esta información. La acabo de instalar en mi blog, y funciona.

    Saludos.

    ResponderEliminar
  2. Hola Yolanda,

    ¡Muuuchas gracias por tu comentario!. Han pasado varias semanas desde que publiqué esta entrada y pensé que nadie estaría interesado.
    He visto tu blog y me ha gustado mucho ¡felicidades!

    Te recomiendo valores tambien poner el botón de me gusta y el de twittear en cada entrada. Mira el indice de contenidos de iniciablog

    ResponderEliminar
  3. Hola iniciablog!!! Enhorabuena por el premio.
    Te escribo, porque no me reconoce el dibujo el Señor Blogger, cuando lo inserto en la plantilla. He escogido el tamaño de 24px, como tú, pero nada... ¿se te ocurre alguna solución? Muchas gracias!!!

    ResponderEliminar
  4. Hola trasteando,
    muy fácil, envíame el enlace hasta el gráfico que quieres insertar. Recuerda que si lo has subido hasta GoogleSite, éste debe ser público. Cuando lo subas hazlo al directorio raiz.

    Comentame

    ResponderEliminar
  5. He probado de instalar la impresora en mi blog pero no he podido. Los preparativos han ido bien, pero a la hora de buscar la frase: , el buscador no la ha encotrado. Me puedes ayudar?

    ResponderEliminar
  6. Hola Angels,

    Prueba con esta otra cadena.
    <div class='post-footer-line post-footer-line-1'

    Pega el código debajo. Esto se debe al tipo de plantilla que usa (mas antigua), por ello no encontraste el código anterior.

    Gracias por tu comentario,.

    Comentame si resolvistes, así como un link a tu blog para verlo.

    ResponderEliminar
  7. Hola, Me sabe mal, pero la máquina tampoco ha encontrado esta cadena. Te digo el blog: angels-eljardidelesfades.blogspot.com

    ResponderEliminar
  8. Hola Angels,

    No te preocupes que no paramos hasta no ver ese botón. Comentarte que he buscado la segunda cadena de codigo que te dí y si lo encuentro en el código fuente de tu blog.
    Haz una cosa, antes de buscar en Diseño>Editor de HTML haz clic en expandir plantilla de artilugios.
    y vuelve a buscar, toda la cadena o parte de ella. tiene que estar Angels, inténtalo y me dices.

    Suerte!

    ResponderEliminar
  9. Lo he conseguido!!
    Muchas gracias!!

    ResponderEliminar
  10. Bien!!!! que alegría Angels

    Ya lo he visto en tu blog

    ResponderEliminar
  11. Perfecta la explicacion, no sabia como hacerlo y va de maravilla.MUCHAS GRACIAS.

    ResponderEliminar
  12. Gracias Yeti por tu comentario.
    Un abrazo! oye que buena pinta "La cocina de paco"

    http://yeti-lacocinadepaco.blogspot.com/

    ResponderEliminar
  13. Lo he intentado mil veces y no lo consigo pero me guardo este pdf de tu entrada a ver si asi lo consigo esta vez. Desde el primer dia quiero tener este boton
    ¿Que significa expandir plantilla de artilugios?¿qué consecuencia trae?.

    ResponderEliminar
  14. Hola BeatriZ,
    Se me habia pasado tu comentario, disculpa. Lo has podido hacer?....puedo ayudarte?

    Coméntame..

    ResponderEliminar
  15. Como prueba lo coloque en 3 entradas de mi blog, pero al final lo que manda a imprimir es una receta en la que no esta instalado

    ResponderEliminar
  16. Hola Luis Mathieu,

    Podrías indicarme la dirección de tu blog para verlo y tratar de averiguar qué está pasando.

    Muuuchas gracias por tu comentario.
    Un saludo, Jesús

    ResponderEliminar
  17. Dios llevo toda la tarde y no entiendo nada.....esos códigos y tanto lio para poder imprimir, por favor explicalo para novatos!!!!!!

    ResponderEliminar
  18. En este rincón....

    si no lo has podido aplicar es porque no esta bien explicado...asi que tomo nota para hacer más sencilla la explicación. Vuelvo a avistarte cuando lo tenga actualizado...

    Muchas gracias por comentármelo.

    Un saludo, Jesús.

    ResponderEliminar
  19. hace 1 mes que tengo un blog (bueno, 2) y no tengo ni idea de informatica ni de artilugios ni de codigos fuente ni na, pero he conseguido poner la impresora en mi blog http://cucharitaytenedor.blogspot.com/
    gracias!!!

    ResponderEliminar
  20. Fantástico, me ha sido de mucha utilidad. Y creo que muy bien explicado. Gracias

    ResponderEliminar
    Respuestas
    1. Gracias, lo he visto en tu blog funciona a las mil maravillas. Gracias por el comentario.
      Jesús González

      Eliminar
  21. Gracias, tocayo, me han sido muy útiles tus consejos. Te seguiré visitando y recogiendo soluciones a las dudas que se van presentando, a medida que profundizo en la estructura del blog y sus artilugios en esta plataforma de Blogger.
    Un saludo afectuoso.

    ResponderEliminar
  22. Gracias,hay que seguir aprendiendo...:-))

    ResponderEliminar
  23. Genial, ahora puedo tener mis entradas en pdf y mis lectores también.
    Al igual que los demas botones, lo he insertado en la caja flotante y queda chulo, jeje
    Mil gracias Jesús
    Que haría yo sin este blog.
    Prometo escribir una entrada sobre el.
    Saludos

    ResponderEliminar
    Respuestas
    1. Gracias Jose Antonio, por tu visita y por el comentario!

      Me alegra mucho que lo tutoriales te estén sirviendo para tu blog.
      Un verdadero placer!

      Seguimos conversando, ok.

      Jesús González

      Eliminar
  24. Que bien queda! Muchas gracias por compartir tus magníficas ideas!
    Un saludo

    ResponderEliminar
    Respuestas
    1. Genial!

      Además tu blog está guapísimo, gracias por comentar y darme la oportunidad de verlo.

      Graciasp or comentar en esta entrada.

      Eliminar
  25. Hola, andaba buscando una manera de poner un botón de imprimir, para que imprima las entradas individualmente, porque el que tengo imprime todas las entradas seguidas y he intentado poner tu botón pero no hay forma, ¿me podrías explicar como lo hago en Wordpress.es?, no tengo ni idea. Perdona las molestias. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Mª Carmen,

      Realmente me pones en un aprieto con Wordpress ya que no lo conozco. Estoy fundamentalmente especializado en Blogger.

      Por favor revisa este enlace que te lleva a una especie de asistente donde puedes indicarle que tienes Wordpress y debe instalarlo automáticamente, es lo menos que puedo hacer.

      Muchas gracias por tu visita y por este estupendo comentario.

      Jesús González

      Eliminar
  26. Muchas gracias. Lo he instalado en mi blog y funciona perfectamente. Llevaba tiempo queriendo poner este recurso. Un saludo desde mi mejana

    ResponderEliminar
    Respuestas
    1. Perfecto Felipe!,

      He visto tu blog y he visto el botón. Efectivamente funciona perfectamente. Gracias por comentar y compartir tu blog con nosotros.

      Te sigo a través de Google+
      Jesús González

      Eliminar
  27. Hola, estoy intentado incorporar este boton a mi blog, pero me sale este mensaje "Error al analizar XML, línea 1247, columna 764: The content of elements must consist of well-formed character data or markup."
    SEguro q hago algo mal, pero no se en q momento y el q.
    Podrias echarme una mano, x favor?
    Un saludo y muchas gracias por currartelo tanto.

    ResponderEliminar
  28. Por cierto, el editor HTML, me sale en la pestaña de plantilla y no en la de diseño. Por lo demás, encuentro todos los pasos, inserto el codigo (q es enorme) y cuando guardo plantilla me sale el mensaje ese.
    Gracias de nuevo.

    ResponderEliminar
    Respuestas
    1. Hola Boga,

      Llevas razón la pestaña es la de "Plantilla" no la de diseño, acabo de actualizar el post.
      Con respecto al error me temo que hay algo mal en la url del archivo que estas copiando. Puedes darte la url del icono que le quieres poner y yo te digo donde está el problema.

      Gracias por comentar.

      Eliminar
  29. Hola Jesus, intento pegarte el codigo y me dice...
    "Su HTML no es aceptable: Etiqueta no permitida: SCRIPT"
    Así q no puedo copiartela.
    Los pasos q hago son:
    1. voy al enlace q tienes puesto de http://www.printfriendly.com/button
    2. marco lo deseado q es:
    Blogger/ icono segundo (impresora/Pdf encuadradas)/ Install Blogger Widget
    3. en el siguiente paso ya me da el codigo, pero ya no consigo pasar de aqui.
    :(
    Gracias por tu ayuda de antemano.
    Un saludo :)

    ResponderEliminar
  30. Ya he conseguido solucionarlo.
    Un saludo y gracias

    ResponderEliminar
  31. Lo acabo de añadir a mi blog y me he quedado alucinada de lo fácil que ha sido, sólo elegir las opciones de la impresora y listo, muchas gracias. Aquí sigo cotilleando por tu blog para ver que puedo mejorar en el mío teniendo en cuenta que no soy muy amiga de las nuevas tecnologías... jeje. Gracias a tu blog seguro que aprendo muchas más cosas. Por cierto,¿ por casualidad no tendrás algún tutorial de como mejorar las entradas en el blog con cuadros de separación?, por ejemplo, si hago una receta y quiero poner los ingredientes en una especie de cuadro y la elaboración en otro. No sé si me he explicado. Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Merce,
      Muchas gracias por tu comentario, no sabes lo mucho que me alegra que lo consiguieras.

      Con respecto a tu segunda pregunta, no tengo nada en iniciaBlog que pueda ayudarte en ese sentido. Si ves algún blog que lo tenga, escribe y vemos cómo lo ha hecho.

      Te recuerdo que también puedes presentar tu blog en Todo Blogger en Español, es una comunidad de usuario que he creado en Google+.

      Un abrazo

      Eliminar

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! ;-)

Más información ¿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 González

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