巧用“QQ邮件列表”为自己的网站加入邮件订阅功能

作者:LuckyMoke 时间:2013-02-18

很多网站都要用到邮件订阅功能来让用户更便捷的获取到网站的最新动态,如果要在自己的服务器上搭建一个邮件订阅服务还要浪费空间带宽等等。 其实“qq邮件列表”就是一个简单的邮件订阅服务。可是它官方的插件样式只有简单的两种。有时候很不符合整体网站的效果。这篇文张不只是说qq邮件订阅服务好,目的是教站长巧妙的改掉qq邮件订阅的js插件,使订阅框的显示更加的符合整体网站的效果。

一、创建站点

  1. 首先登陆http://list.qq.com/为自己的网站创建一个站点

  2. 获取订阅插件有图片模式和代码模式这里我们选择代码模式,可以获取到下边这段代码:

小小酥的宅路历程

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

二、修改订阅代码

接下来就是整篇文章的重点了

我们不着急将代码插入到网站中去,首先在浏览器中下载上边代码中的http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js这个js。

if(typeof(nId)!=null&&typeof(sColor)!=null&&typeof(nWidth)!=null&&typeof(sText)!=null)
{
document.write(
[
"<style>",
".rssbook{padding:10px 15px;overflow:hidden;zoom:1;background:#f6f6f6;border:3px solid #ddd;}",
".light{background:#f6f6f6;border:3px solid #ddd;}",
".dark{background:#aaa;border:3px solid #666;}",
".mailInput{margin-top:5px;}",
".rssbook .info{color:#666;font-size:12px;}",
".light .info{color:#666;}",
".dark .info{color:#fff;}",
".rssbutton{float:left;border:1px solid #698ab4; -moz-border-radius:3px;border-radius:3px;-webkit-border-radius:3px;}",
".dark .rssbutton{border: 1px solid #585858;}",
".rssbutton input{background: #77a0d1;border: 1px solid #88b3e6; color: #FFFFFF; cursor: pointer;font-weight: bold;width:90px;display:block;height:22px;line-height:22px;*line-height:19px;text-align:center;}",
".dark .rssbutton input{background:#676767;border: 1px solid #777;}",
".rssbutton input:hover{background:#86b4eb;text-decoration:none;}",
".dark .rssbutton input:hover{background:#797979;border: 1px solid #939393;}",
"input.rsstxt{width:100%;height:20px;font-size:14px;padding:2px 3px;-moz-border-radius:3px;border-radius:3px;-webkit-border-radius:3px;border:1px solid #ccc;;border-color:#7c7c7c #c3c3c3 #c3c3c3 #9a9a9a;margin-bottom:5px;}",
".dark input.rsstxt{background:#eee;}",
"</style>",
"<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(""));

}
else
{
alert("nId empty");
}

打开js,就是这个js控制了整个订阅插件的样式。那这就简单了,我们可以自行修改一下,把修改后的js融合到我们网站的js中,就可以使用自己的订阅框样式了,说起来很简单,我们实际来做一做。 3.自己用html做一个符合自己网页风格的订阅框样式,例如:

小小酥的宅路历程

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>订阅框</title>
</head>
<style>
.rsstxt{border:#CCC 1px solid; padding:3px;}
.rssbutton{background-color:#00aec8; border:none; padding:3px 5px;; cursor:pointer; color:#FFF;}
</style>

<body>
    <div class="mail" id="mail"></div>
	<div class="mailInput">
		<input class="rsstxt" type="email">
    	<input class="rssbutton" type="submit" value="订阅">
    </div>
</body>
</html>

接下来我们将下载的js替换成我们的东西。(这里一定要注意javascript的代码格式啊,要仔细的修改!)

if(typeof(nId)!=null)
{
document.write(
[
"<style>",
".rsstxt{border:#CCC 1px solid; padding:3px;}",
".rssbutton{background-color:#00aec8; border:none; padding:3px 5px;; cursor:pointer; color:#FFF;}",
"</style>",
"<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=""/>",
"<input type="submit" class="rssbutton" value="订阅">",
"</form>",
"</div>"].join(""));
}
else
{
alert("nId empty");
}

将调用代码改成自己需要的

<!--QQ邮件列表订阅嵌入代码-->
<script >
var nId = "f5134e160f9181b35b551b784d087c174f788c368f735510"
;;
</script>
<script src="mail.js" charset="utf-8">//切记编码要改成utf-8格式的(如果出现乱码可改为gb18030),js的地址就是你修改后的js的地址</script>

只用在网页中要插入的订阅框的地方放上这段代码一切就都OK了,

 最后

如果你觉得还是有点繁琐,自己搞不定,我也可以帮助你定制修改代码。


Tips

GitHubLuckyMoke

Weibokeailvyou

QQ839488083

米拓交流群

模板有不完善的地方欢迎指正!

1511438794807394.jpg