Adding the Code
Where It Goes
Put it in the body of your page, at the spot the button should show up: under the headline, at the end of the article, wherever suits. Not in the <head>, because the code contains the button itself and not only a script.
If you want a button on every article, paste it into your theme or template rather than into each post by hand.
What You Are Pasting
Four pieces, in this order:
- Your settings. A hidden
<printfriendly-options>tag holding the choices you made in the builder. Every one of them is listed in the settings reference. - The script. Loads
printfriendly.js. It loads in the background and does nothing until someone clicks, so it never slows the page down. - A small style block. Only the hover and focus effects. If your CMS strips it, the button still looks and works exactly the same, it just stops tinting under the cursor.
- The button. Real markup rather than an image, which is why it picks up your page's own font and color instead of looking pasted on.
<printfriendly-options style="display:none;" data-content-features="disableClickToDel=0;hideImages=0;imageDisplayStyle=block;disablePDF=0;disableEmail=0;disablePrint=0;encodeImages=0;showHiddenContent=0;"></printfriendly-options><script>var pfBtVersion='3';(function(){var js,pf;pf=document.createElement('script');pf.type='text/javascript';pf.src='//www.printfriendly.com/printfriendly.js';document.getElementsByTagName('head')[0].appendChild(pf);})();</script><style>.pf-print-btn:hover{background:rgba(128,128,128,.11)!important}.pf-print-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}@media (pointer:coarse){.pf-print-btn{min-height:44px}}</style><a href="https://www.printfriendly.com" class="printfriendly pf-print-btn" style="display:inline-flex;align-items:stretch;border:1px solid rgba(128,128,128,.32);border-radius:8px;background:transparent;font:inherit;font-size:.875em;font-weight:500;line-height:1.2;color:inherit;text-decoration:none;box-shadow:none;text-shadow:none;vertical-align:middle;box-sizing:border-box" onclick="window.print();return false;" title="Printer friendly version of this page (Print, PDF, Email)"><span style="display:inline-flex;align-items:center;gap:8px;padding:10px 14px"><svg style="display:block;width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9V3h12v6"></path><path d="M6 18H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-1"></path><rect x="7" y="15" width="10" height="6" rx="1"></rect></svg><span>Print</span></span><span style="border-left:1px solid rgba(128,128,128,.32);display:inline-flex;align-items:center;gap:8px;padding:10px 14px"><svg style="display:block;width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"></path><path d="M14 3v5h5"></path><path d="M12 12.5v4.6"></path><path d="m9.75 14.9 2.25 2.2 2.25-2.2"></path></svg><span>PDF</span></span><span style="border-left:1px solid rgba(128,128,128,.32);display:inline-flex;align-items:center;gap:8px;padding:10px 14px"><svg style="display:block;width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="m3.7 6.7 8.3 5.8 8.3-5.8"></path></svg><span>Email</span></span></a>Checking It Worked
Load the page and click the button. PrintFriendly should open over your page showing just the article. If it does, you are done.
If clicking sends the reader to printfriendly.com instead, your site removed part of the code. That is the single most common problem, and it is covered below.
Common Questions
Clicking the button sends my readers to printfriendly.com#
The script did not load, or the click handler was stripped out. The button is a link to printfriendly.com that a script intercepts; with the script gone, the link is all that is left, so it simply follows it.
Nearly always this is a site builder or CMS removing <script> tags and inline handlers from the content you paste, which many do for security. Google Sites, the free tiers of several builders, and some locked-down CMS editors all behave this way.
Two things to try. Paste the code into a block explicitly meant for custom HTML or embed code, rather than into the normal rich-text editor. If your platform has no such block, or strips scripts there too, the button cannot work on that platform and the honest answer is to link readers to PrintFriendly instead.
To confirm this is what is happening, view the page source and look for printfriendly.js. If it is not there, it was stripped.
It works on my existing pages but the button never appears on new ones#
The code is in those pages individually rather than in the template that generates them. Move it into your theme, layout or post template so every page gets it, then remove the per-page copies.
Can I put the script in the head and the button somewhere else?#
Yes. The script and the settings tag can live in the <head> or anywhere in the page, and the button markup can sit wherever you want the control. They only need to be on the same page.
Can I have more than one button on a page?#
Yes. Repeat the button markup as many times as you like, but include the script and settings tag only once. Extra copies of the script do no harm but slow the page down for nothing.
Can a button on one page print a different page?#
Yes. Link to the other page with ?pfstyle=wp on the end, and put the button code on that page as usual. Arriving with that parameter opens PrintFriendly straight away instead of waiting for a click.
<a href="/recipes/sourdough?pfstyle=wp" rel="nofollow">Print this recipe</a>Useful on an index or category page, where you want a print link beside each entry without putting a button inside every one.
Can I add it through Google Tag Manager?#
You can load the script that way, but not the button, because a tag manager has no reliable way of knowing where in your layout the control belongs. Put the button markup in your template and load the script however you prefer.