Wednesday, May 9, 2012

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 button style.
  • Click add code directly to template.
  • Copy the code in the text box that appears.

Step 2: Edit your blog's HTML template.

  • Log into your blog dashboard. 
  • Click Template on the left navigation menu. 
  • Click Edit HMTL below your blog thumbnail.
    *Dynamic Views templates doesn't allow editing your HTML. You'll need to use the classic Blogger/Blogspot Templates.

  • Click Proceed on the warning message.

  • An Editor will appear. Make sure to put a checkmark Expand Widget Templates


Step 3: Paste 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

29 comments:

  1. It is possible to make only one section of your blog print friendly?

    ReplyDelete
    Replies
    1. What do you exactly mean by one section?

      For both WordPress and Blogger/Blogspot, once you paste the PrintFriendly code, it will appear on all posts. There is yet no way to turn off printfriendly button on individual pages.

      Delete
  2. Hi there! I am having some trouble installing Print Friendly in the right location for my blog. I followed all the steps described in this post, but no matter where I place it, before or after , I keep getting the same message:
    Error parsing XML, line 1187, column 666: The element type "div" must be terminated by the matching end-tag "". By the way, it is working as an added widget HTML-Java Script, but it appears at the end of comments.
    Any ideas?

    ReplyDelete
    Replies
    1. Hi,

      Since you are having issues, I think it's best for you to try the simpler and easier method of adding PrintFriendly button to Blogger.

      Follow the steps described in this tutorial: http://support.printfriendly.com/customer/portal/articles/380160-add-printfriendly-button-using-blogger-s-built-in-add-widget-tool

      Delete
  3. "It is possible to make only one section of your blog print friendly?"

    Hi, I also interested in this question

    ReplyDelete
    Replies
    1. What do you exactly mean by one section?

      For both WordPress and Blogger/Blogspot, once you paste the PrintFriendly code, it will appear on all posts. There is yet no way to turn off printfriendly button on individual pages.

      Delete
    2. Say in our post body we have written our story as 5 paragraph. So is it possible to allow the users to only print the paragraph 4&5 only?
      It is useful in recipe blogs
      If you want an example check centercutcook.com, where you can print only recipe section? Is it possible to implement that feature in blogger?

      Delete
    3. You can add class="print-only" to any HTML element. PrintFriendly will only print that element(s) and the child elements. Can be added to multiple elements.

      Delete
  4. For sure, I will be enjoying using this printer friendly button. Thanks for the steps on how to install it. This really works!

    ReplyDelete
  5. thx a billion, exactly what i was looking for!!
    best rgds from germany.

    ReplyDelete
  6. I'm trying to have a label group and list of coupons. Each coupon has a print friendly button....but it will only print the first post in the label. Fixes?

    ReplyDelete
    Replies
    1. Add class="print-only" to the parent element. Class="print-only" will print the element and all child elements. You can also add class="print-only" to multiple sibling elements if needed.

      Delete
  7. What if you have a blog post that includes a recipe and a story and photos, but you want only the recipe to be printed and not the entire post. Is there a way to do that in blogger??

    ReplyDelete
    Replies
    1. You'd need to add class="print-only" to the HTML element containing the recipe.

      You can add class="print-only" to any html element(s). It will print only that element and any child elements. It can be added to multiple sibling elements as well.

      Delete
    2. Taylor where do you add the class="print-only" so it will print only recipe?

      Delete
  8. Hi there - I've got the printer friendly button appearing in the right place, but when I click on it the most recent blog is rendered - not the one I'm trying to print... Help!

    ReplyDelete
    Replies
    1. Sounds like you've installed the general website button.

      Make sure you select Blogger/Blogspot when you get the code at http://www.printfriendly.com/button

      Delete
  9. Hi I am hoping you can help me,
    I love your widget, added it fine, but then I decided to choose a smaller widget that suited me better.
    Doing things the way a woman only can, I chose another (thinking it would replace the last one :( ) and added it to my blog.
    Now I have 2 there, and I cannot find the code to remove either of them. I have reverted widgets but both still remain, I am at this point pulling my hair out!
    Thank you kindly for all your help :)
    Kind regards
    Natalie
    www.marigoldsloft.blogspot.com

    ReplyDelete
    Replies
    1. Hi,

      This should help.

      http://support.printfriendly.com/customer/portal/articles/353904-remove-print-friendly-button-from-blogger-blogspot

      Thanks.

      Delete
  10. I accidentally added two buttons, my Internet was slow and I didn't think it was working.
    How do I get the second or extra button off

    ReplyDelete
    Replies
    1. Please follow the instructions here:

      http://support.printfriendly.com/customer/portal/articles/353904-remove-print-friendly-button-from-blogger-blogspot


      Thanks.

      Delete
  11. Thank you very much! Took a little trial and error to get the placement right, but I would never have figured this out without your instructions.

    ReplyDelete
  12. Hi I have added the widget to the blog, but it does not seem to be showing up. Can you help?
    my blog is timwiggins.blogspot.com
    Thanks

    ReplyDelete
  13. i like the color of your blog :) nice .. thanks for having this ..

    ReplyDelete
  14. Is it possible to have multiple Print Friendly buttons on a page (not posts) created in Blogger? I have a Page I created to contain just recipes and want to give people the option to print individual recipes (by having a Print Friendly button at the bottom of each recipe) or print the whole page by clicking the Print Friendly button at the bottom of the page.

    If I put the class="print-only", then I'm not getting the behavior I want.

    Thanks

    ReplyDelete
    Replies
    1. Hi,

      You can take advantage of HTML and insert the button (Just the graphic image) and link that to the recipe URL which you want to print. Just make sure to add ?pfstyle=wp at the end of the URL so that when that recipe image is finished loading, PrintFriendly lightbox generates the preview automatically.

      I hope I got that right.

      Delete

Leave a Comment