石頭閒語:部落格小玩意: 為部落格加上「加入xx分享書籤」的按鈕

2007年01月11日 23:34

部落格小玩意: 為部落格加上「加入xx分享書籤」的按鈕

書籤 hemidemi myshare myyahoo digg technorati

最近我為部落格加上了一些常見的網路分享書籤按鈕。眼尖的人應該在首頁就會注意到，我的文章旁邊都會有一排「加入書籤」的按鈕；閱讀全文時，文章底下也有這一排。這並不是樂多提供的功能。讀者如果已經登入過那些分享書籤系統，那麼在瀏覽我的文章時，只要按下按鈕就會跳出加入書籤的頁面並填入網址及標題。這個動作只要知道那些書籤系統的新增功能頁面的 URL 就可以做到。

我整理了 6 個臺灣使用者常見的書籤系統的 URL 並做成樂多專用的 JavaScript 型式，樂多的 blogger 只要複製後就可以用。 6 個書籤系統分別是: 黑米 HEMiDEMi, 智邦 MyShare, Yahoo 分享書籤, 國外的 del.icio.us, digg 、Technorati。

我提供了兩種工具，一種是只在部落格首頁的邊欄上加上書籤按鈕，第二種是為每一篇文章加上書籤按鈕。

2007-05-06: 增加樂多書籤 (Roodo Cliip) 。
2007-02-10: 增加功能，會自動帶入「本文」的內容到書籤說明中。
2007-02-11: 加入 technorati 的按鈕；改變 window.onload 事件的觸發方式，以免與其他小工具衝突。
2007-02-14: 根據簡睿在 Xuite自動書籤按鈕 V1.1 找到的問題做了修正。修正取得 URL 的語法，截去 # 字元後的部份。指定按鈕的 title ： alt 跟 title 的意義不同，在一般瀏覽器中，當圖示無法取得時則顯示 alt 的文字內容，而 title 通常是在滑鼠移動到圖示時浮現的文字。

只在部落格首頁的邊欄加上書籤按鈕

新增一個「自由欄位」的插入欄位，然後複製下面的語法內容後貼到剛剛增加的插入欄位，再更新網頁即可。 IE 的使用者直接點擊程式碼框上的「copy to clipboard」便完成複製；其他瀏覽器的使用者則請點擊程式碼框上的「view plain」後再自行複製。

如果覺得這些按鈕排得很擠，請自行修改 bookmarklet 的樣式定義。

var diggImg = {
  src: 'http://blog.roodo.com/rocksaying/aab84445.gif',
  alt: '[+]digg'
}
var myYahooImg = {
  src: 'http://us.i1.yimg.com/us.yimg.com/i/us/sch/el/addtomy.gif',
  alt: = '[+]My Yahoo!'
}
var myShareImg = {
  src: 'http://digest.url.com.tw/images/add2myshare_80x15-1.gif',
  alt: '[+]My Share'
}
var hemidemiImg = {
  src: 'http://www.hemidemi.com/sticker/addblackcolor_8015.gif',
  alt: '[+]HEMIDEMI'
}
var delicioImg = {
  src: 'http://blog.roodo.com/rocksaying/a584b41e.gif',
  alt: '[+]del.icio.us'
}
var roodoCliipImg = {
  src: 'http://blog.roodo.com/rocksaying/ddc8a5be.gif',
  alt: '[+]Roodo Cliip'
}

var bookmarklets=[
[
  roodoCliipImg,
  false,
  'http://cliip.roodo.com/Main.php?do=Cliip&url='+u+'&title='+t+'&digest='
],
[
  hemidemiImg,
  false,
  'http://www.hemidemi.com/user_bookmark/new?via=sticker&description=&url='+u+'&title='+t
],
[
  myYahooImg,
  false,
  'http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?ei=UTF-8&u='+u+'&t='+t
],
[
  myShareImg,
  false,
  'http://myshare.url.com.tw/index.php?func=newurl&from=mysharepop&NewsMaster=1&url='+u+'&contents=&desc='+t
],
[
  delicioImg,
  false,
  'http://del.icio.us/post?url='+u+'&title='+t
],
[
  diggImg,
  'digg it!',
  'http://www.digg.com/submit?phase=2&url='+u+'&title='+t
]
];

for (var i = 0; i < bookmarklets.length; ++i) {
  document.write(
    '<a href="'
    + bookmarklets[i][2]
    + '" target="_blank" class="bookmarklet"><img src="'
    + bookmarklets[i][0].src
    + '" alt="'
    + bookmarklets[i][0].alt
    + '" border="0"/>'
    + (bookmarklets[i][1] ? bookmarklets[i][1] : '')
    + '</a> '
  );
}
document.write('<br/>');
</script>

每一篇文章加上書籤按鈕

首頁及文章分類不會加上按鈕。

這段語法要加在「Blog 基本設定」的「說明」欄位處。然後要更新所有文章才會生效。注意，請添加在部落格正常說明文字之後，不要把你的部落格說明漏掉了。

var bookmarklets=[
    [ roodoCliipImg,
      false,
      'http://cliip.roodo.com/Main.php?do=Cliip&url='+u+'&title='+t+'&digest='+d
    ],
    [ hemidemiImg,
      false,
      'http://www.hemidemi.com/user_bookmark/new?via=sticker&url='+u+'&title='+t+'&description='+d
    ],
    [ myYahooImg,
      false,
      'http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?ei=UTF-8&u='+u+'&t='+t+'&d='+d
    ],
    [ myShareImg,
      false,
      'http://myshare.url.com.tw/index.php?func=newurl&from=mysharepop&NewsMaster=1&url='+u+'&desc='+t+'&contents='+d
    ],
    [ delicioImg,
      false,
      'http://del.icio.us/post?url='+u+'&title='+t
    ],
    [ technoratiImg,
      false,
      'http://technorati.com/faves?sub='+t+'&add='+u
    ],
    [ diggImg,
      'digg it!',
      'http://www.digg.com/submit?phase=2&url='+u+'&title='+t
    ]
    ];

var posted = document.getElementsByTagName('div');
    for (var i = posted.length - 1; i >= 0; --i) {
      if (/^posted$/.test(posted[i].className)) {
        posted = posted[i];
        break;
      }
    }

posted.insertBefore(document.createElement('br'), posted.firstChild);
    for (var i = bookmarklets.length - 1, a; i >= 0; --i) {
      a = document.createElement('a');
      a.target = '_blank'; 
      a.href = bookmarklets[i][2];
      a.appendChild(bookmarklets[i][0]);
      if (bookmarklets[i][1])
        a.appendChild(document.createTextNode(bookmarklets[i][1]));
      posted.insertBefore(document.createTextNode(' '), posted.firstChild);
      posted.insertBefore(a, posted.firstChild);
    }
  };
  if (window.attachEvent) window.attachEvent('onload', addCurrentArticleBookmarklets);
  else window.addEventListener('load', addCurrentArticleBookmarklets, false);
}
//-->
</script>

各位實際使用時會發現，我自己的部落格做的更多，在首頁和文章分類中，都會為每個文章加上一組專用按鈕，但這個方法就複雜多了，不是三言兩語說得完的，就不提了。我建議樂多直接把這個功能加上去，不用我們自己 hack 。

您可能有興趣的文章：

Ajax anti-patterns 與個人經驗談

產生新類別的類別

掌握 JavaScript 的「封裝」特性, part 2

Function.prototype.call() and Function.prototype.apply()

JavaScript 需要類別繼承概念嗎？

<< Ludwig Mises 對 Karl Popper 觀感之我見 | 回blog首頁 | 動態語言關於參數宣告的寫作風格 >>

shirock 發表於樂多 │回應(23) │引用(12) │JavaScript │編輯本文

樂多分類：網路/3C │昨日人次：0 │累計人次：922

引用URL

http://cgi.blog.roodo.com/trackback/2639381

引用列表:

我都忘了還有引用功能了，實在非常感謝您寫出的這個功能 :D

知識：為樂多加入收藏按鈕【丸小管】 at 2007年01月31日 18:50

我的小玩意，只要在文章中註記 Tag 的文字， JavaScript 就會自動幫我把 Tag 轉成標籤連結。不用記複雜的語法，也不用剪貼複製。

部落格小玩意2: 輕鬆在文章中加入「Tag, 標籤」連結【石頭閒語】 at 2007年02月5日 02:09

特別感謝...

新版面【Yehzu's blog】 at 2007年02月8日 13:22

我這篇的小玩意會彙整部落客最近發表在自己部落格中的文章之 Tag ，然後在首頁的邊欄顯示自己部落格的 Tag Cloud 。

部落格小玩意3: 在首頁加入自己最近發表文章的 Tag Cloud【石頭閒語】 at 2007年02月11日 16:51

網路書籤系統分享日漸風行，國內外就多達數十種。共享書籤，一種將IE的「我的最愛」功能，延伸出來的

安裝書籤按鈕【黑海中的璀璨(樂多站)】 at 2007年02月14日 11:33

輕鬆擴充樂多誌(Roodo)功能: roodo_ext.js【阿土伯程式大觀園】 at 2007年02月15日 23:39

教學樂多優化插件 - 樂多優化插件是一個運用 jQuery 寫成的 Javascript 程式，其功能包括：增加邊欄折疊、增加書籤工具、增加圖形化導覽列、增加導覽列的透明功能、移除多餘字串「Posted by ...

教學樂多優化插件【Without Boundaries】 at 2007年03月20日 18:55

剛剛進行了年度部落格大改版，當我更新完網頁，正準備來好好欣賞一下全新風貌的部落格時，樂多就......掛了～Orz～這實在太詭異了，難道這是受了老天的詛咒嗎？連老天都在嫉妒嗎？還是，

部落格年度改裝記事【Tiat的生活寫‧照】 at 2007年04月11日 14:04

只要使用者已經登入過，當你在瀏覽你自己的部落格文章時，文章的標題旁就會添加一個[編輯]連結。從此編修文章輕鬆愉快。

部落格小玩意4: 當使用者登入後自動為部落格文章加上「快速編輯」的連結(BETA)【石頭閒語】 at 2007年04月14日 02:35

同時在部落格首頁與文章上設置書籤收藏按鈕工具。

首頁說：我也要一排書籤收藏按鈕【Passion: 慕容理深のblog 】 at 2007年04月28日 03:24

樂多日誌的功能實在非常陽春許多和 Blog 或 Web2.0 有關的功能官方新增的速度都很慢不過幸好樂多在版面上設定上的彈性還滿大的既然官方不提供，那就只好自己來搞定囉～樂多現在提供每篇文章內都可以放置邊欄的設定有了這個機制，要在每篇文章中加入固定的自訂項目相對簡單許多原本想在內文中放入自訂項目要靠部落格「說明」這個欄位我現在是在內頁邊欄中新增一個自由欄位然後把這些自訂項目的JavaScript放在一起

[公告]新增每篇文章FunP與加到書籤按鈕【appleseed, 蘋果核】 at 2008年08月2日 18:17

MyShare 書籤功能不知怎麼搞的，某些文章都收不進去，難道每個帳號有限，已經被我玩爆了？可是明明有些就還能收呀....決定改用 funP，這家書籤功能其實比智邦好，只是之前收了那麼多在智邦，後來懶得轉台，但近來文章收不進去也不是辦法，就換吧。順帶一提，在樂多每篇文章最後加入書籤功能的方法如下：為部落格加上「加入xx分享書籤」的按鈕加上 funP 貼文按鈕：在樂多日誌使用funP推推王貼文按鈕

書籤轉台【Orpheus in the Blog】 at 2009年04月5日 19:12

回應文章

我將這篇資訊的略述發表到批踢踢Blog板去，並附帶您的網址，非常感謝您的分享：）

| 檢舉 | Posted by hiroshiken at 2007年02月6日 01:19

不客氣，是我該謝謝你幫我轉貼才是。
ptt 啊，好久沒碰 BBS 了說。待會去看看 ^.^

| 檢舉 | Posted by 遊手好閒的石頭成 at 2007年02月6日 18:09

謝謝你的分享...我使用在自己樂多的部落格上了
感激不盡啊

| 檢舉 | Posted by Antony at 2007年02月7日 21:27

有朋友反應說若點選文章的回應、時間、引用會使此功能失效

Posted by XXX at 樂多Roodo! │23:34 │回應(X) │引用(X) │

我把網址判斷的正規表示法稍微改了一下(查資料查了很久但還是不太了解正規的表示方式)

把
if (/\/archives\/\d+\.html$/.test(document.URL))
改成
if (/\/archives\/\d+\.html/.test(document.URL))

看起來似乎是解決因網址判斷造成不會顯示的問題了，但不知道這樣的變更會不會出一些沒想到的問題。

| 檢舉 | Posted by hiroshiken at 2007年02月10日 08:35

喔，回應跟引用的網址格式是:
archives/[0-9]+.html#trackback-[0-9]+
archives/[0-9]+.html#comment-[0-9]+

所以改成:
if (/\/archives\/\d+\.html(#[\w_-]*)?$/.test(document.URL)) 即可。

ps. 你的作法也沒錯，在樂多中不會有問題。

| 檢舉 | Posted by 遊手好閒的石頭成 at 2007年02月10日 09:00

根據您的程式，我稍做修改以符合Xuite的環境，Post時有輸入引用，但似乎沒有寫回...總之，以下是網址：
http://blog.xuite.net/emisjerry/tech/10137684

| 檢舉 | Posted by emisjerry at 2007年02月12日 23:02

跨系統間的引用，似乎常常會失敗。

我看到了。
但在 Xuite 中，第18行的
if (ds[i].className == 'main')
似乎要改成
if (ds[i].className == 'blogbody')

才能正確地幫你抓出要傳給書籤系統的說明文字。

| 檢舉 | Posted by 遊手好閒的石頭成 at 2007年02月12日 23:42

您好，我是阿土伯。
我將輕鬆擴充 Blogger 功能: Blogger_ext2.js 亦支援到樂多誌來了，相信能讓更多樂多的朋友開心使用樂多誌。

輕鬆擴充樂多誌(Roodo)功能: roodo_ext.js:
http://racklin.blogspot.com/2007/02/roodo-roodoextjs.html

| 檢舉 | Posted by Rack Lin at 2007年02月15日 23:39

石頭成兄，My Yahoo的query string必須再加上ei=UTF-8才行，不然中文都會變成亂碼。

| 檢舉 | Posted by emisjerry at 2007年02月16日 17:12

嗯嗯，感謝簡睿兄告知，此錯誤已更新。

| 檢舉 | Posted by 遊手好閒的石頭成 at 2007年02月16日 20:52

感謝 Rock 的教學！
我應用在建立一個優化樂多的插件裡，
包括增加書籤工具！希望可以得到您的批評指教！
^ ^

http://blog.roodo.com/withoutboundaries/archives/2883877.html

| 檢舉 | Posted by Anubis From Memphis at 2007年03月20日 18:58

謝謝你的分享

我取用你的語法嘍！

謝謝:)

| 檢舉 | Posted by David at 2007年04月2日 23:15

我照你的方式去做，結果很成功，謝謝。

| 檢舉 | Posted by Tiat at 2007年04月7日 10:20

我也用了喔，謝謝！

| 檢舉 | Posted by Jack at 2007年04月26日 01:30

因為Jack告知
才知有這麼好用的工具
很棒唷~~~推薦

| 檢舉 | Posted by 阿俊 at 2007年04月26日 22:11

您好。感謝您的發明與說明。
我剛試著小幅改寫您的程式碼，以將第二種工具延伸應用至首頁。班門弄斧，請勿見笑。並希指教。

| 檢舉 | Posted by 慕容理深 at 2007年04月28日 03:37

謝謝你喔。
已經成功安裝了呢。 ^^

| 檢舉 | Posted by 甜豆 at 2007年05月12日 13:14

請問一下，放入阿土伯的樂多all in one和你的文章快速編輯和刪除會出現﹝不接受return﹞，請問一下應該怎麼改？謝謝！

| 檢舉 | Posted by greener102 at 2007年05月23日 17:53

第二行，你多加了2個反斜線。
錯誤: //function addCurrentArticleEditLink() {

2個反斜線 (//) 表示後面的內容是註解。你把函數頭的程式碼變成註解了， return 當然不能用。

| 檢舉 | Posted by 遊手好閒的石頭成 at 2007年05月24日 09:40

謝謝您提供這麼方便的語法.
但是想請教你.為何前4個標籤網站都點不進去呢?
請指教一下
謝謝^^

| 檢舉 | Posted by 安先生 at 2007年06月9日 10:52

一直想要學會這個功能的用法，可是很多都寫的不清楚而導致失敗。
真的很謝謝你，現在我學會了。
我的部落格改好了。

| 檢舉 | Posted by Joyce at 2007年10月18日 17:01

真的很感恩寫程式的人
^^
真是為了廣大世人們謀福利

| 檢舉 | Posted by Tonighthhl at 2008年06月11日 15:42

跟前面有一個的問題一樣說

不知道為什麼按扭沒出現
能說明一下謝謝你
會繼續研究看看

| 檢舉 | Posted by Tonighthhl at 2008年06月11日 16:07

姓名 :
Email :
URL :
回應狀態:	公開私密
驗證碼 :	( 請依顯示文字填入英文小寫 ) 重新產生驗證碼
	記住我的資訊顯示我的圖像 ( 登入或申請個人圖像 )
回應內容 :

回最上方