更新資訊:
修正給改版後的 Pixnet 用的判斷式。


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 若你有拿去用的話,也請留言告知一下是否能夠正常運作喔,有任何意見也歡迎提出。

創作者介紹

Nelson 的小世界

Nelson 發表在 痞客邦 PIXNET 留言(36) 人氣()


留言列表 (36)

發表留言
  • D95240774
  • 請問是貼在網誌敘述嗎?
    我貼了可是都沒反應耶!
    這是我的程式碼~~
    <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 回覆

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

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

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

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

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

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

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

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

  • ForeverFish
  • 我的樂多:
    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 回覆

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

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

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

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

    PS. 我有試出在網誌title上出現推文按鈕貼紙,可是我想讓貼紙出現在每篇文章的右下角呀: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]+/[0-9]+", "i");
    var myUrl = document.URL.match(pattern);
    funp_genButton(myUrl[0], 1);</script>
    <br /></div>
    <script type="text/javascript">
    /*
    * 作者: Nelson (http://blog.pixnet.net/Nelson)
    * 說明: 讓 Pixnet 的文章自動加入 Google AdSense
    * 備註: 原始程式碼來自 http://blog.xuite.net/emisjerry/tech/11088489
    * 我將它改成適合 Pixnet 的版本。
    * 版本: v1.1,2008/01/24
    * 適用: Pixnet 的無名版型
    * 授權: 自由使用及修改,拿去用之前,
    * 麻煩到 http://blog.pixnet.net/Nelson/post/3967606 留個言給我。
    */

    /*
    * 檢查網址裡頭有沒有 "/post/" 字串,
    * 有的話就代表是單篇文章。
    */
    var isArticle = false;
    if (document.URL.indexOf("/post/") > 0)
    isArticle = true;

    if (isArticle)
    {
    if (document.addEventListener)
    document.addEventListener('DOMContentLoaded', init, false);
    else
    window.attachEvent('onload', init);
    }


    function init()
    {
    // "Content" 是文章的主要區塊
    var CONTENT = document.getElementById("content");
    var DIVs = CONTENT.getElementsByTagName('div');
    for (var i in DIVs)
    {
    var x = new String(DIVs[i].className);
    // 檢查 class 是否為 "innertext",是的話就是文章本體
    if (x.indexOf("innertext") == 0)
    {
    DIVs[i].innerHTML += document.getElementById("divAdSenseContentScript").innerHTML;
    break;
    }
    }
    }
    </script>

    可是還是無法正常顯示耶@@a
  • 我在上一篇的回應就有講過了,你要用的是「http://nelson.csie.us/OtherBlog/addGoogleAd_wretch.js」這個檔案,你怎麼用到給 Pixnet 的檔案呢?

    用錯檔案,當然就不會顯示阿。

    Nelson 於 2008/07/25 12:48 回覆

  • dabeniao
  • FunP 的按鈕是不是痞客邦本來就有了啊?
  • 痞客幫的 FunP 按鈕只能把文章推到 FunP,無法顯示這篇文章已經有多少人推了。所以若你對多少人推薦不感興趣,那就用痞客幫內建的就好:)

    Nelson 於 2008/07/25 12:42 回覆

  • dabeniao
  • 從我這裡看會有ㄟ
    就是會有多少人推
    像這篇:http://blog.pixnet.net/dabeniao/post/4289950
  • ㄟ~看來 Pixnet 有改過,當初我弄這個東西的時候,它只有一個單純的「推上 FunP」按鈕,不會顯示人數。

    不過話說回來,我也覺得 Pixnet 一串小小的推文按鈕,最後卻接了一個 FunP 的大大推文按鈕很醜阿 XD

    所以這篇文章適合給那些覺得 Pixnet 的按鈕配置太醜的人用(像我就是),也適合那些想加入「其他文章相關統計」的人用 :D

    Nelson 於 2008/07/25 13:03 回覆

  • cindy128
  • 非常謝謝~
    我加上了黑米的小按鈕了..
  • annva
  • 你好~

    謝謝你的提供^^我拿去使用囉~
    不過我有個問題想問:我的網誌顯示的都是推文的按鈕不是推薦人數的按鈕>__<
    我的語法是這樣:<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://blog.pixnet.net/annva/post/[0-9]+", "i");
    var myUrl = document.URL.match(pattern);
    if (myUrl != null)
    funp_genButton(myUrl[0], 11);
    </script><br />
    </div>
    * <script type="text/javascript">

    這是文章顯示的地方-->http://blog.pixnet.net/annva/post/21056993
    謝謝你呀!!
  • annva
  • 阿忘了說...

    最後的那段語法我是用你之前教學的:<script type="text/javascript">addGoogleAd_pixnet.js 內容</script>

    謝謝你了!!
  • annva
  • 對不起..我知道為什麼了~

    真不好意思在你這邊胡搞一通!!我知道問題在哪邊了!!感謝你分享的語法喔^^
  • Anita
  • 大大幫忙呀
    我用你的方法,我IE看的到,但是FF看不到耶
    我的網址:http://blog.yam.com/anitacastle/article/17258678
    我測試的方法,有寫在上面的網址的文章中
    請大大幫幫忙,為什麼FF看不到呢
  • xiangyu066
  • 抱歉貼錯了

    應該是這個
    var pattern = new RegExp("^http://[0-z]+.pixnet.net/blog/post/[0-9]+", "i");
    var myUrl = document.URL.match(pattern);
    <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];
    HEMiDEMi_Bookmark_Button_Style = 'button1';
    }
    </script>
    <script src="http://js.hemidemi.com/javascripts/hemidemi_bookmark_button.js" type="text/javascript"></script>
    還有妳的網頁語法中我沒發現任何有關黑米推薦那些東西
    事不是
    var pattern = new RegExp("^http://[0-z]+.pixnet.net/blog/post/[0-9]+", "i");
    var myUrl = document.URL.match(pattern);
    <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];
    HEMiDEMi_Bookmark_Button_Style = 'button1';
    }
    </script>
    <script src="http://js.hemidemi.com/javascripts/hemidemi_bookmark_button.js" type="text/javascript"></script>
    這個語法不適用在內部的
  • 這就是黑米貼紙的程式碼阿。
    貼在任何支援 JavaScript 的地方都行。

    Nelson 於 2008/09/29 11:41 回覆

  • 雪
  • 看了教學拿了代碼去用...不過好像沒顯示..
    (每篇文底下的都是原本手動貼上去得....)
  • 你的網誌連結來一下?

    Nelson 於 2008/11/21 09:38 回覆

  • 雪
  • http://blog.sina.com.tw/ffyysai0/
    看了看只有公告欄位放得下,其餘的都限制了字數
  • 若是這樣的話我也不知怎辦了。搬來 pixnet 嗎?

    Nelson 於 2008/11/21 23:15 回覆

  • sanchen
  • 請問在天空要怎麼設定funp的推文按鈕呢?
    弄了老半天也搞不定..麻煩您幫忙看看,謝謝!!
    url:http://blog.yam.com/bao9108
  • patrinahan
  • 謝謝你!

    請問你提到要選擇”funp 推推王的「一頁中有多個按鈕」模式”,它會出現兩段程式碼,一個要放在按鈕位置,另一個放在網頁<head>位置,那我要如何來安插分配呢?全部一起放在Ad sense那一塊嗎?
  • 是阿,放在一起就行了,不過順序要注意一下。
    要把 <head> 的程式碼放在前面,再放按鈕位置的程式碼。

    Nelson 於 2009/06/06 00:06 回覆

  • patrinahan
  • 謝謝版主!

    現在可以顯示出來了,只是得換成一個按鈕的模式,用一頁多個按鈕的模式就是無法顯示,
    不過,Firefox無法顯示的問題還是無法解決。 >_<

    以下是我的程式碼:

    <div style="text-align:right;"><script language="JavaScript" src="http://funp.com/tools/button.php?&s=8" type="text/javascript"></script><script>
    var pattern = new RegExp("^http://blog.sina.com.tw/[0-z]+/article.php\?pbgid=[0-9]+&entryid=[0-9]+", "i");
    var myUrl = document.URL.match(pattern);
    funp_genButton(myUrl[0], 11);
    </script></div>
  • Pixnet 的 blog 嗎?
    我沒有看到你加這個在你網頁程式碼裡耶。

    Nelson 於 2009/06/19 18:43 回覆

  • patrinahan
  • 對不起,我沒說清楚,我是加在新浪的部落格裡

    http://blog.sina.com.tw/patrina/

    最初我是用這個一頁多個按鈕的語法

    <div style="text-align:right;"><script language="JavaScript" src="http://funp.com/tools/js/funp_button.js"></script><script>funp_genButton('', 8);</script><script>
    var pattern = new RegExp("^http://blog.sina.com.tw/[0-z]+/article.php\?pbgid=[0-9]+&entryid=[0-9]+", "i");
    var myUrl = document.URL.match(pattern);
    funp_genButton(myUrl[0], 11);
    </script></div>

    但推文的按鈕都無法顯示出來

    改成一個按鈕模式的語法就可以正常顯示了

    <script language="JavaScript" src="http://funp.com/tools/button.php?&s=8" type="text/javascript"></script><script>
    var pattern = new RegExp("^http://blog.sina.com.tw/[0-z]+/article.php\?pbgid=[0-9]+&entryid=[0-9]+", "i");
    var myUrl = document.URL.match(pattern);
    funp_genButton(myUrl[0], 11);
    </script>

    不過在我的Firefox(沒有阻擋廣告及程式)中依然看不到按鈕和adsense廣告,只有在IE看得到
  • patrinahan
  • 請問樓主有幫我看嗎?
    一直麻煩你很不好意思....

    不管結果如何,都很感謝你的熱心哦!
  • 看了,可是看不出原因哩 ~"~

    Nelson 於 2009/06/26 07:54 回覆

  • patrinahan
  • 沒關係,還是很謝謝你哦!
  • 栞
  • 推人人數有問題

    想請問一下,
    我原本是每頁手動加入按鈕,
    現在改了版型所以改成每頁自動顯示(一頁多個按鈕),
    可是推文人數反而變的不同,
    這是改版前的樣子
    原本有推文人數有四人可是重新弄的貼紙沒有:http://twinsyang.blog.shinobi.jp/Entry/1563/
    改版後則試了一下用新貼紙有一人,可是舊貼紙沒有
    http://twinsyang.blog.shinobi.jp/Entry/1592/
    因為我想要把舊的貼紙通通拿掉,希望它顯示人數可以正常,
    請問要怎麼改才好呢?先謝謝你。

    P.S:因為我的網誌可以自動偵測文章變數所以我是用官方的語法。
  • 我不太清楚你想表達什麼耶,而且我也沒接觸過你那部落格系統,不過你可以先檢查看看你用的 funp 程式碼是否正確。

    Nelson 於 2009/07/25 21:47 回覆

  • 栞
  • 我原本是直接在文章裡面放Script,所以是直接貼在文章裡面的原始碼,首頁看不到,進入文章裡面才看的到。現在改成首頁看的到的每篇文章都有按鈕,可是發現推文人數跟原本的不合(都是沒有人推過,只有貼文字樣)。不過兩種貼紙都可以正常使用,只是數字不對而已。想問是不是兩種官方貼紙其實是不一樣的?

    不好意思之前沒有寫的很清楚,還是謝謝你的回答:)
  • 我不知道你的部落格系統支援到什麼程度,不過很有可能是因為你改成首頁每一篇都有推文貼紙,可是你沒有修改成讓每張貼紙都抓到"它那篇文章的網址",而是抓到"首頁的網址",所以就變這樣了。

    推文數是根據網址來判定的。

    Nelson 於 2009/07/26 23:26 回覆

  • 游家贵
  • 请问可以不可以写完整的给我。我弄来弄去弄不到。我要在pixnet 讓每篇文章都自動加入黑米跟推推王的收推文按鈕