7 ene. 2015

Cómo añadir un botón para imprimir en tu web

Muchos creadores de contenidos web, especialmente Bloggers, siempre pueden complementar sus entradas con valor añadido: permitir al usuario descargarse las instrucciones en un archivo de lo que explican en sus entradas o la posibilidad de que el usuario se las imprima en papel.

Aunque en Diarios de la nube hemos explicado con anterioridad cómo imprimir en Blogger de una manera más o menos sencilla, esta vez vamos a simplificar aún más la tarea. Vamos a por el "más fácil todavía": utilizaremos el servicio printfriendly y podremos utilizarlo en Blogger, WordPress, Drupal o en cualquier sistema de publicación web que exista. ¿Quieres aprender a imprimir con facilidad tus contenidos?, sigue esta guía paso a paso y comprueba lo sencillo que puede llegar a ser.



¿Cómo puedo ofrecer a los usuarios la opción de imprimir mis entradas?

En general se trata de ofrecer un botón con una imagen de una impresora o similar que cuando sea pulsado active un pequeño "script" que envíe a la impresora del usuario el contenido de la entrada.

Si quieres que se puede imprimir tu receta en ese blog de cocina que estás creando, o las instrucciones de tu último trabajo manual en ese Blog DIY que creaste con tanto mimo, el patrón para coser ese jersey, el itinerario de tu última ruta para tu blog de viajes... basta con que utilices el "script" adecuado para darles la posibilidad a tus usuarios.

Es extremadamente sencillo: puedes desde hacértelo tú mismo siguiendo esta guía, hasta utilizando un servicio aún más sencillo llamado Printfriendly, veamos cómo hacerlo.


¿Qué es Print Friendly?

Se trata de un servicio web ofrecido por la web www.printfriendly.com en el que se proporciona un sencillo "script" con un código de "copiar y pegar" para tu web con el que poder ofrecer la posibilidad a tus usuarios de imprimirse tus entradas.

Paso a paso, ¿Cómo puedo imprimir las entradas de mi Blog?

1) Escribe http://www.printfriendly.com/button en la barra de direcciones de tu navegador o haz "clik" aquí y se te mostrará una pantalla como la que te muestro a continuación:




  • Analicemos punto por punto la pantalla que se nos muestra para configurar nuestro botón para imprimir:
  • Selecciona el tipo de web en el que vas a publicar tu botón para imprimir. Cada opción pertenece a un sistema, tan sencillo como seleccionar el tuyo y seguir los pasos.
2) En la misma pantalla, una vez seleccionado el sistema con el que vas a trabajar, continúa avanzando hasta llegar a "Choose a button":

  • Selecciona el tipo de botón que deseas que aparezca en tu web. Tienes desde botones convencionales donde pone "Print" hasta botones con los que imprimir y tener la opción de guardarlo en PDF (así tus usuarios se podrán llevar el archivo con ellos donde quieran e imprimirlo después si lo prefieren... una buena forma de ahorrar en papel y tener disponible el archivo en cualquier momento).
  • Si no te gustan los iconos por defecto, podrás subir después la imagen que tú prefieras para imprimir.
3) Una vez seleccionado el botón, continúa para entrar al detalle de cómo deseas configurarlo:

  • En Features no es necesario que hagas ningún cambio si te parece bien tal cual el botón que antes elegiste o si no quieres "complicarte" con más opciones:
  • Page header: te permite utilizar el icono o botón que antes has seleccionado o subir uno nuevo que tú prefieras utilizar.
  • Click-to-delete: permite al usuario seleccionar a la hora de imprimir qué partes prefiere que no salgan en la impresión.
  • Images: permitirá al usuario incluir o excluir las imágenes en la impresión.
  • Image Style: Indicará la colocación del botón para imprimir (centrado, a la derecha, izquierda, en la parte superior...).
  • Email: La opción de enviarse la entrada a un correo electrónico (para ahorrar papel). 
  • PDF: La posibilidad de llevar a un formato de Adobe conocido como PDF el archivo para que no necesite el usuario imprimirlo y lo pueda llevar consigo donde quiera (en su móvil, en un USB, mandarlo a la nube, etc...). Otra forma de ahorra papel.
  • Print: Por si le das al usuario la opción de imprimir o directamente sólo le permites mandarlo por email o a PDF y no imprimir.
  •  Custom css url: Te permite añadir una presentación hecha por tí, con tu propia hoja de estilos.
  •  Website protocol: Debes ponerlo según el protocolo que utilizas en tu web. Si es http déjalo como está, sólo es necesario cambiarlo si tu web utiliza protocolo seguro https.
4)  Ya sólo te queda pegar el código en tu sistema web. Si es Blogger, WordPress o similar, tendrás la opción de añadirlo como un gadget más a tu Blog para añadirlo en la vista de diseño a placer.

Si tu página es una web, simplemente tendrás que copiar y pegar el código que te aparece al final de la pantalla, en el lugar donde prefieres que aparezca el botón:


  •  Simplemente copia en tu página web el código que te ofrece Print Friendly en la zona donde deseas que aparezca el botón.

Si eres Blogger y quieres colocarlo en una zona distinta a la de por defecto:

  • Fíjate que justo debajo del botón "Install Blogger Widget", encontrarás un enlace donde pone "add code directly to template.", haz "clik" en ese enlace si deseas colocar el código del botón para imprimir en otra zona de tu Blog. 
  • Sigue las instrucciones que te da PrintFriendly para poner el botón en tu plantilla donde tú desees. Es fácil, puedes editar la plantilla HTML y añadirlo en el <head> para que sólo se dibuje el botón cuando el usuario entre en el detalle de una entrada.




  •  Sigue las instrucciones de la imagen que te muestra la propia printfriendly.
Cualquier duda dispones de los comentarios para plantearla, estaré ahí para ayudarte a poner este botón en tu web.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

10comentarios:

  1. Gran tutorial Miguel, me gusta la forma tan detallada con la que explicas cada uno de tus tutoriales, sin duda te considero uno de mis Bloggers favoritos. Muchas gracias por brindar estos tutoriales de calidad.
    Por cierto, he enviado un mensaje a través de tu formulario de contacto y no he recibido tu respuesta, revíselo por favor.
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Gracias Jonathan!. Te escribí a Facebook,¿no te llegó?.

      Eliminar
  2. Gracias por el tutorial está muy bien explicado. En cuanto pueda me pongo a ello. Pero me surge una duda si quiero poner la opción de imprimir solo en ciertas entradas tendría que copiar el código solo en la entrada que quisiera no? Entiendo que si pongo un widget aparecería en todas.
    Gracias

    ResponderEliminar
    Respuestas
    1. Gracias a ti, para mi es un placer ayudar. Si es sólo en ciertas entradas, tendrías que ponerlo sólo en el HTML de esas entradas.

      Un saludo!

      Eliminar
  3. Me apunto estas ideas porque no conocía como hacerlo y la verdad es que parece más fácil de lo que estaba intentando, gracias por compartir

    ResponderEliminar
    Respuestas
    1. Hola Julia, me alegro mucho que te guste. La verdad que es una manera extremadamente sencilla de poder añadir un botón "imprimir" que permita a tus usuarios interactuar más con tu web y llevarse impreso aquello que les explicas.

      Es fácil de usar. Cualquier duda aquí me tienes.

      Un saludo!.

      Eliminar
  4. HOla Miguel Angel, la verdad es que mi inexperiencia es grande, aun asi voy dando pequeños pasitos en mi blog, y gracias a tus consejos voy haciendo algo más profesional. En este caso he seguido todas las instrucciones que das, pero cuando pego el codigo y voy a la plantilla, no me sale el botón, me sale el código entero, y la verdad es que ya no se como solucionarlo. ¿Podrias ayudarme? Mil gracias

    ResponderEliminar
    Respuestas
    1. Hola,
      mándame el enlace y te lo miro. El tema será que tienes alguna etiqueta de la plantilla que no está bien cerrada y por eso es posible que te muestre sólo el código. Recuerda que el código debe estar en el head de tu plantilla no en el body.

      Un saludo!

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.