Add PrintFriendly Button Using Blogger's Built-in Add Widget Tool

You can easily add the PrintFriendly button to your blog using the Add Widget Tool. If you prefer to do things the hard way, then you can manually add the PrintFriendly button.

---

Step 1: Get the PrintFriendly button.

• Goto www.PrintFriendly.com/button.
• Select Blogger/Blogspot.
• Select your preferred button style.
• Click the Install Blogger Widget button.

---

Step 2: Tell Blogger where to install.

• Ensure that your are logged in to your blog dashboard.
• Click to select the correct blog.
• Click the Add Widget button.
  * If nothing happens, note that PrintFriendly currently works on any of the Classic Blogger/Blogspot templates. We are still working on getting this to work on the new Dynamic View template.

---

Step 3: Smile!

---

Add PrintFriendly Button to Blogger or Blogspot Using the New User Interface

You can manually add the PrintFriendly button to your blog in four easy steps. If you prefer a simpler way, you can use blogger's built-in add widget tool.

---

Step 1: Get the PrintFriendly button code.

• Goto www.PrintFriendly.com/button.
• Select Blogger/Blogspot.
• Select your preferred button style.
• Click add code directly to template.
• Copy the code in the text box that appears.

---

Step 2: Prepare to edit your blog's HTML template.

• Log in to your blog dashboard. 
• Click Template on the left navigation menu. 
• Click Edit HMTL below your blog thumbnail.
  * If nothing happens, note that PrintFriendly currently works on any of the Classic Blogger/Blogspot templates. We are still working on getting this to work on the new Dynamic View template.

• A warning message will appear. Click Proceed.

• An Editor window will appear. Click on the check box next to Expand Widget Templates

---

Step 3: Paste the PrintFriendly button code.

• Find <data:post.body/> in the Editor window.
  * Tip: Press "Control" and "F" on keyboard to search.
• Paste the PrintFriendly button code above <data:post.body/> to make the button appear above your posts. Paste the code below <data:post.body/> to place the button below your posts.
  * Careful: There's two versions of <data:post.body/>. Use the first (web) not the second (mobile).

---

Step 4: Preview and save your changes.

• Click Preview. 
• Click Save template. 
• Enjoy!

Fix Internet Explorer Problems

Having trouble using Print Friendly & PDF in Internet Explorer? This guide will solve your problems.

Step 1: Update Internet Explorer

This usually solves problems with IE. Download the latest version of Internet Explorer. After download is complete click "Run" to install.

Check to see if Print Friendly & PDF is now working. If not, continue to disable add-ons.

Step 2: Disable Bad Add-Ons

Internet Explorer might have Add-Ons you didn't install, or even want. Many Add-Ons slow down or even break your browser experience. Commonly called "Junkware", companies install Add-ons for malicious, marketing, and occasionally helpful reasons.

Step 1: Left-click Internet Explorer Settings Menu, then Internet Options.

Step 2: Left-Click the tab Programs, then Manage add-ons.

Step 3: Left-Click the tab Programs, then Manage add-ons.

Left-click to select an add-on, then the button Disable. Remove any/all add-ons you are not actively using (Disable adware/spyware add-ons. They are not required for safe browsing and are most often the add-ons breaking the browsing experience).

Print Friendly & PDF for WordPress.com

Now you can add the one-and-only Print Friendly & PDF button to your WordPress.com website!

PrintFriendly makes your website look great when printed, and saves paper and ink. It cleans and optimizes webpages before printing, plus you can remove-images, change text-size, and save as PDF. It's free, and easy to add to WordPress.com. Learn more about Print Friendly & PDF.

These instructions are for WordPress.com, not to be confused with WordPress.org. If you're using WordPress.org for self-hosted and hosted WordPress sites, you can get the PrintFriendly Plugin for WordPress.org.

Step 1: Go to Sharing Settings

From Your Dashboard, click "Settings", then click "Sharing".

Step 2: Add a New Service

From the Sharing Settings, click "Add a new Service".

In the Popup Window, enter...

• Service name: Print & PDF (Or your preferred name)
• Sharing URL: http://www.printfriendly.com/print?url=%post_full_url% 
• Icon URL: http://cdn.printfriendly.com/icon-print-friendly-16x16.png
• Click "Create Share"

Step 3: Drag-and-Drop Print Friendly Button to "Enabled Services"

Left-Click (and hold) the new Print & PDF button. Drag to "Enabled Services", and release the mouse button. Don't forget to save!

That's it! You should see the Print & PDF button on the bottom of every post.

Use Your Own Button/Graphic With PrintFriendly

Want to use your own button/graphic for the PrintFriendly button? No problem. All you need to do is change the image source in the PrintFriendly code snippet.

First step is get your Print Friendly button. Select your platform and copy the code snippet.

For Blogspot and Blogger

In the PrintFriendly code snippet, there's two images (one for list page, the other for post pages). Find the image tags and then change the src to the URL of the graphic/button you would like to use.

For Websites

Your Find the image tag  and then change the src to the URL of the graphic/button you would like to use.

For WordPress

Custom image option is baked into the plugin. Download the PrintFriendly Plugin and activate.  Then goto your plugins page and select the settings. There you can select custom image and enter the URL.

Add Print Friendly to Blogger or Blogspot

Step 1: Get PrintFriendly Button Code

Goto PrintFriendly.com/button. Select Blogger/Blogspot. Choose your button style, and copy and paste the PrintFriendly code snippet.

---

Step 2: Edit Your HTML Template

• Log into Blogger or Blogspot
• Click Design > Edit HTML
• Click Check Box Expand Widget Templates (don't miss!).

---

Step 3: Paste Button Code

• Find <div class="post-footer"> in template code. Tip: Press "Control" plus "F" on keyboard to search for "class='post-footer".
• Paste PrintFriendly Button Code
• Save Template

Customize Your Button

---

Align Button to Right

To align your PrintFriendly button to the Right. Add inline CSS to the PrintFriendly code snippet.

Step 1: Find the two <div class='pfbutton'>, inside your PrintFriendly button code.
Step 2: Add style='float:right;' to the div.

---

Use a Your Own Graphic/Button

In the PrintFriendly code snippet, there's two images (one for list page, the other for post pages). Find the image tags and then change the src to the URL of the graphic/button you would like to use.

---

Show Only on Post Pages (not on homepage)

There's two sections to the code snippet. The "Index" section adds the button to the homepage, "Item" adds the button to the post/article page.

Change the word "Index" to "Item". Then, delete the first section.

How to Put the Print Friendly Button On Top of WordPress Posts

UPDATE: This feature is now built into the WordPress Plugin. Simply install the Printer Friendly & PDF plugin, activate, and click settings. You'll see a option to position the button on the Left, Right, Top, Bottom of your posts.

---

Lots of people ask me how to they can move the Print Friendly button from the bottom of their WordPress page, to the top. Or, they want to align it to the right or center.

The default location for the PrintFriendly button is at the bottom of the post, aligned to the left. However, if you'd like to change the location, here's some simple steps. If you need additional help, email me at "support [at] printfriendly.com".

To get started, you'll need to get the Print Button Plugin for WordPress.

Step 1: Which Button Are You Using?

The first step is simple. Simply identify the button you are using.

• pf-button 
• pf-button-both 
• pf-icon-small 
  
• pf-icon-both 
  
• pf-button-big 
• pf-icon.gif 
  

Step 2: Modify "pf.php" file

When you download and expand printfriendly.zip file, open the file named "pf.php". Starting on line 27, you will see several statements starting with the word "case ".

Find the case for the button you are using. For example, if you are using "pf-button-both", you'll want to find and modify the case "pf-button-both.gif":

Within the "case" statment for your button, you'll find "div id=pfbutton". To change the alignment of the PF button, add some styles to this div.

>Align Right or Left: Add "style="float:right;" OR "style="float:left;"

Align center: Add "style="text-align: center;"

Put the Print Friendly Button on the Top of Your Post

Within the "case" statement for your button, you'll find a "return $content". Move $content to the end of the statement. For Example, Change this:

To This:

Careful: When you change $content make sure you put the period "." at the front, ".$content;"

If you have any questions, feedback, or need some help, email me at support [at] printfriendly.com.