如何高度自定义 QQ 邮件列表外观样式

2012/12/10 日补充: 这种方法目前已经失效,由于腾讯采用了某些方法,导致 nid 的值是动态变换的,使用这种方法,无法正确的订阅你的频道。具体的解决方法,正在测试中,暂时不要使用下面这种方式。

首先先来了解一下 QQ 邮件列表是什么。

QQ**邮件列表是一项免费的群发邮件服务。通过它,您可以在网站上加入订阅入口,来获取您的订户用户订阅后,就能方便的给他们群发邮件了。如果你写博客,它能自动将最新的博客文章发给读者。如果你开网店,可以用它批量通知顾客店铺的最新优惠。 如果你正管理一个组织**,通过它,能快速向组织成员发布公告。使用 QQ 邮件列表,让您的邮件发得更多、更快、更准!
总之,这是一个让帅哥更帅,让美女更美,让垃圾邮件正常群发的腾讯唯一几个免费的服务。很多网站上,都有 QQ 列表,你可以输入邮箱来订阅网站内容,站长就可以发一些资讯到你的邮箱里。

我们知道,添加这个服务,就需要申请代码,然后把代码放到网站上。但是,它生成的外观样式,并不一定符合我们网站的风格样式,本文潜行者 m 就要跟大家一起分析一下他们的代码,然后进行自定义修改,来符合自己网站的风格。获取代码有两种形式,一种是图片的形式,另一种是一个文本输入框,直接填写上邮箱提交。下面潜行者 m 一一分析。

图片形式:

图片形式,他们允许定义一些简单的参数:

我们看一下生成的代码

<!--QQ邮件列表订阅嵌入代码--><a target="_blank" href="http://list.qq.com/cgi-bin/qf_invite?id=55c8d4cfd86c2322b0da011d72769e61e8a471a03fa52b74">
<img alt="填写您的邮件地址,订阅我们的精彩内容:" border="0" src="http://rescdn.list.qq.com/zh_CN/htmledition/images/qunfa/manage/picMode_light_l.png"/></a>

从代码中,就可以看出,很简单的两个标签。使用了一个 a 标签,包裹了一个 img。而这个 img 指向的图片地址就是http://rescdn.list.qq.com/zh_CN/htmledition/images/qunfa/manage/picMode_light_l.png。这样,我们修改这个图片地址成我们自己准备好的地址就可以了。同时我们还可以加上一些css代码等等。只需要a标签中的href属性为http://list.qq.com/cgi-bin/qf_invite?id=55c8d4cfd86c2322b0da011d72769e61e8a471a03fa52b74即可,因为这个地址是我们订阅的填写页面。

代码方式:

代码方式要稍微麻烦一点,但是省下很多功夫,因为用户不用再打开一个页面去填写邮箱了。

我们再来看看代码:

<!--QQ邮件列表订阅嵌入代码-->
<script >
var nId = "3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435",nWidth="auto",sColor="light",sText="填写您的邮件地址,订阅我们的精彩内容:" ;;
</script>
<script src="http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js" charset="gb18030"></script>

这段代码里,上面那一句是定义了几个参数,其中 nID 参数,是你这个订阅频道独有的,要传输到下面的 qfcode.js 使用。那这个 qfcode.js 文件的内容是什么呢?直接打开http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js这个文件看一下就知道了。由于代码比较多,我把关键代码提出来:

"<div class="rssbook ",sColor,
" " style="width:",nWidth," "><p class="info">",sText,"</p>",
"<div class="mailInput">",
"<form action="http://list.qq.com/cgi-bin/qf_compose_send" target='_blank' method='post'>",
"<input type="hidden" name="t" value="qf_booked_feedback">",
"<input type="hidden" name="id" value="",nId,"">",
"<input  id="to" name="to" type="text" class="rsstxt" value=""/>",
"<div class="rssbutton"><input type="submit" value="订阅"></div>",
"</form>",
"</div></div>"].join(""));

这些代码的意思,就是说,在页面中输出了一个表单(form),它提交的地址就是http://list.qq.com/cgi-bin/qf_compose_send,表单里面有三个input元素,其中两个是隐藏的,用来发送参数的,有一个是发送填写的邮箱的。这两个隐藏表单中发送的内容,就是你的nID等。

好,弄清楚了这个,我们就按照自己的风格,动手做一个表单,然后根据它的这个表单,填写上参数,进行提交就可以了。目前,从这个代码中,潜行者 m 提取出以下几个信息:nID 3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435 、 POST http://list.qq.com/cgi-bin/qf_compose_send。那现在我们自己写一个提交表单。

<form action="http://list.qq.com/cgi-bin/qf_compose_send" target="_blank" method="post">
<input type="hidden" name="t" value="qf_booked_feedback" />
<input type="hidden" name="id" value="3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435" />
<input type="text" id="to" name="to" value="" placeholder="输入你的邮箱" />
<input type="submit" value="订阅" /></form>

这样就可以了,我们只要填写上,点击订阅,就会订阅了。我们自己写出了这个表单,然后再对其应用 css 修改它的样式,来符合我们网站的风格,这样就大功告成了。