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

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

You will need to add the following code to your TypePad template module (which only is available to TypePad Pro users):

<script type="text/javascript">  </script> <$MTEntryBody$> <script type="text/javascript">  </script>

This section should be placed before the existing <$MTEntryBody$> tag in your template.

This script assumes that you want to use a graphical button like this one: . You will ned to save this image to your hard drive, upload it to your blog's site, and then place the path to that image in the code above where it says: src="[put http location of zapreadthisbutton.gif here\]zapreadthisbutton.gif". If you prefer to have a simple HTML button without the picture, simply replace that entire line of the code with: document.writeln("<input type='submit' value='Zap Read This!'>");

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.
 <script type="text/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 <$MTEntryBody$> template tag renders this text. We also need to close the DIV that we created. We close it with JavaScript since we started it with JavaScript.
</script> <$MTEntryBody$><script type="text/javascript"> <!-- document.write('</div>');

Now that we have the displayed the text for the posting in a hidden DIV, we are ready to access that text. We'll establish a string variable to hold the text, or innerHTML, for the post.
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,""");

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="image" src="[put http location of zapreadthisbutton.gif here\]zapreadthisbutton.gif" alt="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> 

The above code is a modification of my script for Adding a "Zap Read This" Button to Each of Your Blogger Posts which was written on August 19-20, 2006 by Ricky Spears. Special thanks goes to Marjolein Hoekstra for modifying my original code to work with TypePad and for making changes to make it more compliant with web standards. You can visit Marjolein's blog (and see this script in action) at http://www.cleverclogs.org/. If you would like to thank Marjolein for her hard work, or you would like her support, you can reach her via Skype ID: Chopianissima. All code and text on this page 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.