PetitOn

Thoughts on anything on my mind

• Home
• On PetitOn
• Google Earth
• Contact
• Tutorials
• PetitPub

XHTML Aware AdSense Saturday 2006-02-25

I have been pretty preoccupied with the redesign of my WordPress theme lately, but today I decided it was time to check my blog for XHTML compliance. As expected I got a lot of errors, but knowing that error multiply when the W3C service parses a page, I wasn’t that worried. I should have been though, as I came to learn.

The first bunch of errors came from my Google AdSense text links in the header an my skyscraper ads in my left sidebar.
Google delivers these ads using a JavaScript that, you cut and paste into your template. The script contains an array of parameters for size and colors and a function that requests the ads from Google. When called the function delivers an iframe that’s inserted in the page. Nice and simple, but the W3C XHTML evaluator doesn’t like it one bit, but spits out a bunch of complaints. Knowing something about XML, I felt sure that encapsulating the meat of the script in a CDATA section would be a quick and easy solution. CDATA is supposed to tell an XML parser to leave the content alone, and make no interpretations but just move it from the indata stream to the outdata stream, stripping the CDATA envelope.
<script language="JavaScript">
  <![CDATA[
   <!-- Adsense here -->
  }
  ]]>
</script>
With this markup, whatever goes between the <![CDATA[ here ]]> should be sent to the resulting document untouched, and the document should validate. No it did not! In my eager search for an explanation I came across this article by Stu Nicholls at CSS Play. He gives a workaround using the object inclusion tag to embed an external non XML document of type text/html. This plain HTML document contains the AdSense script and data. With the ads incorporated in this rather dirty way, the document should validate.
Stu also refers to an article “Making AdSense Work with XHTML” at Keystone Websites, where the author also discusses content negotiation and delivery of different markup depending on the target browser.

AS a background the have an article by Ian Hickson, who gives an explanation of why the AdSense code doesn’t work well with XHTML. It turns out that the Javascript function document.write(), responsible for writing the ads to the page, once it is executed on the client side, is not allowed in XHTML. To make thing worse, the JavaScript writes out an iframe containing the ads, and iframes are not allowed in the XHTML. In short, we have to externalize this ads. we could write the external old fashioned HTML file and add the object inclusion tag to our template, or use a ready made plugin.

In my search for explanations and solutions, I found a plugin called “Google AdSense Injector” at lambcutlet.org, that uses the technique discussed above. It uses content negotiation to insert the object tag if the produced document is application/xhtml+xml and just copies the code as is if the type is text/html.
I installed the plugin, and it seems to work. At least I got rid of all validation error for the AdSense inclusion.
I also realised that other widget I have on my blog, are delivered without any thought of standards compliance. My little button plugging for Firefox, has a query string in its callback to Mozilla.org containing parameters. As is usual in queries, the parameters are delimited by an &-character or ampersand. This has special meaning to XML parsers and are interpreted. My attempt to hide the ampersands from the prying eyes of the validator, by encapsulating the whole callback url in a CDATA section was in vain. the only solution was to use the entity &amp; in the url.

Another really hard problem is the Flickr badge in my left sidebar. It is also included using JavaScript, but the same approach as for AdSense didn’t seem to work. The code is fairly involved with a mix of JavaScript code and CSS in-line styling. I tried to take the badge apart and move the style rules to my stylesheet, but that broke the badge.
Integration of services from near and far shows that there is a long way to go before we can easily be standards compliant. As for the Flickr badge it seems impossible, but luckily Flickr has an API, and it should be possible to write  code to integrate Flickr objects in a standards compliant way. But that’s another story.
Over and out.

• Posted in : The Internet, WordPress
• Author : Petit