美化 Feedburner 邮箱订阅

发布于：电脑网络 1,901 次践踏

感谢Boss方小盆友，就在我文囧不知道今天更新啥的时候，Boss方解救了我，因为他问了我一个问题：“老万，你文章页侧边栏最下面那个输入邮箱订阅是咋整的？求教程。。”其实这个很简单，一句话就可以搞定的，既然我文囧，好吧，我就发挥一下我吹水的实力，把这一句话可以解决的答案拉扯出洋洋洒洒一整篇。

还没有玩过我右下角这个邮箱订阅的新老朋友们，可以先试试，放心吧，不是一键订阅的，输入邮箱后还需要一个确认的过程，所以你可以输入并点击确定试试，就算你不小心订阅了本站，也可以通过邮件取消订阅（一般上了我的贼船，想下船的比较难，HIAHIA～）玩过的朋友应该都发现了吧，这是 Feedburner，我们都知道 Feedbuner 已经不幸遇难，不过它的邮箱订阅功能居然奇迹般地存活了下来，简单说来，这个邮箱订阅就是借用了 Feedburner 的功能并且加以美化。具体地、罗嗦地、详细地方法如下：

1、跨墙登陆 Feedburner，怎么跨墙请 Google 之。有童鞋抱怨 Feedburner 没有中文版，这也没啥好抱怨的，人家一头撞在墙上，连吭都不吭一声，已经很伟大了。而且嘛，Feedburner 也不是没有中文版，只是汉化得比较烂，Feedburner 都不好意思公开。对英文不太友爱，又不嫌弃 Feedburner 这汉化水准的童鞋，可以尝试这个链接。

2、获取邮箱订阅代码。在 Feedburner 的设置中，选择 Publicize — Email Subscriptions — Subscription Management，选择 Feedburner 中文版的用户请对照执行。这时候会得到类似如下的代码：

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wange', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <p>Enter your email address:</p>
    <p><input type="text" style="width:140px" name="email"/></p>
    <input type="hidden" value="wange" name="uri"/>
    <input type="hidden" name="loc" value="en_US"/>
    <input type="submit" value="Subscribe" />
    <p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
</form>

但是懂一些 HTML 知识的同学应该不难看出，其中关键的有用的部分就只有 form 标签里的那一行，把它提取出来，其余全部扔掉。

3、美化邮箱订阅代码。美化的方法当然各有不同，我就根据自己的主题，修改觉得比较合适的样式，仅供参考：

<form style="height:40px;position:relative;padding:3px;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wange', 'popupwindow', 'scrollbars=yes,width=350,height=520');return true">
    <input type="text" style="width:220px;height:25px;position:absolute;left:20px;line-height:25px;font-family:'Courier New','Lucida Console','monospace';padding:5px;border:1px solid #ccc;" name="email" value="请输入您的邮箱" onfocus="if (this.value == '请输入您的邮箱') {this.value = '';}" onblur="if (this.value == '') {this.value = '请输入您的邮箱';}"/>
    <input type="hidden" value="wange" name="uri"/>
    <input type="hidden" name="loc" value="en_US"/>
    <input type="submit" style="width:60px;height:35px;position:absolute;right:20px;" value="确认订阅" />
</form>

比较懒，样式都内联了，童鞋们不要学我。不过这有一点方便，就是这么一坨代码扔哪里都可以，就算删掉，也不用担心有残留在样式表里的 CSS，我就把这串代码放在 WordPress 的小工具里，当然放在 sidebar.php 也是可以的。最后上一张效果图，顺便打个小广告：小站订阅方式多多，不仅可以通过这个邮箱订阅，还可以通过 http://feed.wange.im 这个网址订阅我哟～还等什么，快上贼船吧！