PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Blogger Users-Enable Readers to Save Posts to PDF using Web2PDF Online

Posted by on 14th May 2009 | 1 comment

pdf_altOne of the most interesting and useful Blogger hacks I’ve recently discovered is the ability to save Blogger posts to PDF. In my own blogs, I tend to write long posts and tutorials, so I feel it benefits my readers to save or print off these articles for later use. So after stumbling across Web2PDF Online, I immediately set to putting this free service to good use.

Web2PDF Online offers a free service for bloggers and web publishers which enables a button to be placed on pages of your site; readers of your site can then use this button to convert your blog pages to a PDF document and save it to their computer or print off for later use.

There are two main options for adding the Web2PDF button to your Blogger powered blog:

  1. Use the generated Javascript to add a default button
  2. Customize the script to add a text link or the button of your choice.

The default button looks like this:

save_as_pdf

Whereas the customized script can enable any icon, button or text link you choose.

In this post, I’ll explain both of these methods and how they can be applied to Blogger templates to enable readers to save your Blogger posts as PDF documents to their computer.

First, you’ll need to create a free account with Web2PDF Online

In order to use this free service, you will need to create a free account with Web2PDF Online. This takes only a few moments, and will generate your “User ID” which you would certainly need if customizing your own “Save to PDF” button.

To create your account, simply visit this page and fill in all nescessary details. You will need to include the URL of the blog you want to place the button in, to be able to use the API correctly.

Once you have completed registration, make a note of your username and password to be able to log in and generate your scripts.

Generate a default button (the easy option)

By far the simplest option to enable your posts to be saved as PDF files is to use Web2PDF’s JavaScript generator. This will generate the correct JavaScript code to add to your template and uses the default button pictured above.

To generate this script, log in to Web2PDF Online; the first page you will encounter is the “Overview” page where you can set the options used to save your PDF and even preview how this will look by inputting the URL of pages in your blog:

pdf-online-generator-blogger

Copy the JavaScript code generated by the wizard to your clipboard (or paste into a simple text file for later use).

Next, go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the “Expand widget templates” box. Then search for the following tag in your Blogger template’s mark-up code:

<data:post.body/>

This tag is likely to be surrounded by <div> or <p> tags; we simply need to locate the line in which this is located.

Once you have found this line in your template, paste the code generated by Web2PDF Online on the line immediately after this tag, and save your template.

This will enable the “Save to PDF” button to appear directly after your Blogger posts on each page of your blog so readers can easily save your posts to their computer.

Another alternative is to paste the Web2PDF JavaScript code in an HTML/JavaScript widget in your sidebar. This enables the button to operate in the same manner, though your readers may not find the button so easy to access. If you’re content editing your blog’s HTML code you could play with the location of your button in different areas of your template (there are too many places and styles of Blogger template to explain each process here!).

How to add a customized button or text link for saving Blogger posts to PDF

For me, this method was far more difficult to master since there are no working instructions available on the Web2PDF site applicable for Blogger templates. After reading through Pixobte’s tutorial, I was able to modify the suggested script and finally made this function correctly for the highly modified Blogger templates in which I have tested this code.

In order to add a customised button or text link for your Blog readers to save your posts to PDF files, you will need to use your unique Web2PDF reference.

This can be found when you generate the JavaScript for a default button: take a look in the code to find the long reference which consists of letters and numbers, like this (highlighted in bold red):

<!– START: PDF Online Script –>
<script type=”text/javascript”>
var authorId = “C39A0A6A-25E7-4CEF-80923-3E490B33A4B4“;
var pageOrientation = “0″;
var topMargin = “0.5″;
var bottomMargin = “0.5″;
var leftMargin = “0.5″;
var rightMargin = “0.5″;
</script>
<script type=”text/javascript” src=”http://web2.pdfonline.com/pdfonline/pdfonline.js”>
</script>
<!– END: PDF Online Script –>

Copy this unique reference to your clipboard and then paste in a simple text file for later use. It is important that you use your own unique ID number, based on the website URL you added when registering with Web2PDF Online. ID’s which were generated for a different URL will not function correctly!

Once you have got your unique ID, you need to copy the following section of code, replacing “your-unique-id” (highlighted in bold red) with your unique reference number:

<a expr:href=’&quot;http://savepageaspdf.pdfonline.com/pdfonline/pdfonline.asp?cURL=&quot; + data:post.url + &quot;&amp;author_id=your-unique-id&quot; + &quot;&amp;page=0&quot; + &quot;&amp;top=0.5&quot; + &quot;&amp;bottom=0.5&quot; + &quot;&amp;left=1.5&quot; + &quot;&amp;right=1.5&quot;’ target=’_blank’>Save as PDF</a>

Paste this section of code (including your unique ID number) just below the line including the <data:post.body/>tag in your Blogger template as explained above.

This enables your readers to click on a text link to save your posts as PDF files to their computer, which will appear in your template like this:

web2pdf-blogger-example

To get a better idea of how this would appear in our template, take a look at Glamumous where this is implemented on each post page.

Those of you who would prefer to use a custom icon instead of the cumbersome default icon provided b Web2PDF, it is possible to add our image as a link instead of the text link.

To do this, you’ll need to upload the icon/buttom image you would like to use to an image host. Then replace “Save to PDF” in the code above (highlighted in bold blue) with the image tag referencing your image’s location, like this:

<a expr:href=’&quot;http://savepageaspdf.pdfonline.com/pdfonline/pdfonline.asp?cURL=&quot; + data:post.url + &quot;&amp;author_id=C39A0A6A-15E7-4CEF-8033-3E490B33A4B4&quot; + &quot;&amp;page=0&quot; + &quot;&amp;top=0.5&quot; + &quot;&amp;bottom=0.5&quot; + &quot;&amp;left=1.5&quot; + &quot;&amp;right=1.5&quot;’ target=’_blank’><img  src=’http://lh6.ggpht.com/_xn2gmPb9TfM/SgwTsrG3VdI/AAAAAAAAEFU/1Apl6eOrRRc/pdf_alt_16x16.png’ /></a>

This will display a customized icon in place of the text link. You can take a look at this in action beneath my posts on Blogger Buster, like this:

custom-pdf-buttom-blogger

Final thoughts

I hope this tutorial has provided you with sufficient knowledge to be able to add your own “Save as PDF” buttons or text links to your Blogger powered blog. For those of you who write tutorials or otherwise length posts, this may well prove a useful means of enabling visitors to download your content for later use.

Please feel free to let me know of any other similar services you have encountered by leaving your comments below.


Amanda is a freelance blogger and web/blog designer. She writes about Blogger at www.BloggerBuster.com and maintains several other blogs on various subjects.

1 comment - Leave a reply
  • Posted by sunil on 7th Jun 2009

    blogger doesn't accept these codes……giving error…