暮平的碎碎念: 【Blogger大改造】Lesson 10：共享書籤及推文按鈕

之前在【Lesson 6：加入版權宣告】中曾提過「網摘、引用、連結」的概念

也就是利用共享書籤或分享連結等方式分享好文

本章所要講的是如何在文章中加入按鈕

讓讀者可以透過這些按鈕快速地收藏或分享你的文章

【10-1 加入共享書籤的按鈕】

【10-2 加入噗浪與Twitter推文按鈕】

【10-3 按鈕圖片要放在哪裡？】

【10-4 課外閱讀】

【10-1 加入共享書籤的按鈕】

STEP 1：在範本中找到<data:post.body/>，在後面加入這段語法：

（如果你是直接在Blogger後台做這個動作，請勾選「展開小裝置範本」）

<b:if cond='data:blog.pageType == "item"'> <table border="0"><tr>&lttd>收藏本文：</td><td>

「收藏本文：」可改為其他你想顯示的文字

STEP 2：將各家書籤語法加入其後（以下是我有用到的）：

<!-- HEMiDEMi -->
<a expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&ampamp;url=" + data:post.url' target='_blank' title='加入HEMiDEMi分享書籤'><img alt='HEMiDEMi個人書籤' border='0' src='圖片網址'/></a>
<!-- MyShare智邦網摘 -->
<a expr:href='"http://myshare.url.com.tw/index.php?func=newurl&ampamp;url=" + data:post.url + "&ampamp;desc=" + data:post.title' target='_blank' title='加入MyShare分享書籤'><img alt='MyShare個人書籤' border='0' src='圖片網址'/></a>
<!-- Delicious -->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&ampamp;title=" + data:post.title' target='_blank' title='加入Del.icio.us分享書籤'><img alt='Del.icio.us個人書籤' border='0' src='圖片網址'/></a>
<!-- DiggIt -->
<a expr:href='"http://digg.com/submit?phase=3&ampamp;url=" + data:post.url' target='_blank' title='DiggIt!'><img alt='DiggIt!' border='0' src='圖片網址'/></a>
<!-- google -->
<a expr:href='"http://www.google.com/bookmarks/mark?op=add&ampamp;bkmk=" + data:post.url + "&ampamp;h= " + data:post.title' target='_blank' title='Add to Google'><img alt='google' border='0' src='圖片網址'/></a>
<!-- Udn -->
<a expr:href='"http://bookmark.udn.com/add?f_TITLE=" + data:post.url + "&ampamp;title=" + data:post.title' target='_blank' title='Add to Udn'>&lti;mg alt='Udn' border='0' src='圖片網址'/></a>
<!-- funP -->
<a expr:href='"http://funp.com/pages/submit/add.php?url=" + data:post.url + "&ampamp;s=" + data:post.title' target='_blank' title='funP'><img alt='funP' src='圖片網址' border='0'/></a>

STEP 3：最後加入以下語法

</td></tr></table> </b:if>

做法來自　BaiHwaHwa＊白花花：[分享] 替自己的blogger加上書籤 PartII

按鈕之間如果太擠，可在範本中找到.post img {

於其後加入padding:4px;（數字越大間隔越大）

【10-2 加入噗浪與Twitter推文按鈕】

在跟書籤語法相同的位置插入以下兩段語法

<a expr:href='"http://plurk.com/?status=" + data:post.url + " " + "(" + data:post.title + ")"' target='_blank' title='推文至plurk' ><img src='圖片網址' style='border:0; weight:16px; height:16px;'/></a>

<a expr:href='"http://twitter.com/home?status=" + data:post.title + data:post.url' target='_blank' title='推文至twitter' ><img src='圖片網址' style='border:0; weight:16px; height:16px;'/></a>

語法來自　Not My Business：在Blogger文章中放置噗浪與twitter推文按鈕

【10-3 按鈕圖片要放在哪裡？】

你可以把圖片放在可外連的圖片空間

在免費資源網路社群可以找到許多免費的圖片空間

但是因為我個人不喜歡檔案分散在不同地方

所以我把所有網誌中使用的圖片都放在Picasa網路相簿中

上傳後在圖片上點右鍵「複製圖片網址」即可得到該圖片的網址

提供大家參考

【10-4 課外閱讀】

BaiHwaHwa＊白花花：[分享] 替自己的blogger加上書籤 PartII

0與1謎詭世界：單篇文章加入共享書籤(Social-Bookmarks)

Not My Business：在Blogger文章中放置噗浪與twitter推文按鈕