Blogger: Cómo imprimir entradas con PrintFriendly

Uno de los gadgets más solicitados en Blogger es el de imprimir una entrada de nuestro blog. Si tenemos un blog de cocina, manualidades o similar, esta opción se convierte en prácticamente necesaria.

Cuando termines de leer este artículo, conocerás las distintas formas de incluir un botón de imprimir en Blogger y, sobre todo, conocerás a fondo la herramienta PrintFriendly.

Curiosamente, aunque es una herramienta muy solicitada, Blogger no la incluye en su lista de gadgets por defecto. Por tanto, de la misma forma que hicimos para incluir un formulario de contacto, recurriremos a una herramienta externa para añadir la opción de imprimir cualquier entrada en nuestro blog.

Por qué utilizar PrintFriendly

Existen dos opciones a la hora de incluir la opción de imprimir:

1. Utilizar una herramienta de terceros: PrintFriendly, Blog2print, etc.
2. Modificar el código HTML y CSS de la plantilla, para imprimir las zonas que nos interesen

La primera opción es la que estudiaremos en este artículo, en este caso utilizando PrintFriendly, una de las mejores herramientas para imprimir. Esta opción tiene la ventaja de la facilidad y rapidez con la que podemos implementarlo en nuestro blog, además de no requerir de conocimientos de programación.

La segunda opción, aunque no la trataremos ahora, tiene la ventaja de no requerir de herramientas externas para su funcionamiento, además el nivel de control sobre el aspecto y zonas a imprimir es mayor. Sin embargo, requiere de mayores conocimientos y asumimos mayor riesgo, al tener que modificar la plantilla Blogger.

Ambas opciones son igual de válidas, si bien es cierto que en la mayoría de casos prima la sencillez por encima del nivel de personalización. Si quieres algo que funcione bien, nada mejor que utilizar una herramienta que ya utilizan muchísimos blogs, que además incluye otras opciones interesantes, como puede ser la generación de PDF o el envío por correo electrónico.

PrintFriendly es completamente gratuito, ya que el modelo de negocio se basa en mostrar publicidad en algunas de las opciones de la herramienta.  

Cómo añadir PrintFriendly a nuestro blog

1. Accedemos a la página oficial de PrintFriendly
2. En la opción "Choose Site Type", seleccionamos "Blogger/Blogspot"
   
3. En el segundo apartado "Choose Button", elegimos el botón que mejor se adapte a nuestra plantilla. No te preocupes si no te gusta ninguno de los botones, luego veremos como personalizarlo.
   
4. En "Features", dejamos las características como están por defecto.
   
   

   Este apartado es el que permite configurar la mayoría de características de PrintFriendly, en un apartado posterior de esta guía podrás ver para que sirven cada una de las opciones

5. En "Install on Blogger", pulsamos sobre el botón "Install Blogger Widget"
   
   

   La opción "add code directly to template" nos permite generar el código, para que nosotros mismos lo coloquemos en nuestra plantilla. Si te decides por este otro método, recuerda hacer siempre una copia de seguridad de tu plantilla.

   
   Al pulsar sobre el botón anterior, te aparecerá una pantalla de confirmación de Blogger, donde debes elegir el blog al que quieres añadir el botón de impresión y el título que tendrá el nuevo gadget.
   
   
   Una vez pulsemos sobre "Añadir artilugio", se nos mostrará el modo diseño de Blogger, donde se ha incluido el nuevo gadget.
   
   
   Ahora vamos a "Ver blog" y, como puedes comprobar, ya aparece el botón de imprimir en las entradas.
   
   
   ¡Perfecto! Ya lo tenemos funcionando, si pulsamos sobre botón de imprimir este es el resultado:
   

Cómo personalizar el botón de imprimir de PrintFriendly

Puede que no te guste ninguno de los botones de imprimir que te ofrece PrintFriendly, o prefieres crearte uno que se adapte mejor a tu plantilla. No hay problema, veamos lo sencillo que es poner otro botón.

1. Buscamos un icono, para esto te recomiendo Iconfinder, una herramienta estupenda, donde podrás buscar prácticamente cualquier icono. Intenta buscarlos pequeños (24, 48, ...), puesto que si los eliges grandes pueden salirse de los márgenes máximos.
   
2. Obtenemos la URL del nuevo icono. Para hacer esto debemos subir el icono a cualquier servicio de alojamiento y copiar la dirección (URL) en el que esté ubicado.
   

   Aunque puede parecer complicado, hacer esto con Blogger es muy sencillo. Veamos un método rápido de obtener una URL de una imagen:
   

   1. Accedemos a Picasa
   2. Seleccionamos un álbum, recuerda que Blogger crea un álbum con el mismo nombre del blog  en Picasa, lo ideal es seleccionar el álbum del blog (ya que estará compartido de forma pública)
   3. Pulsamos sobre "Añadir foto", subimos nuestro icono y pulsamos sobre aceptar.
   4. Entramos en la foto que acabamos de subir, pulsamos botón derecho y seleccionamos "Copiar URL de imagen" (puede cambiar el mensaje según el navegador).  

   
   Ya tienes copiado en el portapapeles la URL que estábamos buscando.  

   
   
3. Modificamos la URL del botón de PrintFriendly. Para ello, vamos a "Blogger > Diseño" y editamos el gadget de PrintFriendly, te aparecerá un texto poco formateado como este:
   

   <script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script><script type="text/javascript">var pfButtonHTML = '<a href="http://www.printfriendly.com" style="margin-top:0.5em; float:left;display:block; margin-right: 0.5em; color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="http://cdn.printfriendly.com/pf-button-both.gif" alt="Print Friendly and PDF"/></a>'; var pfBloggerJs; pfBloggerJs = document.createElement("script"); pfBloggerJs.type ="text/javascript"; js= "http://cdn.printfriendly.com/blogger.js"; pfBloggerJs.src=js; document.getElementsByTagName("head")[0].appendChild(pfBloggerJs);</script><span id="pf_locator"></span><script type="text/javascript">var f = document.getElementById("pf_locator");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>
   

   Localizamos el texto que aparece sombreado y lo sustituimos por la URL que has obtenido en el paso 2.
4. Guarda el gadget y visualiza el blog, ya tienes el nuevo icono funcionando

Cómo personalizar PrintFriendly

En el proceso inicial de creación del gadget, disponemos de una serie de campos en el apartado "Features". Estos parámetros nos permitirán personalizar algunas de las funcionalidades de PrintFriendly. 

1. Page header.- Cabecera del documento, por defecto toma el icono del blog (favicon) y la URL del blog, podemos subir un icono y modificar el texto de visualización.
2. Click-to-delete.- Activa/Desactiva la posibilidad de permitir eliminar texto del documento haciendo click (por defecto se permite).
3. Images.- Indica si se mostrarán imágenes en el documento PrintFriendly (por defecto se muestran).
4. Image style.- En caso de permitir mostrar imágenes, aquí decides el tipo de alineación que tendrá: derecha, izquierda, ninguna o centrado en bloque.
5. Email.- Activa/Desactiva la posibilidad de enviar por correo electrónico
6. PDF.- -Activa/Desactiva la funcionalidad de generación de PDF
7. Print.- Activa/Desactiva la opción de imprimir
8. Custom css url.- URL que apunta hacia una hoja de estilos personalizada, donde podremos sobrescribir el comportamiento por defecto de los estilos de PrintFriendly
   

   Veamos un ejemplo muy sencillo, para entender como funciona exactamente este campo. Supongamos que queremos mostrar todas las cabeceras en rojo, haríamos lo siguiente:
   

   1. Abrimos cualquier editor de textos (Notepad)
   2. Copiamos el código CSS siguiente:

      #printfriendly h1, #printfriendly h2, #printfriendly h3, #printfriendly h4 {
          color: Red;
      }
      

   3. Guardamos el archivo con el nombre "printfriendly.css"
   4. Subimos el archivo a cualquier servicio de alojamiento: Drive, hosting propio, etc. 
   5. Colocamos en el campo "Custom css url" la URL del paso 4

   
   Si sigues estos pasos y generas el gadget, al pulsar el botón de imprimir  te aparecerán todas las cabeceras en rojo. Para ver todos los estilos CSS que puedes sobrescribir, puedes acceder a la página de soporte de PrintFriendly sobre este tema.

   
   
9. Website protocol.- Protocolo Web a utlizar: HTTP/HTTPS. En el caso de Blogger, la opción por defecto es la correcta: HTTP.

Si anteriormente ya habíamos generado nuestro gadget PrintFriendly y posteriormente decidimos modificar algunas de estas características, debemos volver a hacer el proceso para añadir PrintFriendly (o copiar el nuevo código), puesto que el código generado es distinto.

Además de los parámetros que podemos modificar desde la propia herramienta que nos ofrece PrintFriendly (Features), también es posible modificar otros aspectos desde el código HTML, son los denominados "Comandos Personalizados". Se trata de incluir clases CSS que tienen comportamientos predeterminados. Puedes ampliar conocimiento desde la ayuda oficial sobre Custom Commands.

Conclusión

Definitivamente si quieres añadir un botón de imprimir al blog, PrintFriendly es una de las mejores alternativas. 

Hemos hecho un recorrido de menor a mayor complejidad, tu decides hasta donde llegar y, si te has quedado con ganas de más... ¡¡ coméntamelo !!, que me he dejado algunos asuntos algo más avanzados en el tintero, pero ya estaba empezando a ver el artículo demasiado extenso.

Como siempre, muchas gracias por seguirme, por comentar y por estar ahí :-)

Que lo compartas es el mejor regalo que me puedes hacer

• Tweet

Gracias :-)