JavaScript Widgets Within a Blogger Post

When adding the Amazon song-preview widget to my last post, I ran into two problems specific to Blogger. Since I'm probably not the only Blogger blogger who uses Amazon Associates widgets or any other kind of JavaScript widgets within posts, I thought I'd share the problems and solutions here.

Amazon does offer an "Add to Blogger" option for widgets, but it adds them to your blog's sidebar. If you want to tie a widget to a specific post, you'll have to copy-and-paste the code manually. When I did this, the widget didn't display at all even after the post was published. (It's normal for them not to display in Preview or Compose mode, since <script> tags are suppressed in these modes.)
Viewing the source revealed that the script was showing up with the following code:

<script type='text/javascript'><br />
var amzn_wdgt={widget:'MP3Clips'};<br />
amzn_wdgt.tag='lifuse-20';<br />
amzn_wdgt.widgetType='ASINList';<br />
amzn_wdgt.ASIN='B000QNP43O,B000V66WOQ,B000XQ713K,B0011YDBJQ,B001208YGE,B00120AXQI,B00120EIXC,B00122WWQA,B001232JUS,B001208YLO';
<br />
amzn_wdgt.title='Preview 10 of these songs at Amazon';<br />
amzn_wdgt.width='250';<br />
amzn_wdgt.height='250';<br />
amzn_wdgt.shuffleTracks='True';<br />
amzn_wdgt.marketPlace='US';<br />
</script>

The same thing was happening in the other <script> tag Amazon provided. As far as browsers' JavaScript interpreters were concerned, every line started with <br />, which isn't valid JavaScript at the beginning of a line. But how had the <br />s gotten there? I opened the post in "Edit HTML" and they weren't present.

Eventually, I determined that the culprit was the "Convert line breaks" option (Settings > Formatting). The description Blogger provides is a bit misleading:

If Yes is selected, single hard-returns entered in the Post Editor will be replaced with single <br /> tags in your blog, and two hard-returns will be replaced with two tags (<br /><br />).

This doesn't affect hard returns in Compose mode, which are converted to <br /> tags whether this box is checked or cleared, but it does affect them in Edit HTML mode. Uncheck it if you paste code from other sources into your posts and that code includes line breaks.

Turn off "Convert line breaks", and your widget should now be displaying. You won't even have to delete the breaks already present, because this option is applied retroactively. Note that if you've been using "Convert line breaks" for previous posts, you may need to go through your archives and check that your posts still have paragraph breaks in the right places! If not, go into Edit HTML mode and add <br /><br /> to each blank line where a paragraph break is missing.

In my next post, I'll describe how to get the widget sensibly positioned.

JavaScript Widgets Within a Blogger Post