Nelson 國三生了沒

HEMiDEMi 有提供收推文小按鈕，funP 推推王也有提供推文按鈕，不過要怎麼完美的將它們加到部落格的每篇文章裡頭呢？這篇教學以 Pixnet 為例，說明如何達成這個功能。
首先當然是要先取得按鈕的程式碼，HEMiDEMi 的程式碼在此，funP 推推王的程式碼在此，要提醒各位的是在此我們得用 funp 推推王的「一頁中有多個按鈕」模式。取得程式碼之後，當然就是要想辦法將它們加入每一篇文章之中，加入的方法可以參照我之前發表過的這篇文章：[分享] 讓每篇文章自動加入 Google AdSense (適用於 Pixnet / 無名付費會員 / 天空 / 樂多 / 新浪)，只不過我們現在將 Google AdSense 的程式碼替換為推文按鈕的程式碼罷了。改好之後記得儲存你的部落格設定，然後隨便檢視一篇文章看看是否有出現推文按鈕了呢？沒意外的話你應該看得到喔！

甚麼？這樣就結束了嗎？當然不是，若是這樣就結束的話，我未免也太騙吃騙喝了 XD 接下來我們還得再做一些微調的動作，這才稱得上完美。

事情是這樣的，雖然現在我們可以讓每篇都顯示推文按鈕，收推文的人數也能正確顯示了，不過若是你夠細心的話你會發現它在某些情況下無法正確顯示收推文人數。甚麼情況下會這樣呢？你的側邊列有使用者回應或引用的連結吧，隨便點選一個連結試看看，你會看到那篇文章的收推文人數總是「0」。

揪～～～竟，是甚麼原因造成的呢？說穿了其實很簡單，這是因為 HEMiDEMi 跟 funP 的貼紙都是透過該文章的網址來偵測有多少人收推本文，可是使用者回應或引用的連結卻會改變原始文章的網址，所以就無法正確顯示了。緊接著，讓我們來解決這個小問題！

以 Pixnet 為例，你應該很容易就能發現 Pixnet 文章的網址長得像這樣：「http://blog.pixnet.net/你的帳號/post/獨一無二的數字編號」，而回應或是引用連結則會在原始網址後面加上一些東西。所以我們要做的事就很清楚啦，我們得先想辦法擷取出原始網址，然後將原始網址加到推文按鈕的程式碼裡頭。

很明顯的可以看出原始網址前半部是不變的，唯一會變的是最後的「數字」編號。所以我們可以輕鬆的透過 JavaScript 的正規表示式（Regular Expression）來抓出網址。作法如下，

var pattern = new RegExp("^http://[0-z]+.pixnet.net/blog/post/[0-9]+", "i");
var myUrl = document.URL.match(pattern);

若你用的是無名小站，就改用這個：
var pattern = new RegExp("^http://www.wretch.cc/blog/[0-z]+/[0-9]+", "i");

如此一來，myUrl 就是文章的原始網址了。既然我們拿到原始網址了，以後的事就簡單啦，我們只要把網址指定給推文按鈕就行了。首先是給 HEMiDEMi 用的版本，看起來大概像底下這樣，至於其他可用參數，就請自行參考 HEMiDEMi 官方說明囉。

<script type="text/javascript">
var pattern = new RegExp("^http://[0-z]+.pixnet.net/blog/post/[0-9]+", "i");
var myUrl = document.URL.match(pattern);
if (myUrl != null) {
HEMiDEMi_Bookmark_Button_URL = myUrl[0]; /* myUrl 是一個 Array，我們的網址在 Array[0] */
HEMiDEMi_Bookmark_Button_Style = 'button1';
}
</script>

<script src="http://js.hemidemi.com/javascripts/hemidemi_bookmark_button.js" type="text/javascript"></script>


而 funP 的程式碼則是像這樣：

<script language="JavaScript" src="http://funp.com/tools/js/funp_button.js"></script>

<script>
var pattern = new RegExp("^http://[0-z]+.pixnet.net/blog/post/[0-9]+", "i");
var myUrl = document.URL.match(pattern);
if (myUrl != null)
funp_genButton(myUrl[0], 11);
</script>


好啦，講解到此告一段落，同樣的原理稍加變通也能用在其他的部落格系統裡，希望各位玩得開心。若覺得我寫的不錯的話，別忘了給個「推」阿～XD 若你有拿去用的話，也請留言告知一下是否能夠正常運作喔，有任何意見也歡迎提出。