更新資訊:
我今天修改了一下,讓程式能夠自動判斷使用者的帳號,所以你不用再手動輸入你的帳號了。
另外,也提供了一道給無名小站用的判斷程式,有需要的請試看看,也別忘了告訴我有沒有效。


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://blog.pixnet.net/你的帳號/post/[0-9]+", "gi");
var pattern = new RegExp("^http://blog.pixnet.net/[0-z]+/post/[0-9]+", "i");
var myUrl = document.URL.match(pattern);


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

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

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


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

Nelson 發表在 PIXNET 痞客邦 迴響(13) 引用(0) 人氣(1683)

open trackbacks list 引用列表 (0)

迴響列表 (13)

發表留言
  • 請問是貼在網誌敘述嗎?
    我貼了可是都沒反應耶!
    這是我的程式碼~~
    <div id="divAdSenseContentScript" style="display:none;"><br />
    <script language="JavaScript" src="http://funp.com/tools/js/funp_button.js"></script>var pattern = new RegExp("http://blog.pixnet.net/D95240774/post/[0-9]+", "gi");var url = document.URL.match(pattern);funp_genButton('', 8);</script>
    <br /></div>
    <script src="http://nelson.csie.us/Pixnet/addGoogleAd_pixnet.js"></script>
  • 因為你寫錯了阿~ XD

    funp_genButton(url[0], 8); 才對,我的文章裡頭有講喔

    另外我去你的網誌看了一下,你的寫法也有點問題。
    你只要把推文按鈕的程式碼"附加"在原本 Google AdSense 的程式碼之後(或之前)就可以了,不必分別各用一組 <div></div> 標籤包起來阿。你懂我的意思嗎?

    Nelson 於 2007/11/27 01:53 回覆

  • 無名的網誌描述執行Javascript時無法抓到文章正確網址,(在功一台主機上執行),何解?
  • 我的文章裡頭就說這是以 Pixnet 為例的了,無名的話要改一下,只要改這一行就行了。

    var pattern = new RegExp("^http://www.wretch.cc/blog/[0-z]+&article_id=[0-9]+", "i");

    Nelson 於 2007/11/27 19:05 回覆

  • 我成功了~~您解決了我長久已來的問題 真的感謝你啊~~~~
    不過我這個語法白癡還是摸了一陣
    建議把"只要把推文按鈕的程式碼"附加"在原本 Google AdSense 的程式碼之後(或之前)就可以了"說清楚些
    還有 改掉url[0], 8 後面的號碼 Funp的貼紙就會改變^^
  • 請問貼紙不想要放在最下方的話

    請問貼紙不想要放在最下方的話,想要放在最上方右邊,語法要怎麼改呢?謝謝
  • 擺放位置我寫死在外部的 addGoogleAd_pixnet.js 檔了,所以最方便的修改方法就是參考我那篇擺放廣告的教學,不要引用外部 js 檔,把 JavaScript 寫在網誌描述,然後再去修改 JavaScript 的程式碼。

    Nelson 於 2007/11/28 13:27 回覆

  • 悄悄話
  • 了解了,謝謝你清楚的解說!^__^
  • 謝謝Nelson大的熱心教學
    從你的網誌收穫很大
    請繼續努力囉 ^^
  • 我是用樂多系統,想在每一篇文章自動出現推推王跟黑米的標誌,
    看了一個早上,
    還是看不懂!
  • 給我你的網誌,我再試看看能不能幫上忙 :)

    Nelson 於 2008/01/13 20:01 回覆

  • 我的樂多:
    http://blog.roodo.com/foreverfish
    我的問題是根本沒看程式的功力,
    像前一篇 Google Adsense 自動出現的文章,
    我在裡面根本找不到跟 google 有關的項目,所以想替換都沒辦法替換,
    後來我找了http://blog.roodo.com/fauztech/archives/4076697.html 這一篇,
    才把 funp 加上去 (可是我發現會影響速度)
    不過它是加在文章底端。
  • 不知道你的問題解決了沒。在我前一篇自動加入 Google AdSense 的文章裡頭有提到,

    1. 進入「網誌管理」介面
    2. 在「網誌描述」區塊的最後,加入以下三行程式碼
    * <div id="divAdSenseContentScript" style="display:none;"><br />
    * <br /></div>
    * <script src="http://nelson.csie.us/Pixnet/addGoogleAd_pixnet.js"></script>
    3. 在兩個「br」標籤之間,加入你的 Google AdSense 程式碼

    現在你要做的事情就是,修改第三點。把它改成在兩個 br 標籤之間加入我文章裡頭提供的 HEMiDEMi 或 funP 的推文按鈕程式碼。例如你想要加入 funP 按鈕,就在兩個 br 標籤之間加入以下這些。

    <script language="JavaScript" src="http://funp.com/tools/js/funp_button.js"></script>
    <script>
    var pattern = new RegExp("^http://blog.pixnet.net/[0-z]+/post/[0-9]+", "i");
    var myUrl = document.URL.match(pattern);
    funp_genButton(myUrl[0], 11);
    </script>

    希望有幫到你的忙。

    Nelson 於 2008/01/24 15:26 回覆

  • 黑米按鍵 最後一行應該是type="text/javascript"></script>在教學的文章中,少了後半部。funP則可正常出現

    與Nelson回報一下
  • 謝謝,我調整一下 HTML 就可以顯示了

    Nelson 於 2008/05/15 19:57 回覆

  • 不好意思,我有試著在我的無名中的每一篇文加上推文按鈕貼紙,可是都試不太出來,可以告訴我要怎麼解決嗎??:PPP

    PS. 我有試出在網誌title上出現推文按鈕貼紙,可是我想讓貼紙出現在每篇文章的右下角呀:PPP
  • 不好意思,我忘了附上我的程式碼:PPP

    <div id="divAdSenseContentScript" style="display:none;"><br />
    <script language="JavaScript" src="http://funp.com/tools/js/funp_button.js"></script>
    <script>
    var pattern = new RegExp("^http://www.wretch.cc/blog/[0-z]+&article_id=[0-9]+", "i");
    var myUrl = document.URL.match(pattern);
    funp_genButton(myUrl[0], 11);
    </script>

    <br /></div>
    <script src="http://nelson.csie.us/Pixnet/addGoogleAd_pixnet.js"></script>
發表留言