在blogger放入網路書籤的收藏連結

前言

我的網站至今還沒有提供知名的網路書籤，加入收藏連結的功能。今天花了一些時間，把它加到我的部落格裡頭。這篇文章算是個人的工作記錄之一，也提供想將網路書籤的收藏連結，放到blogger的朋友參考。這裡共提供黑米、MyShare、Udn共享書籤、Yahoo分享書籤、百度收藏、del.icio.us 書籤、technorati 書籤、YouPush書籤。如果在上面找不到的網路書籤，還可以從AddThis 這個地方，移過滑鼠時自然會彈出更多書籤網站。

修改blogger的template

修改blogger template的方法請參考在blogger中預設或由使用者自訂部落格字體大小一文。

以下是程式碼：



<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)+"&amp;url="+encodeURIComponent(location.href)+"&amp;description="+encodeURIComponent(desc)+"&amp;via="+encodeURIComponent(via)));'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx3xlYoN9qCnhdsCHIJqs9gxmH0_W_NQZeSd3p2-T2KwuuByqFQK5ew_HuwBuExCPyFL0OfO9ZKER2rgXS-N4Nl0uvmRZuNxSyaAvHqBDys__bIQALUcqj0sU_E2q0QR3a-1dHigkaJA/' title='加入此網頁到：HemiDemi書籤'/></a>


<a href='javascript:(function(){void(window.open("http://myshare.url.com.tw/index.php?func=newurl&from=mysharepop&NewsMaster=1&url="+encodeURIComponent(location.href)+"&desc="+escape(document.title)+"&contents="+escape(t),"newwin","toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,width=510,height=420"))})();' onmousedown='javascript: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()}}}'><img alt='收進你的MyShare個人書籤' border='0' src='http://digest.url.com.tw/images/add2myshare_80x15-3.gif' title='收進你的MyShare個人書籤'/></a>


<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://bookmark.udn.com/add?f_TITLE="+encodeURIComponent(document.title)+"&f_URL="+encodeURIComponent(location.href)+"&f_DIGEST="+encodeURIComponent(desc)+"&via="+encodeURIComponent(via)));'><img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtgzIBvSZx70vjwmtqyou91s0JUXS3mXzoTMqHY6bVAi33D73zqqlisHcysf1aD18bE8MyE8RPZ1iamM2FLKAs7tbHN2W1HvkaifHCk0enlH6b8-zqsrJTxsjsJRbNVl9pePl6Hd89A/'/></a>


<a href='#top_save' name='top_save' onclick='window.open("http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u="+encodeURIComponent(location.href)+"&amp;ei=UTF-8&t="+encodeURIComponent(document.title),"popup","width=520px,height=420px,status=0,location=0,resizable=1,scrollbars=1,left=100,top=50",0)'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYYPqu3cxHKWQ0qOpyqP9OkJcPiUFP5rLK9IHnA8TOn9JvEpytw2Zio0Tc6TT9JY491U68VEw-ZW4helex9Kq_Rlks0QR7sLK-rlV_eyMP40aXdHWhX1EmgkFl89hmBN7-nsKqwhTUg/' title='加入此網頁到：Yahoo分享書籤'/></a>


<a href='javascript:u=location.href;t=document.title;c = %22%22 + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text);var url=%22http://cang.baidu.com/do/add?it=%22+encodeURIComponent(t)+%22&iu=%22+encodeURIComponent(u)+%22&dc=%22+encodeURIComponent(c)+%22&fr=ien#nw=1%22;window.open(url,%22_blank%22,%22scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes%22); void 0' title='將此網頁加入百度收藏...'><img alt='將此網頁加入百度收藏...' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8WnwWyqW_poJFeWfTjo9A4zx_slwkTJlw8wwalnUV8tcNERMiL3yeTsfxeL_GjPtzp6yoygTUbjW9pma_xcFtpye6_FXfAoovSvOUmP3ywE8gGceGwjYp2Z45YErb1rgsPoADrRz6Vg/'/></a>


<a href='javascript: void(window.open("http://del.icio.us/post/?url=" .concat(encodeURIComponent(location.href)) .concat("&title=") .concat(encodeURIComponent(document.title))));'><img alt='加入此網頁到del.icio.us 書籤' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPlKo47qZmlesAGnQjpPc3_WoQGMLZfzz17HwUySQPXmIkpNkXR1G2y6GRoAkRaXoVFSpNzbiDXf8cO9KuHBNqKl7q9xZxpuzi8OvpVrj_8tEp4Aq264vd0DsS_jki9XPaS3fp0RU3Hg/' title='加入此網頁到del.icio.us 書籤'/></a>


<a href='javascript:void window.open("http://technorati.com/faves?sub=favthis&add="+escape(document.location))'><img alt='將此網頁加入technorati' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP_laRreKDE1UjQFKEtL7tzBpb5cq7IcOg-pFqNlZw4iEI6z0hD40mdMD79wijcjDtoPjrcEMbOa0sp1hmCFi7W4HVQ-lNkyNLKkvz6Ie6z0tZlAi5hfOl5FeSf2GsrQUf9uxxGz9rUQ/' title='將此網頁加入 technorati'/></a>


<a href='#save' name='save' onclick='javascript:q=(document.location.href);void(open("http://www.youpush.net/submit.php?url="+escape(q),"","resizable,location,menubar,toolbar,scrollbars,status"))'><img alt='YouPush' border='0' src='http://www.youpush.net/images/yp.gif' title='儲存至 YouPush' valign='middle'/></a>


<a expr:id='data:post.url' expr:name='data:post.title' onclick='return addthis_sendto()' onmouseout='addthis_close()' onmouseover='return addthis_open(this, "", this.id, this.name);'><img alt='Bookmark and Share' height='16' src='http://s7.addthis.com/static/btn/lg-bookmark-en.gif' style='border:0' width='125'/></a>
<div><script type='text/javascript'>var addthis_pub="save-coco.blogspot.com";</script>
<script src='http://s7.addthis.com/js/200/addthis_widget.js' type='text/javascript'/></div>




如果您要分享的網路書籤放在文章的開頭，請將上面的程式碼加在原來這段程式碼的後面：

<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>

如果您要分享的網路書籤放在文章的後面，請將上面的程式碼加在原來這段程式碼的後面：

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

補充說明

在blogger的範本中，會出現三個<h2 class='date-header'><data:post.dateHeader/></h2>，這會顯示發文日期，但為何會出現三次呢？原來當你點擊blogspot的不同連結，就會作用到其中一個。所以我們將要插入的網路書籤連結，放在不同的<h2 class='date-header'><data:post.dateHeader/></h2>之後，會有不同的作用。

放在第一個<h2 class='date-header'><data:post.dateHeader/></h2>之後


放在第二個<h2 class='date-header'><data:post.dateHeader/></h2>之後


放在第三個<h2 class='date-header'><data:post.dateHeader/></h2>之後


因為我們希望，當讀者正在閱讀某一篇文章時，才出現網路書籤連結，因為當閱讀者點擊這些書籤網站後，書籤網站會自動抓取文章標題及網址。如果點選首頁，也出現網路書籤的連結，那這些書籤網站，往往會抓到首頁的網址及首頁的標題，這將不是讀者想要的。

所以在上例中，我們將代碼插在第二個<h2 class='date-header'><data:post.dateHeader/></h2>之後。

還要注意一點，找到很多教學網站，提供許多網路書籤連結的原始碼，直接貼到blogger的範本原始碼裡面，大部分都失敗，我找了一下原因，大概有下列幾個：

& 要改成 &

雙引號內的單引號，要改成單引號含雙引號
<a href="javascript:desc='';via='';if(document.referrer)via=document.referrer;if(typeof(_ref)!='undefined')....
改成
<a href='javascript:desc="";via="";if(document.referrer)via=document.referrer;if(typeof(_ref)!="undefined")....
blogger會自動把雙引號換成"

<img alt='Bookmark and Share' height='16' src='http://s7.addthis.com/static/btn/lg-bookmark-en.gif' style='border:0' width='125'>
改成
<img alt='Bookmark and Share' height='16' src='http://s7.addthis.com/static/btn/lg-bookmark-en.gif' style='border:0' width='125'/>

其他相關資源

簡單地在Blogger安裝「分享書籤」按鈕
 【Blogger】在Blogger放置各大共享書籤圖示 Bookmarks for Blogger
如何在部落格中加入HemiDemi, MyShare,Yahoo分享書籤, delicious,百度收藏,Technorati,YouPush共享書籤按鈕？(一共7個)　　【重灌狂人】

Save-CoCo

2009年4月13日星期一

在blogger放入網路書籤的收藏連結

前言

修改blogger的template

補充說明

其他相關資源

Save-CoCo

2009年4月13日 星期一

在blogger放入網路書籤的收藏連結

前言

修改blogger的template

補充說明

其他相關資源

2009年4月13日星期一