網路冷眼@BlogJava

今天看到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!"按鈕的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。如果你覺得這篇文章不錯的話，你可以點擊下面的"

P.S.

希望dudu能夠為我們這些博客園中真正名副其實的hackers提供一些幫助。現在博客園是支持"通過CSS定制頁面"的，這是通過引用/{username}/customcss.aspx實現的，不知道dudu能否以類似的方式提供"通過JavaScript定制頁面"的支持，這樣我們就可以避免把JavaScript直接寫到頁面上去，從而減少其重復下載的次數。另外現在那個customcss.aspx也是強制瀏覽器每次都重新下載的吧，是否可以考慮將地址形式改為/{username}/{timestamp}/customcss.aspx呢？其中timestamp是用戶最后更新CSS設置的時間，同時允許瀏覽器對CSS進行緩存，這樣就能有效的減少CSS的重復下載。