11/4/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

Más información ¿Cómo poner el botón de...:?