Thursday, January 31, 2013

Blog Tutorial - How to add PrintFriendly Button to Blogger Posts

 

Would you like your readers to be able to print your blog posts, your recipes or tutorials, in an easy and simple way, without printing your ads and graphics?

Then you need to add the PrintFriendly button to your blog posts!

Pin It

Add Printfriendly Button to Blogger from Setting for Four #tutorial

1 Printfriendly Button

PrintFriendly strips out ads and other clutter as well as formats the page for optimal printing.  It also gives you the option of removing individual elements you might not want.

I just added the button two weeks ago to my blog, so now you can print out my posts easily! 

You can see it here in action, below one of my posts:

Print Friendly Button in Blogger Post from Setting for Four

 

When you click on the button you can print my recipes, or tutorial instructions easily!

This is what you will see when you click on the green Printfriendly button:

Click on Printfriendly Button, Tutorial Step from Setting for Four

By mousing over certain sections of the screen above you can delete elements too, just click on them to delete…so I could delete the first three sentences for example and only print out the specific images and sentences I want!  Saves paper and ink!

Click on the Print button in the top left corner to get this:

Print window opens, Tutorial Step from Setting for Four

Then click print to print it out!

You can also turn your post into a dowloadable PDF by clicking on the PDF button at the top:

Click on Printfriendly Button, tutorial step from Setting for Four

This window then appears and you can download the post as a pdf!

PDF portion of PRintfriendly button, tutorial step from Setting for Four

The third action you could take is to click on the Email button to email the post page to someone!  When you click on the Email button this window appears:

Email portion of Printfriendly, tutorial step from Setting for Four

How to add the Printfriendly button to your blogger posts:

1.  Go to Printfriendly.

2. Choose your Site (Blogger) then Choose your button style:

Choose your button Printfriendly, tutorial step from Setting for FOur

3.  Choose your features (I didn’t change any of these and left them as is…)

Choose your Features, Printfriendly tutorial step from Setting for Four

4.  Now get the button code click on ‘add code directly to template’ (I didn’t use the ‘Install Blogger Widget” because I wasn’t sure where the widget would place the button and I wanted to specifically add it to the end of my posts…):

 

Get code for Printfriendly button,Printfriendly tutorial step from Setting for Four

5.  Copy the button code provided (ignore the ‘Yikes!’ comment):

Copy and Paste Button Code, Printfriendly tutorial step from Setting for Four

6.  Back up your blog before proceeding!!  This is crucial!

Go to your Blogger Template and select ‘HTML’

7. Click ‘Proceed’ when the warning message appears.

8.  Put checkmark on ‘Expand Template Widgets’ box.

9.  Find this code in your template: <data:post.body/>

An easy way to find this code is to click Control ‘F’ and that will open a ‘Find’ box where you can copy and past the code <data:post.body/> and the code will be automatically highlighted and located for you!

**Be Careful: There's two versions of <data:post.body/>. Use the first (web) not the second (mobile). **

10.  Paste the Printfriendly Button code above the <data:post.body/> if you would like the button to appear before the post body

…or

11.  Paste the Printfriendly Button code below the <data:post.body/> code if you would like the button to appear below the post body….. like I did.

12.  Click ‘Preview’…does everything look ok?

13. Click ‘Save Template’.

The PrintFriendly Button has been added!

Good luck with this and if you have any questions, leave me a comment and I’ll try to help you the best I can!

Did you like this tutorial?  If you did – leave me a comment and I will add more!

~ ~ ~ ~

Want posts delivered to your inbox? Click here!


Subscribe Via Email Rss

Or follow along with me here !:

Find Me On Facebook follow me on twitter Rss Feed Options follow me on pinterest StumbleUpon

~ ~ ~ ~

* Thank you SO much for coming by for a visit! I love to hear all of your comments! *

Heather

Written by Heather at Setting for Four

Setting for Four is a home design, décor and lifestyle blog. Focus is on home renovations, crafts, DIYs, tutorials, recipes, as well as family friendly design and decorating ideas that won't break the bank or sacrifice style.

You can find Setting for Four on

Sharing here:

I heart Naptime     Act Different Be Normal

Print Friendly and PDF

38 comments:

  1. Thank you so much for posting this Heather! I thinks it's a great added feature and it's for Blogger - YAY!!

    ReplyDelete
  2. Well, that is just too cool! I'm going to pin this for future use!

    ReplyDelete
  3. Cool new header! Informative post too! :)

    ReplyDelete
  4. Hey chica, can I feature this on So You Wanna Be a Blogger? great tutorial!

    ReplyDelete
  5. So cool! I had no idea this was even possible, thanks for the tip :o)

    ReplyDelete
  6. Very cool! I have to pin this! I would love to add this to Smart School House!

    ReplyDelete
  7. Replies
    1. Fantastic Melanie!! Yay!! You are so welcome!!

      Delete
  8. Heather, that is so clever! When I get some time, I'd like to play around with this. So helpful, thank you! Sharon

    ReplyDelete
  9. thanks so much, worked great! have a nice day!
    eva

    ReplyDelete
  10. This was so helpful! Now I have a print button too! Thanks for sharing this tutorial!

    ReplyDelete
  11. When I put this on my blog. I also have the hover over photo pin it button and it shows up over my print button. is there any way to fix this?

    ReplyDelete
    Replies
    1. Karissa: I removed my hover over photo pin it button because it was causing all kinds of problems for me...sorry I don't know how to fix that!

      Delete
  12. Heather,
    Thanks for your tutorial. I have been trying to add the print button and have a problem. I do not get the Proceed button when warning message appears. I have a screen that has a "save template" button already highlighted. But when I click on it, nothing happens. I backed up on the previous screen and thought maybe that was my problem. I deleted the saved template, but it still did nothing when I clicked on the save template button and I still do not get the proceed option/screen.

    Hope you can help me.
    Thanks,
    Patricia

    ReplyDelete
  13. Patricia: Blogger has changed the look of the template section - that's why you don't get the "proceed' warning...first of all back up the template you already have (so important!!) then go to template - edit html - you'll see your html in a window - make sure the cursor is in the html somewhere. Then proceed to the tutorial starting here:
    9. Find this code in your template:
    An easy way to find this code is to click Control ‘F’ and that will open a ‘Find’ box where you can copy and past the code and the code will be automatically highlighted and located for you!

    **Be Careful: There's two versions of . Use the first (web) not the second (mobile). **

    10. Paste the Printfriendly Button code above the if you would like the button to appear before the post body

    …or
    11. Paste the Printfriendly Button code below the code if you would like the button to appear below the post body….. like I did.

    12. Click ‘Preview’…does everything look ok?

    13. Click ‘Save Template’.

    The PrintFriendly Button has been added!



    Hope this helps!!

    ReplyDelete
    Replies
    1. Thanks, for getting back to me so soon. I followed your instructions, but the code isn't in my template.

      Any suggestions of what I need to do?

      Thanks,

      Patricia

      Delete
  14. Thank you Heather :)
    Your directions were pefect.

    Lynnie

    ReplyDelete
  15. I'm with Patricia. I can get it to load on whole blog but not just on recipes or places I want. Please help. Your instructions are wonderful not sure what I am doing wrong?

    ReplyDelete
    Replies
    1. Gee Jennifer - I don't know what may be causing that...maybe go to the Printfriendly website and see if there is a contact number for you to ask!

      Delete
  16. Thanks Heather, this is awesome.
    Marcie @ I Gotta Try That

    ReplyDelete
    Replies
    1. You're welcome Marcie! Glad you find it helpful!

      Delete
  17. Heather excellent tutorial! Best I have found on the web!
    I CANNOT get this to work regardless if I put above the post.body or below...it just doesn't want to show up. Do you have any advice?
    www.pinkspantry.com

    ReplyDelete
    Replies
    1. Hi Erinn! Did you add it under the first in your html?? There are two of those pieces of code in your template - you need to find the first one and follow the instructions....otherwise I'm sorry I don't know what may be not working! Maybe if you go to the Printfriendly site and ask for help there?? Again here are the instructions in my tute! Good luck! 9. Find this code in your template:

      An easy way to find this code is to click Control ‘F’ and that will open a ‘Find’ box where you can copy and past the code and the code will be automatically highlighted and located for you!

      **Be Careful: There's two versions of . Use the first (web) not the second (mobile). **

      10. Paste the Printfriendly Button code above the if you would like the button to appear before the post body

      …or

      11. Paste the Printfriendly Button code below the code if you would like the button to appear below the post body….. like I did.

      Delete
  18. Will backing up my blog delete all the settings?

    ReplyDelete
    Replies
    1. Hi Aimee - no it won't delete your settings...it's like making a copy of it and good to do on a routine basis!

      Delete
  19. Thank you for such a clear and helpful tutorial! It took me a while but I figured out what I was doing wrong. I saw that there were a few others that thought the button was not working and I thought perhaps the issue I was encountering might be the same for them. I followed the instructions on a couple of my blogs but it didn't seem to be working completely. But then I finally had an ah-ha moment. The button (I actually used the widget tool and it worked fantastic!) doesn't show up at the bottom of every post on a page (like the other social media icons do). It shows up when you select a single post. The button will appear at the bottom of the first post on a page but not the rest which led me to believe I was doing something wrong. If you use the widget it shows up in the blog "layout" but is only visible at the bottom of the first post on a page and then at the bottom of any post selected and brought up as a single page. Does that make sense? Thanks again!!

    ReplyDelete
  20. not seeing the 'expand widget template' button. I haven't edited my blog in awhile and it must've changed...

    ReplyDelete
  21. got it to work but had to follow the directions on the print friendly web page because pasting it after data post body didn't work...?!?! I posted it in line 5, right after 'head'

    ReplyDelete
    Replies
    1. Oh I'm so glad you have it working Shiloh! THanks!!

      Delete
  22. I tried many methods and followed your tutorial through and through, but the button is still not showing up. Any more tricks? Thanks for the clear tutorial though!

    ReplyDelete
  23. I followed your tutorial through and through, but the button is still not showing up. Any more tricks? Thanks for the clear tutorial though!

    ReplyDelete
  24. For anyone who has gone through my tutorial and have the printfriendly button working - congrats!! For those that are encountering problems - I really wish I could help but I don't know of a solution. I suggest you email printfriendly support to ask for their assistance. Their support email is: http://support.printfriendly.com/customer/portal/emails/new Thanks! ~ Heather

    ReplyDelete

Comments make my day! Really, they do! So drop me a comment and let's get the conversation going!