How to create printable pages from Squarespace blog posts

I’m finishing up a small series of posts I created about sourdough bread baking that include a recipe as well as some instructions.

Either might be useful as a print out or save as a pdf—I’ve know I’ve used and appreciated this printer friendly recipe feature many times on other sites but had never had need for it before on my own. I was hoping to find something that obviously worked well for my users, was easy to implement for me, and didn’t look hideous—oh and free too.

I found the solution with a few adjustment from PrinterFriendly.com:

Create the link

• Go to PrinterFriendly.com and make your choices to generate the code but don’t freak out too much about the button options because we are going to use our own.
  

Make a button image

• Create a button image with the graphics tool of your choice (I used Figma).

  • Note about this: ideally this image looks like a button (which is part of my complaint about the ‘button’ choices provided by PrinterFriendly.com. From a user experience perspective, they don’t have the affordance of a button and could be confusing to your users i.e. users might not understand this is something they can click on.

• Upload your image to Squarespace.
  

Create the code block

• Copy the code that was generated by PrinterFriendly.com at the bottom of their page.

• Insert a code block where you want your printer friendly button to be.

• Paste the code from PrinterFriendly.com into the code block.

• Find where the code mentions the image name—the name will differ depending on what you chose from PrinterFriendly.com. For me it looked like this:
  src="//cdn.printfriendly.com/buttons/printfriendly-pdf-email-button-md.png"

• Replace the file name with the name of your custom button image.

• At this point it should be working but unfortunately you can’t test it until the post is published.

That’s it!