The Coding Paparazzi

A question that often comes back on sites about Blogger is how to encode (or "parse") the four special characters " <> & that will often be found in the JavaScript code for Ads like Google Adsense, AdBrite, Amazon, etc... in order to make them acceptable for the Blogger's XML storage tool. This article shows a new way easier and faster than the usual recommended way to accommodate these special characters for their storage in an XML document such as the one used with Blogger's XML templating tool.

When you insert an announcement (Ad) in javascript in your Blogger template but that you leave aside the question of encoding the four characters "<> & you can find yourself, in some cases, with an error message identical or similar to the following example:

This will not always happen and will depend on where in the Blogger template you are trying to put the Ad and, of course, on the level and type of customization that you have already done with it.  You can find other examples of those error messages as well as additional information on this topic on "Parse HTML for Adsense Code and Blogger Posting", "Trick to Add AdSense, AdBrite and Other JavaScript Ad Code Directly to Blogger HTML Template" and "Trick to Add AdSense, AdBrite and Other JavaScript Ad Code Directly to Blogger HTML Template".

These error occur because a Blogger templates is stored in the format of a XML document and therefore, the four special characters "<> & must usually be encoded (if they are present) as their HTML entities: &quot; , &lt; , &gt; and &amp;.  This must be done weither or not they are used inside a piece of javascript code or in another location in the XML document; with one exception as explained below; this particular exception beeing used as the basis for the technique shown in this article. On some occasion, Blogger will do the conversion automatically for you - so you don't have to do it yourself - but this won't always happen and will depend on where you are trying to insert your javascript Ads.

In those cases where Blogger won't do the conversion for you, you must then do it either manually or by using a site such "Escape HTML - Blogrowds Resources" that will translate those specials characters present in your javascript Ads into their HTML entities.

Encoding these special characters individually works quite well but unfortunately, you can make mistakes if you do this operation manually or you must continually go on encoding site every time you want to make a modification to your Ads; something that will quickly become tedious if you want to change your ads regularly or to test different configurations.

However, another, simpler solution exists than individually encoding these characters: this would be to use the global escaping sequence of XML <! [CDATA [... ]]> around the javascript code. If you install this sequence the JavaScript code, between the <script>...</scripts> tags, it must itself be hidden from the view of the JavaScript parser by using one of the two javascript comments: // or /*...*/ :

But these ads are often composed of more than one single segments <script> ...</ script>.  Furthermore, the attribute for designing the language inside these tags can itself use the double quote " instead of the single quote; for example with « language="javascript" » or « type="text/javascript" » instead of « language='javascript' ».  Having to change them every time will be as tedious and error-prone than the other two previous methods.

Moreover, some of these affiliate programs prohibit to make any changes other than minor to the javascript code provided for their ads (reference: Tips and Tutorials to Make Money Online: Blogger How to ). Although I personally consider the previous amendments as minor and thereby, remaining within the limits of the terms of use for these ads, some people may not agree or simply have some fear to put their AdSense account or any other account with a restricted set of rules at jeopardy.

So the best solution would be to put the whole block - including the <script> tags themselves - inside the global escape sequence. In this way, no change at all whatsoever will be made to the provided javascript code for the ads. In fact, by doing this way, it will be even better than the usual way of encoding the individual characters "<> & because absolutely no change will be made to the code at all; not even a simple encoding of some of the characters.

To this end, a first attempt at a solution would be to simply try to write the sequence <! [CDATA [... ]]> directly around the block; as shown in the following example:

Unfortunately, the <[CDATA [... ]]> sequence will be seen by the browser and because of that, will be displayed on the screen; something that we don't want to see.  A second attempt could be to try to enclose these codes inside HTML comments:

But unfortunately (again!), the XML comments are identical to the HTML comments; so that in the previous example, the sequence <![CDATA[ ... ]]> will be interpreted as a XML comment by the Blogger XML template engine and will not be effective.

Finally, the real solution is simply to use javascript comments instead of HTML comments (or not comment at all) to hide to the browser the <![CDATA[ ... ]]> sequence:

In this example, both lines:

and:

will be seen by the browser as two separate javascript(s); each containing only a single comment so they will not affect the final result displayed. Moreover, as these are two separate scripts, you can put anything between these two; including other javascript tags!  Furthemore, those those tags can now contain anything, including the use of the double quote around the languge attribute.  Thre is now absolutely no limit to what you can put inside this global escaping sequence and this is not limited to javascript code.  For example, you could use to include an IMPORT statement inside the Blogger template; something that I will put to use in another article about using MathML with Blogger.

To facilitate reading the previous examples, I've put white spaces around the tags but of course, you can remove them if necessary.

Write these two lines at the beginning and the end of your ad's block might seems a little more complicated at first but remember that you don't have to edit or retouch them in any way whatsoever after that. All you have to do aftward is a simple Copy&Paste of the provied javascript code for the ad; without any modification or parsing to do and this, no matter what special characters these piece of codes could contain.

You can even, if you wish, put them in your favorite macros program to be pasted anywhere.  Ultimately, the maintenance of your ad units will be much easier and faster since you will not have to make any change anymore. All that will remain to do will be to remove a site such as "Escape HTML - Blogrowds Resources" from your list of favorite bookmarks!

You can see the final result on the demonstration site "Quick escape of javascript Ads on Blogger" where I've put four Amazon ads at different locations in the Blogger template - I did not formatted so you can well see that I put them anywhere anyhow:

Note: In this article, I used an ad from Amazon as an example instead of AdSense simply because changing the AdSense code in order to displayed it instead of running it - so that you can see the javascript code - goes against the Terms of Services (TOS) of AdSense; which are very strict. There is also the question of the limit of three AdSense ads by article that could have been a problem here.

But nevertheless, this technique will works as well with AdSense ads and its use does not go against the AdSense's TOS because you bring no change at all to the code itself or the way it is displayed on the browser.  This technique will also works with all other types of javascript ads because it leaves completely unchanged the code and in all cases, the code returned to the browser will remains completely identical to the original code provided with the ad.