Sunday, August 26, 2007

筆記:加上收藏本文至書籤網站的功能

在文章末加上一些書籤網站的連結,可以讓讀者方便收藏文章。Addthis!提供的工具按鈕GET THESE WIDGETS!,幾乎整合了大多數的書籤網站,讓讀者自己可以在單一整合的畫面選擇收藏文章到哪個書籤網站。可惜沒有國內比較多人用的HEMiDEMifunP,所以要自己加上去。

Step1:從Addthis!取得Blog Post Button的程式碼,大概會長得像這樣,紅字部份會是註冊時的帳號。

<!-- AddThis Bookmark Post Button BEGIN -->
<div><a expr:href='"http://www.addthis.com/bookmark.php?pub=xxxxxx&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img src='http://s9.addthis.com/button1-bm.gif' width='125' height='16' style='border: 0px; padding: 0px' alt='AddThis Social Bookmark Button' /></a></div>
<!-- AddThis Bookmark Post Button END -->


Step2:準備好書籤網站的小圖示,上傳到網路空間,並取得圖片的url位置。

Step3:在post的宣告中找到.post img,加上img.bookmark { padding: 0px; border: none;},這是為了讓小圖示不要出現小框框。

.post img {
padding: 4px;
border: 1px solid $borderColor;
}
img.bookmark {
padding: 0px;
border: none;
}


Step4:把收藏文章到HEMiDEMi等書籤網站的程式碼和Addthis!提供的程式碼合併如下

<!-- AddThis Bookmark Post Button BEGIN -->
<div>收藏本文:
<a expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&amp;url=" + data:post.url' target='_blank' title='加入HEMiDEMi分享書籤'><img alt='HEMiDEMi個人書籤' border='0' class='bookmark' src='http://hemidemi小圖示的圖檔位置'/></a>
<a expr:href='"http://myshare.url.com.tw/index.php?func=newurl&amp;url=" + data:post.url + "&amp;desc=" + data:post.title' target='_blank' title='加入MyShare分享書籤'> <img alt='MyShare個人書籤' border='0' class='bookmark' src='myshare小圖示的圖檔位置'/></a>
<a expr:href='"http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;=" + data:post.title' target='_blank' title='加入Yahoo分享書籤'><img alt='Yahoo分享書籤' border='0' class='bookmark' src='yahoo小圖示的圖檔位置'/></a>
<a expr:href='"http://funp.com/pages/submit/add.php?url=" + data:post.url + "&amp;s=" + data:post.title + "&amp;via=tools"' target='_blank' title='貼到 funP'><img alt='funP推推王' border='0' class='bookmark' src='http://funp.com/images/tools/post_04.gif'/></a>
<a expr:href='"http://www.addthis.com/bookmark.php?pub=xxxxxx&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img alt='AddThis Social Bookmark Button' width='125' height='16' src='http://s9.addthis.com/button1-bm.gif' style='border: 0px; padding: 0px' /></a>
</div>
<!-- AddThis Bookmark Post Button END -->


Step5:勾選展開小裝置範本,找到 <data:post.body/>後,在合適的位置貼上前面那段程式碼。我自己是貼在 <p class='post-footer-line post-footer-line-2'/>那段後面,也就是<p class='post-footer-line post-footer-line-3'/>之前。

0 comments: