新增Plurk、Twitter及Facebook推文按鈕

隨著網路工具發展愈來越多元的趨勢，當然部落格也要隨著時代日新月異來個更新，新增了三個部落格推文按鈕，分別是Plurk(噗浪)、Twitter(推特)及Facebook(臉書)。


其實這三個工具我很少在用，不過想想還是研究一下，畢竟最近這三者是大熱門的網路工具，參考了Browny Walking: [tip] 在 Blogger 加入 Plurk 推文按鈕及Not My Business---在Blogger文章中放置噗浪與twitter推文按鈕這兩篇文章，如果你是初學者，建議使用這兩篇文章的方式即可，作者都寫得很詳細，綸太郎自己也設了一列推文工具列，和文章上方的共享書籤其實大同小異，可以說是第一代和第二代吧，也把文章原先前頭的Funp推文鈕整合到這個工具列上，讓版面看起來不致太過雜亂，不過建議比較熟悉html語法的朋友再來使用，記得修改前，一定要備份。

進入後台→版面配置→修改Html，勾選"展開小裝置範本"

先新增兩個定義，就是推文工具列(.bookmarkpush)的CSS外觀定義，還有推文工具列的圖片定義(.bookmarkpush img)這裡你可以依據你的版面自行調整，我的圖片都是60px*60px大小，你可以自行到網路上尋找適合你自己的圖片，或是用文字代替亦可。
.bookmarkpush {
padding-top: 10px;
}
.bookmarkpush img{
padding-right: 10px;
}

第一個定義是工具列與上方有10px的距離，第二個則是工具列內的圖片與右邊距離10px，這些都可自行調整。

以上這部分放在CSS區即可，即]]></b:skin>前就行了。

而以下這段則是放在內容結構區Html裡面了(以我的版面應該是在Labels這行下方，就是 <div class='post-footer-line post-footer-line-2'>......</div>這個區塊下)，所以要比較熟悉版面配置的朋友再使用，不然很可能會加錯地方，因為每個模版的配置都不太一樣，在你的版面適當的位置自行加入，我是放在文章後面，訂閱文字之前，原始的語法如下，裡頭紅色的文字，及綠色圖片位址你可以換成你自己的，

<div class='bookmarkpush'>如果您也喜歡這篇文章&#65292;歡迎推文分享......<br/> <div class='funp_button' style='float:left; margin-right:10px; font-size:0px;'><data:post.url/></div> <a expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推文至 plurk'><img src='http://sites.google.com/site/lunfiles/box/plurkc1.png'/></a>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + data:post.url' target='_blank' title='推文至twitter'><img src='http://sites.google.com/site/lunfiles/box/twitterc1.png'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'><img src=' http://sites.google.com/site/lunfiles/box/facebookc1.png'/></a></div>
其中上方紫色的Funp按鈕，你可以選擇不加入，如果要加記得要在</head>前面加入以下這段Java Script的程式碼才能運作，
<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js'/>另外因為綸太郎的推文工具列是在文章展開後(按下繼續閱讀後)才出現分享推文的工具列，所以前後會多加上兩行敘述，
<div align='left'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
推文分享工具列程式碼
</b:if>
</div>
如果沒有加入的話，會在首頁及文章本頁都會出現推文工具列。

另外先前有跟我一樣，在文章末放入訂閱的提醒文字列(歡迎訂閱RSS，最快收到最新的文章。)者，記得上面的
</b:if>
</div>是要加到類似以下這段語法之後
<div class='subscribe2'><a href='http://feeds2.feedburner.com/lun01' title='訂閱0與1謎詭世界'>歡迎訂閱RSS&#65292;最快收到最新的文章&#12290;</a></div>
因為有幾個朋友有使用這個工具列，所以提醒一下。

每個模版都不盡相同，要自己找到對的地方加上去即可，或是加在你原先的共享書籤後頭也行，只是圖片你要自行搜尋較小的圖，然後參考這篇單篇文章加入共享書籤(Social-Bookmarks)，不過這部份就有點複雜了，只要後頭再加上
<a expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推文至 plurk'><img src='圖片網址'/></a>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + data:post.url' target='_blank' title='推文至twitter'><img src='圖片網址'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'><img src='圖片網址'/></a>即可。

延伸閱讀：
Social Media Web 2.0 Cloud Icons
在文章下方放置訂閱RSS的文字敘述
Blogger template模板教學課程---概說及基本結構