Adding a "Zap Read This" Button to Each of Your Blogger Posts

You will need to add the following code to your template:

<!-- Begin Zap Read This Button -->
<script langauge="JavaScript">
if(typeof intZapReaderCounter == "undefined") {var intZapReaderCounter=0;} else {intZapReaderCounter++;}
document.write('<div id="zapreader' + intZapReaderCounter + '" style="display:none;">');
</script>
<$BlogItemBody$></div>
<script language="JavaScript">
var strTextToZapRead = document.getElementById("zapreader"+intZapReaderCounter).innerHTML;
strTextToZapRead = strTextToZapRead.replace(/<br>/ig,"\r");
strTextToZapRead = strTextToZapRead.replace(/(<([^>]+)>)/ig,"");
strTextToZapRead = strTextToZapRead.replace(/"/g,"&quot;");
document.writeln("<p align='left'>");
document.writeln("<form action='http://www.zapreader.com/reader/' method='post' target='_blank'>");
document.writeln('<input type="hidden" name="PastedText" value="' + strTextToZapRead + '">');
document.writeln("<input type='submit' value='Zap Read This!'>");
document.writeln("</form>");
document.writeln("</p>");
</script>
<!-- End Zap Read This Button -->

If your template is like mine, this bit of code should go between the line that says:
<div class="blogPost">
and the line that says:
<$BlogItemBody$><br />

After adding that, Save Template Cahnges and then Republish your blog.

How the Code Works:

We begin with a comment just to separate out this section of code for easy maintenance or removal and begin a JavaScript code block.
<!-- Begin Zap Read This Button -->
<script langauge="JavaScript">

We will be using a variable named intZapReaderCounter to help distinguish between each post that is on the page. Because the code is inside the <Blogger> code block of the template this section of code will be repeated for each entry that appears on the page. The first time that we encounter this code, the intZapReaderCounter variable won't exist. We don't want to throw an error so we test to see if it exists by checking it's type. If it doesn't exist, then we set it's value to zero. If it does exist, then we increase the number by one.
if(typeof intZapReaderCounter == "undefined") {var intZapReaderCounter=0;} else {intZapReaderCounter++;}

We want to store the text for each blog posting inside a DIV so that we can access it later for our button. We'll use JavaScript to dynamically generate that DIV tag. For the first posting, the id of the DIV will be "zapreader0", for the second posting, the id of the DIV will be "zapreader1" and so on. We don't want the end user to see this second copy of the text so we set it's style to not display.
document.write('<div id="zapreader' + intZapReaderCounter + '" style="display:none;">');

We need to close this code block so that we can have the Blogger template insert in the text for the entry---the JavaScript will break if we try to render that text inside the SCRIPT tags. The <$BlogItemBody$> template tag renders this text. We need to close the DIV that we created too.
</script>
<$BlogItemBody$></div>

Now that we have the displayed the text for the posting in a hidden DIV, we are ready to access that text. We start another JavaScript code block and establish a string variable to hold the text, or innerHTML, for the post.
<script language="JavaScript">
var strTextToZapRead = document.getElementById("zapreader"+intZapReaderCounter).innerHTML;

Now we need to clean up the string a little bit. The next three lines replace andy HTML break tags with carriage returns (so that Zap Reader will know to pause extra long there since it's probably the end of a paragraph), strip out all the HTML tags, and replace any quotation marks with the " entity definition (so that we don't get errors when we use that string as the value in a hidden field later).
strTextToZapRead = strTextToZapRead.replace(/<br>/ig,"\r");
strTextToZapRead = strTextToZapRead.replace(/(<([^>]+)>)/ig,"");
strTextToZapRead = strTextToZapRead.replace(/"/g,"&quot;");

All that's really left is to render a form with a hidden text field. The form will use the post method to send it's contents to Zap Reader. We tell the form to open in a new window with the target attribute. The form field that contains the text for the blog post is named "PastedText".
document.writeln("<p align='left'>");
document.writeln("<form action='http://www.zapreader.com/reader/' method='post' target='_blank'>");
document.writeln('<input type="hidden" name="PastedText" value="' + strTextToZapRead + '">');
document.writeln("<input type='submit' value='Zap Read This!'>");
document.writeln("</form>");
document.writeln("</p>");

Finally, we close our JavaScript code block and add an HTML comment se we know where this whole section of code ends.
</script>
<!-- End Zap Read This Button -->

The above code was written on August 19-20, 2006 by Ricky Spears and is Copyright © 2006 by Ricky Spears and RS Innovative. Permission is granted to use and modify this code for use on your own blog, or in your own project, for the sole purpose of sending text to the Zap Reader program at www.zapreader.com.

This code was tested on Windows XP SP2 using Firefox 1.5.0.6, Internet Explorer 6.0 SP2, and Opera 9.1; on MacOS X 10.3.9 using Safari 1.3.2, Firefox 1.5.0.5, and Opera 8.5.