2009年4月13日 星期一

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

前言

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

修改blogger的template

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

以下是程式碼:

<!-- 程式碼開始 -->
<!-- 黑米書籤-->
<a href='javascript:desc=&quot;&quot;;via=&quot;&quot;;if(document.referrer)via=document.referrer;if(typeof(_ref)!=&quot;undefined&quot;)via=_ref;if(window.getSelection)desc=window.getSelection();if(document.getSelection)desc=document.getSelection();if(document.selection)desc=document.selection.createRange().text;void(open(&quot;http://www.hemidemi.com/user_bookmark/new?title=&quot;+encodeURIComponent(document.title)+&quot;&amp;amp;url=&quot;+encodeURIComponent(location.href)+&quot;&amp;amp;description=&quot;+encodeURIComponent(desc)+&quot;&amp;amp;via=&quot;+encodeURIComponent(via)));'><img border='0' src='http://lh3.ggpht.com/_gtsCbNaafP0/SeRkVsdQwpI/AAAAAAAABZQ/awg5VvBrpWQ/HemiDemi.gif' title='加入此網頁到:HemiDemi書籤'/></a>

<!-- MyShare書籤 -->
<a href='javascript:(function(){void(window.open(&quot;http://myshare.url.com.tw/index.php?func=newurl&amp;from=mysharepop&amp;NewsMaster=1&amp;url=&quot;+encodeURIComponent(location.href)+&quot;&amp;desc=&quot;+escape(document.title)+&quot;&amp;contents=&quot;+escape(t),&quot;newwin&quot;,&quot;toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,width=510,height=420&quot;))})();' onmousedown='javascript:d=document;w=window;t=&quot;&quot;;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>

<!-- udn書籤 -->
<a href='javascript:desc=&quot;&quot;;via=&quot;&quot;;if(document.referrer)via=document.referrer;if(typeof(_ref)!=&quot;undefined&quot;)via=_ref;if(window.getSelection)desc=window.getSelection();if(document.getSelection)desc=document.getSelection();if(document.selection)desc=document.selection.createRange().text;void(open(&quot;http://bookmark.udn.com/add?f_TITLE=&quot;+encodeURIComponent(document.title)+&quot;&amp;f_URL=&quot;+encodeURIComponent(location.href)+&quot;&amp;f_DIGEST=&quot;+encodeURIComponent(desc)+&quot;&amp;via=&quot;+encodeURIComponent(via)));'><img alt='' border='0' src='http://lh3.ggpht.com/_gtsCbNaafP0/SeRkV8OrejI/AAAAAAAABZg/km0wGzKTX_s/udn.gif'/></a>

<!-- Yahoo分享書籤 -->
<a href='#top_save' name='top_save' onclick='window.open(&quot;http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;amp;ei=UTF-8&amp;t=&quot;+encodeURIComponent(document.title),&quot;popup&quot;,&quot;width=520px,height=420px,status=0,location=0,resizable=1,scrollbars=1,left=100,top=50&quot;,0)'><img border='0' src='http://lh6.ggpht.com/_gtsCbNaafP0/SeYli3xggOI/AAAAAAAABZo/1YrPF7q638I/Yahoo-boolmark.gif' 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&amp;iu=%22+encodeURIComponent(u)+%22&amp;dc=%22+encodeURIComponent(c)+%22&amp;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='http://lh5.ggpht.com/_gtsCbNaafP0/SeRkVs3qz2I/AAAAAAAABZA/V6psm1LqR2s/baidu-post.gif'/></a>

<!-- del.icio.us 書籤 -->
<a href='javascript: void(window.open(&quot;http://del.icio.us/post/?url=&quot; .concat(encodeURIComponent(location.href)) .concat(&quot;&amp;title=&quot;) .concat(encodeURIComponent(document.title))));'><img alt='加入此網頁到del.icio.us 書籤' border='0' src='http://lh4.ggpht.com/_gtsCbNaafP0/SeRkVtxB_zI/AAAAAAAABZI/ey3kVDvvosQ/delicious.gif' title='加入此網頁到del.icio.us 書籤'/></a>

<!-- technorati 書籤 -->
<a href='javascript:void window.open(&quot;http://technorati.com/faves?sub=favthis&amp;add=&quot;+escape(document.location))'><img alt='將此網頁加入technorati' border='0' src='http://lh4.ggpht.com/_gtsCbNaafP0/SeRkVyJELnI/AAAAAAAABZY/K8iFXa88UQ8/Technorati.gif' title='將此網頁加入 technorati'/></a>

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

<!-- AddThis Button BEGIN -->
<a expr:id='data:post.url' expr:name='data:post.title' onclick='return addthis_sendto()' onmouseout='addthis_close()' onmouseover='return addthis_open(this, &quot;&quot;, 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=&quot;save-coco.blogspot.com&quot;;</script>
<script src='http://s7.addthis.com/js/200/addthis_widget.js' type='text/javascript'/></div>
<!-- AddThis Button END -->

<!-- 程式碼結束 -->

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

<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 != &quot;true&quot;'>,</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>之後
    <!--只有點擊首頁網址(save-coco.blogspot.com)才會出現網路書籤按鈕 -->
  • 放在第二個<h2 class='date-header'><data:post.dateHeader/></h2>之後
    <!--只有點擊某一篇文章(save-coco.blogspot.com/xxxx.html)才會出現網路書籤按鈕 -->
  • 放在第三個<h2 class='date-header'><data:post.dateHeader/></h2>之後
    <!--只有點擊側邊欄的月份(save-coco.blogspot.com/2009_04_01_archive.html)才會出現網路書籤按鈕 -->

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

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


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

  • & 要改成 &amp;
  • 雙引號內的單引號,要改成單引號含雙引號
    <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會自動把雙引號換成&quot;
  • <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個)  【重灌狂人】

  © Blogger templates Psi by Ourblogtemplates.com 2008

Back to TOP