呷厚倒休播（加入書籤按鈕的語法，4/11更新）－C'est La Vie

優質部落格，迴紋針老師的「Christabelle的藝想世界」，常常都會有好康、好玩的事物，
昨個兒迴老師居然開始充當紅娘，要為您搭起友誼的橋樑，如果有需要的人，記得趕緊去登記啊！

不過我要說的好康，不是這個「來電 50」啦！那是什麼咧？且聽我娓娓道來～

常在迴紋針老師家出沒的人一定有注意到，迴老師有掛了一個「收入網摘」的外掛，裡頭有 Google 書籤、智邦 MyShare...等等的，不過老師說這是 Java Script 的外掛還是啥 PHP 的程式，總之就是整包丟到 Server 上再去啟動就可以了；這樣看來，似乎在非自己架設的網站上就沒辦法玩囉？不，其實還是可以的，因為我從網頁原始碼中有看到語法，是可以讓無名之類的 BLOG 來使用，只是我一直都很懶，直到最近懶病稍有好轉現象，於是前晚才動手來整理一下這個部分。

我說的「呷厚倒休播」是這個加入書籤啦，不是「來電 50」...XD

如果依照迴紋針部落格原始碼抽離出來的語法來照用，雖然不是不可以，但是會有幾個問題：

圖片連結路徑不對，就算對了，圖在迴紋針的網站，吃人家花錢買的流量也不太道德。
迴紋針說 MyShare 和 Yahoo! Web 的圖是 jas9 畫的，沒徵求同意前不方便使用。
部分書籤頁面會在本文頁面開啟，跟我習慣不一樣，我習慣從新視窗／分頁開啟。
有幾個圖片的 title 和 alt 標籤不完整，死圖的時候會沒有替代文字。

根據這些問題，我做了一些小修正：

圖片放到自己或公用的空間；放無名相簿，非無名網站不能用，那用 flickr 應該可以吧？（其實是不可以）
jas9 創作的圖，改成到各書籤官網抓圖修改。
改語法，把在同視窗開啟的敘述都改成在新視窗／分頁開啟。
把 title 和 alt 標籤的敘述補充完整，並且改了一些描述。
改變順序，為了尊重來源網站，所以把 MyShare 放第一個，中文的黑米放第二，...。
在用了二天之後，又加上了兩個還蠻多人用的書籤，technorati 和 digg。

昨天我先把語法 PASS 給愛咪測試使用，看看有沒有什麼問題，目前看來是一切正常；而後來跟迴紋針老師聊了一下，才發現原來他把 MyShare 放在排尾，是因為多數人慣用右手，這樣使用滑鼠會比較順手，看來我的「禮貌」變成「不禮貌」了～XD

好，重點來了，要怎麼樣才能在自己的部落格加入這個小玩意兒？只要把文末語法加入你的文章末尾即可～

但有幾件事還要特別提醒一下，以及徵求高手協助：

記得要註冊、登入各書籤網站，才可使用。
目前必須一篇一篇的貼，不知有沒有誰可以用 CSS 來搞個一勞永逸的辦法？當然如果 BSP 願意把這個小東西納入為標準功能就更方便了～
貼在 Banner 上，似乎是一勞永逸的辦法，但由於按了書籤按鈕後，系統會去抓你所在頁面的資料，一個不小心，很多人加的書籤都會是你部落格的首頁，而不是單篇文章，貼在文章第一行也會有類似的風險；所以建議「加入書籤」要放在首頁看不到，而必須點入文章後才看得到的地方。
不見得所有書籤按鈕都要放上你的版面，可以自行刪減；當然你也可以依樣畫葫蘆，增加其他的書籤貼紙，像是 blogmarks, blinklist, scuttle...等等的～

好，有興趣的人就試試，祝大家用得愉快囉～

補充說明：

★★ 2007/03/30 ★★

做了一下實驗，無名非付費會員，雖然可以貼上語法，圖案也會顯示，不過其語法會被系統改掉，變成死連結，所以意思就是：這個語法在無名裡還是只能給付費會員使用啦！唉～XD

非付費會員如果真要使用，也不是不行，只是會麻煩了一點；首先，你要有一個付費會員的朋友，然後把他加入共同作者，每當你發文時，就請這位共同作者修改文章，把這個語法貼到文末就行了（不要懷疑，因為在無名裡能不能用 Java Script，不是看該版面的所有者是不是 VIP，而是取決於「誰在用」，所以付費會員在非付費會員的網頁上一樣可以使用 Java Script，當然，目前也僅止於這種「夾帶式」的 JS 語法，不是每種都能用～）。

★★ 2007/03/31 ★★

如果你一開始就 Copy 這個語法去用，我有做些更正喔！MyShare, Yahoo! 以及 furl 改成非彈跳視窗，還有 Yahoo! 的網頁從英文頁改回中文頁，最重要的是，支援反白即為書籤摘要，即先在網頁反白一段文字，再按加入書籤按鈕，這段文字會出現在書籤的摘要中（原來分享的語法只有 MyShare 和 HemiDimi 有這功能，現在僅剩 technorati 沒這個功能，而 furl 裡則是中文摘要會變亂碼，不過中文標題正常）。

再新增一個「集書籤之大成」的按鈕 — AddThis，語法、結果如文末。用這個的話，除了 MyShare 和 HemiDemi，其他幾乎都可以刪了～XD 當然你也可以留下幾個可能常用的，這樣就不用按二個按鈕才能收入書籤，尤其是可以留下 Yahoo! 按鈕，因為 AddThis 裡的 Yahoo! 是連到英文網頁...:P 不過 AddThis 方便歸方便，還是有個大缺點，就是反白文字再按鈕，那段文字並不會成為書籤的摘要...

★★ 2007/04/01 ★★

聽說華文部落格不能忽視中國，所以再加上一個「百度搜藏」，這組語法同樣支援反白文字即摘要；一樣，語法、結果如文末。

★★ 2007/04/03 ★★

配合智邦 MyShare 程式的變更，再次更新語法。

因為 flickr 規定外連圖片一定要將連結導回 flickr，可是這樣就不能當書籤按鈕了，所以全面更換圖片連結位置，目前圖片置放於樣版國度（還是誰有空間要提供？:P）；放在 flickr 上的圖暫時不會拿掉，以免造成使用前版語法者的圖片連結失效。

★★ 2007/04/05 ★★

在 kiroro's Tech Blog 看到一個新的中文書籤網站—Fiigo，既然是中文的，當然要把它加上來；官方目前提供的語法並不支援「反白即摘要」，所以我就又改了一下，底下的語法是有支援的；kiroro's Tech Blog 有列出三個關於「網路書籤」的延伸閱讀，有興趣的也可以看看。

★★ 2007/04/11 ★★

經 timk 提醒國內還有一個大書籤網站－PChome，所以又加上了～當然，反白即摘要是一定要的。

針對部分的留言，容我再多說幾句話：

第一點，原始碼是參考迴紋針的，這上文中已有說明，而且我 3/27 就已經開始使用，並且在 3/28 傳給 Amykaku 使用，這兩天有上我們 BLOG 的人應該有人有印象，誰先誰後不言可喻。

第二點，原來的 Google 和 del.icio.us 是 location.href= 的語法，會在同視窗開啟，我通通改成 void window.open()，從新視窗開啟；如果有人跟我一樣（是「有人跟我一樣」，不是「我跟別人一樣」，這差很多），是否該稱之「英雄所見略同」？

第三點，原語法在 alt= 的敘述各為「Google書籤、收入Y!MyWeb、Del.icio.us、收入furl、收入HemiDemi、收入MyShare」，我把「Google書籤」改為「Google Bookmarks」，「收入Y!MyWeb」改為「Yahoo! My Web」，其餘幾個則是把「收入」字眼刪除；而 title= 這部分，Google 和 del.icio.us 並沒有這一段，我都把它補上了，而內容則是和我改過的 alt= 敘述一致；如果有人跟我一樣，是否該稱之「太有默契」？

第四點，重新排列這 6 個圖示（多的幾個是後來追加，其中 technorati 大家都知道它的份量，當然要加，Digg 則是中時電子報有用，因此想說有在用的人應該也不少，百度則是大陸最大站，華文部落格應該不能漏了它）；如果原來迴紋針是 123456，我改成 653412，學過排列組合就會知道 6 個圖示的排列方式有 6!=720 種；如果有人跟我一樣，是否該稱之「巧合」？畢竟這的確是比中樂透的機率高多了。

第五點，也是最重要的一點：這語法沒有什麼抄襲不抄襲的，套句迴紋針的話，到最後還不都是「萬流歸宗」；就看你是參考誰的來改而已嘛！像我就是參考迴紋針的，沒必要怕這樣講會丟自己的臉，或是推了人家一把（迴紋針也不需要我推啦），就硬要說是參考其他啥網站的，其他網站的教學內容如果不是那麼「英雄所見略同」、那麼「有默契」，以及那麼「巧合」，不就好笑了嗎？

我不是知名部落客，但，還需要我寫更多條嗎？那個誰，有本事，就把我的新版本再偷走啊！不要硬拗了，知錯能改，善莫大焉啊～

在複製語法前，先看一下迴紋針老師說的話：「大家都掛了書籤貼紙，等了別人來自己家摘文章，可是有多少人因為喜歡別人的好文，而主動去摘它呢？……如果大家都只是裝了這個工具，孤芳自賞地希望別人來摘，自己卻吝於給別人掌聲與鼓勵，我想這也就沒什麼意義了。」共勉之～

語法如下，其中「加入書籤」這幾個字，還有 title="○○○"、alt="○○○" 都是可以隨自己喜好作更改；每個書籤按鈕前方已加上註釋文字方便篩選，你可以留下自己想要的書籤按鈕即可，也可以隨自己喜好變更它們的順序；如果你不喜歡這些圖，或是怕這些圖活不久會變成死連結，也可另存圖檔再上傳到自己的空間，更換語法中的圖片位址即可。之前已經使用舊版語法的人可以更新一下～

IE 使用者點選後端的圖示即可進行複製語法

加入書籤：
<!-MyShare->
<a href="javascript:(function(){d=document;w=window;t='';if(d.selection){t=d.selection.createRange().text;}else{if(d.getSelection){t=d.getSelection();}else{if(w.getSelection){t=w.getSelection()}}}void(window.open('http://myshare.url.com.tw/index.php?func=newurl&url='+encodeURIComponent(location.href)+'&desc='+escape(document.title)+'&contents='+escape(t),'newwin'))})();"><img src="http://web.caidiy.com/plate/files/myblog/person/make_template/cgs0102/1037//images/1.jpg" title="MyShare" alt="MyShare" border="0"></a>

<!-HemiDemi->
<a href="javascript:desc='';via='';if(document.referrer)via=document.referrer;if(typeof(_ref)!='undefined')via=_ref;if(window.getSelection)desc=window.getSelection();if(document.getSelection)desc=document.getSelection();if(document.selection)desc=document.selection.createRange().text;void(open('http://www.hemidemi.com/user_bookmark/new?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&description='+encodeURIComponent(desc)+'&via='+encodeURIComponent(via)));"><img src="http://web.caidiy.com/plate/files/myblog/person/make_template/cgs0102/1037//images/2.jpg" title="HemiDemi" alt="HemiDemi" border="0"></a>

<!-Fiigo->
<a href="javascript:desc='';if(window.getSelection)desc=window.getSelection();if(document.getSelection)desc=document.getSelection();if(document.selection)desc=document.selection.createRange().text;void(open('http://www.fiigo.com/bookmark/my.php?a=add_web&title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&comment='+encodeURIComponent(desc)+'&ei=UTF-8',0));"><img src="http://www.fiigo.com/bookmark/pic/save_icon/icon-16x16-2.gif" title="Fiigo" alt="Fiigo" border="0"></a>

<!-Baidu->
<a href="javascript:desc='';if(window.getSelection)desc=window.getSelection();if(document.getSelection)desc=document.getSelection();if(document.selection)desc=document.selection.createRange().text;void(open('http://cang.baidu.com/do/add?iu='+encodeURIComponent(location.href)+'&it='+encodeURIComponent(document.title)+'&dc='+encodeURIComponent(desc)));"><img src="http://web.caidiy.com/plate/files/myblog/person/make_template/cgs0102/1037//images/3.jpg" title="Baidu" alt="Baidu" border="0"></a>

<!-Google Bookmarks->
<a href="javascript:desc='';if(window.getSelection)desc=window.getSelection();if(document.getSelection)desc=document.getSelection();if(document.selection)desc=document.selection.createRange().text;void(open('http://www.google.com/bookmarks/mark?op=add&bkmk='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)+'&annotation='+encodeURIComponent(desc)));"><img src="http://web.caidiy.com/plate/files/myblog/person/make_template/cgs0102/1037//images/4.jpg" title="Google Bookmarks" alt="Google Bookmarks" border="0"></a>

<!-Yahoo! My Web->
<a href="javascript:desc='';if(window.getSelection)desc=window.getSelection();if(document.getSelection)desc=document.getSelection();if(document.selection)desc=document.selection.createRange().text;void(open('http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?t='+encodeURIComponent(document.title)+'&u='+encodeURIComponent(window.location.href)+'&d='+encodeURIComponent(desc)+'&ei=UTF-8'));"><img src="http://web.caidiy.com/plate/files/myblog/person/make_template/cgs0102/1037//images/5.jpg" title="Yahoo! My Web" alt="Yahoo! My Web" border="0"></a>

<!-PChome->
<a href="javascript:desc='';if(window.getSelection)desc=window.getSelection();if(document.getSelection)desc=document.getSelection();if(document.selection)desc=document.selection.createRange().text;void(open('http://search20.portal20.com.tw/x.jsp?t='+encodeURIComponent(document.title)+'&u='+encodeURIComponent(window.location.href)+'&n='+encodeURIComponent(desc)));"><img src="http://web.caidiy.com/plate/files/myblog/person/make_template/cgs0102/1037//images/a2940.jpg" title="PChome" alt="PChome" border="0"></a>

<!-Del.icio.us->
<a href="javascript:desc='';if(window.getSelection)desc=window.getSelection();if(document.getSelection)desc=document.getSelection();if(document.selection)desc=document.selection.createRange().text;void(open('http://del.icio.us/post?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'¬es='+encodeURIComponent(desc)));"><img src="http://web.caidiy.com/plate/files/myblog/person/make_template/cgs0102/1037//images/6.jpg" title="Del.icio.us" alt="Del.icio.us" border="0"></a>

<!-Digg->
<a href="javascript:desc='';if(window.getSelection)desc=window.getSelection();if(document.getSelection)desc=document.getSelection();if(document.selection)desc=document.selection.createRange().text;void(open('http://digg.com/submit?phase=2&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)+'&bodytext='+encodeURIComponent(desc)));"><img src="http://web.caidiy.com/plate/files/myblog/person/make_template/cgs0102/1037//images/7.jpg" title="Digg" alt="Digg" border="0"></a>

<!-Technorati->
<a href="javascript:void window.open('http://technorati.com/faves?add='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title))"><img src="http://web.caidiy.com/plate/files/myblog/person/make_template/cgs0102/1037//images/8.jpg" title="technorati" alt="technorati" border="0"></a>

<!-Furl->
<a href="javascript:(function(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');var%20furlit=window.open('http://www.furl.net/storeIt.jsp?t='+encodeURIComponent(d.title)+'&u='+escape(d.location.href)+'&r='+escape(d.referrer)+'&c='+encodeURIComponent(t)+'&p=1');})();"><img src="http://web.caidiy.com/plate/files/myblog/person/make_template/cgs0102/1037//images/9.jpg" title="furl" alt="furl" border="0"></a>

<!-AddThis->
<a href="javascript:void window.open('http://www.addthis.com/bookmark.php?pub=addthis&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));"><img src="http://s3.addthis.com/button1-bm.gif" title="其他更多書籤" alt="其他更多書籤" border="0"></a>

最後，如果你想要將這個書籤語法分享給你的朋友，也可以在你的書籤之後加上一個使用教學的連結按鈕，像這樣：

，語法如下：

<a target="_blank" href="http://www.wretch.cc/blog/CGS&article_id=11722738"><img src="http://web.caidiy.com/plate/files/myblog/person/make_template/cgs0102/1037//images/12.jpg" title="使用教學" alt="使用教學" border="0"></a>

繼續閱讀 Part II

延伸閱讀：^(返回)
　網路書籤 Web2.0 Show
　網路書籤好幫手 Taiwan.CNET.com
　《Download！》功能強大的網路書籤管理你有興趣的網站 MSN 台灣 3C 情報

加入書籤：