Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSAdding AdSense to application/xhtml+xml pages

Date : Pre 2006

For all modern browsers




A method of adding AdSense to xhtml+xml pages. See the 'Information' section below.



Information

You've applied and been accepted by Google to add AdSense to your site but, because you are serving your pages correctly as application/xhtml+xml, the ads are failing to display.

Well this is how I did it, based on Making AdSense work with XHTML but a bit simpler.

The fact that you can see the 'ads by Goooooogle' above means that it works.

Google AdSense uses the JavaScript function document.write() for the ads and when XHTML is served as 'application/xhtml+xml', document.write() doesn't work. Also the ads are embedded in an iframe, which is not allowed.

To overcome this I created a separate code snippet which includes the javascript and a little styling, and embeded this in my page using the object tag.

See the article at 456bereastreet for Google's ok on this method.

I have also contacted Google to confirm that this method does not break any rules and have received this reply from James (The Google AdSense Team) 'Your implementation appears to be compliant with our program policies at this time.'

Internet Explorer

If we use the same code for Internet Explorer it will display correctly, BUT the links will open in the object tag NOT as intended in the main browser window.

To get around this I have added one conditional comment style to remove the object from Internet Explorer's display and another conditional comment to place the adsense code directly in the page. These conditional comments are hidden from all other browsers.

The code snippet - ads.htm

<body style="overflow:visible; border:0px; padding:0; margin:0;">
 <script type="text/javascript">
<!--
your Adsense parameters here
//-->
</script>
 <script type="text/javascript" 
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 </script>
</body>

xhtml

<div id="ads">
<object data="ads.htm" type="text/html" 
 width="468" height="60">
</object>
</div>

Change the width and height to suit your selected ad format.

Style the "ads" div as you wish, or simply not use it.

Conditional comment #1

Put this in the <head> </head>

<!--[if lte IE 6]>
<style>
#ads {display:none;}
#adsie {clear:both; text-align:center; 
width:750px; margin-top:10px;}
</style>
<![endif]-->

Conditional comment #2

Add this beneath the 'ads' div

<!--[if lte IE 6]>
<div id="adsie">
<script type="text/javascript">
your Adsense parameters here
</script>
<script type="text/javascript" 
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<![endif]-->

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

  1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
  3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page