Google 搜索联盟

2008年8月6日星期三

在XHTML1.1 Strict Doctype下xhtml+xml伺服的页面中投放阿里妈妈广告代码的方法

首先说明本文档仅面向W3C标准发烧友,当前99%的网站不会遇到这个问题,因为本文讨论的网页标准尚未得到广泛支持(IE6似乎不支持),同时也还不明 确当前版本是否将是以后获得普遍支持的最终版。如果您不是带着问题过来,或者对XHTML1.1 Strirt DocType这些名词不甚了解,可以先不看本文。
 
http://validator.w3.org/是校验文档是否符合相应标准的官方网页。
XHTML1.1 Strict Doctype下xhtml+xml伺服的页面中对于网页的要求已经非常的多,并不仅限于标签必须闭合、属性必须小写等传统的XHTML要求。还有例 如<head>元素内必须带有<title>,<body>元素内不能为空等等。
 
这种类型的网页在发布阿里妈妈广告时遇到2个主要问题,一个是JavaScript中document.write()函数失效,另一个是不支持<iframe>元素。
 
本着对广告主负责的态度,避免点击欺诈,任何互联网按效果付费广告提供商都不会让广告走出IFRAME。
 
为什么XHTML不支持document.write();可以参考:
http://ln.hixie.ch/?start=1091626816&order=-1&count=1
 
看来我们只有使用折中的办法解决这个问题,将Alimama广告放在一个不在xhtml+html伺服下此Doctype的单独页面的中。
 
例如 alimama_ad.html 代码如下:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title></title>
</head>
<body style="margin:0px;padding:0px">
 <script type="text/JavaScript">
 alimama_pid="mm_xxx_xxx_xxx";
 alimama_titlecolor="CC6600";
 alimama_descolor ="BEA87C";
 alimama_bgcolor="F0EFE3";
 alimama_bordercolor="AB9F70";
 alimama_linkcolor="779972";
 alimama_bottomcolor="F0EFE3";
 alimama_anglesize="10";
 alimama_bgpic="0";
 alimama_icon="0";
 alimama_sizecode="12";
 alimama_width=468;
 alimama_height=60;
 alimama_type=2;
 </script>
 <script type="text/javascript" src="http://a.alimama.cn/inf.js"></script>
</body>
</html>
 
此处注意一个细节body标签里面的style="margin:0px"必不可少,否则广告将不会紧贴页面左上角而会留出一定空隙。
 
再将这个页面通过object嵌入到XHTML页面中
例如index.xhtml代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
 <title></title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"></meta>
 <meta http-equiv="content-language" content="zh-cn"></meta>
</head>
<body>
 <object data="alimama_ad.html" type="text/html" style="border:0px;width:468px;height:64px;overflow:hidden"><p></p></object>
</body>
</html>
 
上面的代码已经经过W3C的测试没有问题。
需要注意如下细节:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
这段说明当前网页遵循xhtml1.1 strict (严格的) 文档定义标准
 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"></meta>
表明当前文档以application/xhtml+xml伺服,区别常见的html/txt的MIME类型
 
<head>内必须含有<title>元素
 
<object>对象内的<p>元素可以用<h1><div>等等替代但是不能为空
 
<object>对象的样式overflow:hidden防止嵌入页面出现滚动条
 
<object>对象的的高度要大于广告高度至少4px,否则safari浏览器中还是会出现滚动条,比如本测试页面广告尺寸是468x60,我们设置object的高度位64px。
 
<object>data属性指向广告承载页面alimama_ad.html地址,注意需要是和xhtml页面同域名下的地址,最好是相对路径。否则可能会影响广告匹配效果,从而影响收入。
 
满足了以上的细节,才可能在W3C测试通过的情况下正确的显示广告了。FireFox、Safari和Opera下都没有问题。
 
但是还没有完,因为IE下还不行。这就要求我们在Web服务器PHP、ASP或JSP等等服务器脚本端下功夫,将页面index.xhtml改造成动态的。
以php为例,我们需要判断MIME类型(也就是伺服类型)如果是application/xhtml+xml则输出<object>其他情况还是输出mama拿到的广告代码:
 
<?php if($mime == "application/xhtml+xml") {?>
 <object data="alimama_ad.html" type="text/html" style="border:0px;width:468px;height:64px;overflow:hidden"><p></p></object>
<?}else{?>
 
 <script type="text/JavaScript">
 alimama_pid="mm_xxx_xxx_xxx";
 alimama_titlecolor="CC6600";
 alimama_descolor ="BEA87C";
 alimama_bgcolor="F0EFE3";
 alimama_bordercolor="AB9F70";
 alimama_linkcolor="779972";
 alimama_bottomcolor="F0EFE3";
 alimama_anglesize="10";
 alimama_bgpic="0";
 alimama_icon="0";
 alimama_sizecode="12";
 alimama_width=468;
 alimama_height=60;
 alimama_type=2;
 </script>
 <script type="text/javascript" src=""></script>
<?php}?>
 
至此全部开发完成,其中细节较多任何地方出现问题都可能导致不完美的记过,有兴趣的朋友可以一试。

没有评论: