十分钟内学会：让你的博客文章也有机会成上Digg头版[转载] JavaScriptSocialCSSFacebook浏览器
今天看到Cat in dotNET 的一篇好文章，不敢独享，现转载到这里。望对大家有所帮助。
原文地址：http://www.cnblogs.com/cathsfz/archive/2006/12/16/594463.html
是否非常羡慕别人的文章有机会冲上Digg头版，接着带来大量的访客呢？是否也希望自己的文章也能受到链接的宠爱，从而获得更高的PageRank呢？好，跟我来，让我帮你把文章接入到Social Software中。
首先，你知道Social Software是什么吗？从广义上来说，就是能够让人们联系或聚集到一起的软件，老式的邮件列表或者新闻组也算是，然而通常我们用它指现代的blog和 wiki平台。我们正在写的博客也算是Social Software，然而它还不够sociable，例如我们在博客园最多也就能把文章发布到首页，所以我们需要一个更加大范围的平台，例如Digg，而把你的网站接入到Digg仅需一个按钮--"Digg This!"按钮。
Digg This?
想象一下，你的访客来了，他觉得你这篇文章真是非常有价值，希望分享给其他人看，然后他就想点下那个写着"Digg This!"的按钮。慢着，按钮在哪？这位访客发现他当前用的这个浏览器没有这个按钮，你的文章页面上也没有这个按钮。要自己跑去Digg点击提交文章，然后把地址和标题复制粘贴过去，这多麻烦啊，所以他直接放弃了这个想法然后关掉了当前页。找不到"Digg This!"按钮的事情让访客感到沮丧(frustrated)，他也就没心情看下去了，这样就跑掉了一个访客，多可惜啊。
网站上的文章可以不好，但网站导航不能不好，让访客感到沮丧可是一大忌。什么是沮丧？我们来查一下frustrated，其意思就是你很想做一件事情然而总是有些障碍让你无法绕过去也无法达成目标。对于网站导航来说，让访客沮丧的情况通常发生在访客认定他要的信息或者功能就在你的网站上，然而通过链接导航或者搜索导航都无法到达目标。一个好的网站应该尽量提供用户所期望的信息和功能，并且提供清晰的导航，既然访客可能需要"Digg This!"按钮，我们就应该提供给他们。
TechCrunch上个星期有条新闻标题为New York Times Surrenders To Social News，意思是"纽约时报向社会化新闻投降"，说的是New York Times网站上面部分版面的文章已经加入了共享功能，包括把文章共享到Digg、Facebook和Newsvine的链接。既然连New York Times这样的传统媒体巨头也加入了"Digg This!"按钮，我们又怎能不加？
一个按钮就这么简单
要加一个"Digg This!"按钮其实很容易，参考官方的帮助你就知道这仅需如下格式的一个链接：
http://digg.com/submit?phase=2&url=&title=&bodytext=&topic=
其中url参数用于传递地址，title参数用于传递标题，这两个最好就是文章原本的地址和标题。bodytext参数写你的推荐原因，topic参数表示推荐到的Digg栏目，这两个参数通常不在链接中提供而让读者到了Digg的提交页面后再填写。这四个参数都应该经过UrlEncode。
如果使用Blogger之类的支持HTML模板的引擎，要放上一个这样的链接很简单，直接写一个链接然后加上模板所支持的参数替换就能把url和title两个参数搞定，可惜博客园的.Text引擎不支持HTML模板，也不支持参数替换。这样就沮丧啦？如果是的话，你的一群读者要跟着你一起沮丧了。我们还是一起努力把这个链接搞定吧，就一个链接而已，能够有多难？
Do It Yourself
你确认你是一个很有hack精神并且乐于DIY各种小玩意儿的人？那就跟我一起制作适用于博客园的"Digg This!"链接吧。如果你想先预览一下效果，可以看看本文正文下方的那个"Digg This!"链接。
我这里为大家提供了一个用于自动添加"Digg This!"按钮的JavaScript，这段代码是我昨天花了两个小时调试出来的，能够在我当前使用的博客园模板上自动为文章页添加"Digg This!"链接。在博客园的设置中找到"页脚Html代码"这一栏，把代码贴进去就行了，别忘了要用<script type="text/javascript"></script>把代码包装起来。我不能确保这段代码一定能在你当前使用的模板上正常运行，所以这需要你有一定的JavaScript基础和DIY精神，根据你的实际情况作一些修改。
在这里我可以解释一下这段代码的工作方式：通过对比首页的HTML和文章页的HTML，我发现了文章页的标题链接有一个特有的class="singleposttitle"属性，我就通过这个属性是否存在检测当前页面是首页还是文章页。代码执行时会循环迭代页面上所有的文章节点，如果它确认当前的是文章页，它就在第一个文章节点的尾部追加一个<div />上去，然后添加"Digg This!"等的链接。
之所以要求你有一定的JavaScript基础和DIY精神，是因为我发现不同的模板输出的HTML结构差异非常大，你必须手动分析你当前所使用的模板输出的HTML，然后编写正确的JavaScript去识别页面性质并执行添加链接的任务。而且你对页面的添加功能需求细节可能和我不同，我的代码中有一句anchor.style.fontSize="14pt";是用于将当前文章标题链接放大的，可能你并不喜欢那么大的标题文字，也可能你希望在页面中别的地方添加"Digg This!"链接，这都依赖于你的JavaScript编写能力了。
还有更有趣的吗？
如果你不仅仅希望有"Digg This!"按钮，还希望有"Add to del.icio.us"、"Share on Facebook"、"Google Bookmark This"等按钮，你都可以自己加。分析第三方服务的调用方式不难，分析HTML结构特征也不难，你需要的就是一点点的DIY精神加上了解新鲜事物的激情，然后一切都会变得十分容易。
前一段时间我在TechCrunch见到Snap的网页截图预览功能，然后就放到自己的博客中用，接着发觉越来越多博客园用户开始使用这东西，看来好东西真的是会一传十、十传百的。然而我们不能总是等看到别人有好东西了，自己再拿来用，我们需要有一点创新精神和动手能力，自己想一点新功能出来然后把它实现了。现在我为自己在博客园的文章添加了"Digg This!"按钮，或许迟点我会添加一些更有趣的功能上去，让它看上去更AJAX一些，这依赖于我何时能找到一台稳定服务的ASP.NET服务器。如果你对这方面的hacks(技巧)感兴趣并且希望长期关注的话，可以考虑订阅Cat in dotNET。如果你觉得这篇文章不错的话，你可以点击下面的"Add to del.icio.us"或"Google Bookmark This"进行收藏。
P.S.
希望dudu能够为我们这些博客园中真正名副其实的hackers提供一些帮助。现在博客园是支持"通过CSS定制页面"的，这是通过引用/{username}/customcss.aspx实现的，不知道dudu能否以类似的方式提供"通过JavaScript定制页面"的支持，这样我们就可以避免把JavaScript直接写到页面上去，从而减少其重复下载的次数。另外现在那个customcss.aspx也是强制浏览器每次都重新下载的吧，是否可以考虑将地址形式改为/{username}/{timestamp}/customcss.aspx呢？其中timestamp是用户最后更新CSS设置的时间，同时允许浏览器对CSS进行缓存，这样就能有效的减少CSS的重复下载。