-步驟-新作法！換樣板也不失效 - Blogger 插入 Plurk 分享按鈕，跟官方按鈕無縫整合，並自訂按鈕順序（求救：目前超過 140 字須手動刪除，跪求神人指點 Plurk 縮網址功能～）seamlessly insert plurk share button in between default Blogger share buttons, and make it cross-templates - my Blogger template tweak

-- 2011-01-01 文章更新：修改新作法，讓設定好的按鈕在更換樣板時也不會失效
-- 2011-01-04 註記：推文時//無法顯示的問題，請參考這篇 Ryan's Blog 的文章：Blogger 安裝推文至Plurk程式碼時，少了「//」的修正方式
-- 2011-02-16 文章更新：感謝 bingbing in the States 找出 bug，原本的 plurk 程式碼，在 gist 灰色框框中的那一段，少了一行，導致程式碼沒有作用，我是豬頭 >o<
-- 2011-02-25 更新：由於 Blogger 官方樣板修改了，導致自訂的分享按鈕不正常，請大家把程式碼跟著更新，首先，在 b:includable 到 /b:includable 之間，全部置換成紅色字的部份：

<b:includable id='shareButtons' var='post'>
<style type='text/css'>
.post-share-buttons {
  width:145px;
}
.sb-plurk {
  background:url(http://www.etblue.idv.tw/blogs/sb-plurk.png) no-repeat left top !important;
}
a:hover.sb-plurk {
  background:url(http://www.etblue.idv.tw/blogs/sb-plurk-hover.png) no-repeat left top !important;
}
  </style>
  <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
    <span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
  <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>
    <span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
  <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
    <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
  <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
    <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
  <a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' expr:title='data:top.shareToBuzzMsg' target='_blank'>
    <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
  <b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</b:includable>



接著，在你想放 plurk 按鈕的地方，插入這段：
  <a class='goog-inline-block share-button sb-plurk' expr:href='"http://plurk.com/?qualifier=shares&status=" + data:post.url + " " + "(" + data:post.title + ")"' target='_blank' title='分享至 Plurk'>
    <span class='share-button-link-text'>分享至 Plurk</span></a>


這樣就可以更新成 Blogger 新版的分享按鈕了。
--2011-06-12更新：加入 Google +1 按鈕的方式，請見弱格吉米言的教學文章 http://jimmyyen.blogspot.com/2011/06/blogger-sharebutton-1-button.html ，其中，跟我一樣使用 2010 Blogger 新樣板的人，請跳過步驟二。

-- 以下原文 --

omg！我竟然把 plurk 分享按鈕實作出來了！還跟 Blogger 官方的按鈕無縫整合！身為菜鳥的我真是以自己為榮啊（被丟雞蛋）

今年，Blogger 的樣板多了一個大家夢寐以求的功能：share buttons 分享按鈕。不過，預設的按鈕只有五個，依照順序分別是：

1. E-mail 這篇文章（21世紀還有人在用 mail 寄文章嗎？）
2. 在 Blogger 引用這篇文章（不知道別人怎樣，我是很少用啦...）
3. 分享到 Twitter （怎麼會擺在第三個呢？）
4. 分享到 Facebook （怎麼會擺在第四個呢？！）
5. 分享到 Google Buzz （這不是 Twitter 的備份功能而已嗎？）

除了這個預設的按鈕順序讓人不滿意之外，更重要的是，國人第二常用的社交網站，Plurk，完全的被忽略了。雖然官方說會再陸續增加其他社交網站的按鈕，不過，我想要很久以後才會輪到 Plurk 吧。

Google 問卜得知，目前市面上有許多強者做出了又大又漂亮的按鈕，不知道是不是官方的按鈕太寒酸了，好像沒什麼人想要把 plurk 整合到官方的按鈕組裡面。不過，我個人的偏好是，只要可以用官方的就盡量不要用外掛，所以，也只能自己動手做了。

樣板功能：將自製的 Plurk 分享按鈕，與 Blogger 官方分享按鈕無縫整合，並且添加更顯眼的滑鼠動畫效果

實作方式，只要修改幾處的 CSS 即可。

1. 在 Blogger 後台的 Design -> edit HTML 畫面中，勾選 Expand Widget Templates 後，按 Ctrl + F 搜尋 id='shareButtons' ，可以找到這段文字：（為方便解說，把文字的段落分開來，又加上我的中文說明）
   
   <b:includable id='shareButtons' var='post'>
   
   （第一段 Gmail 按鈕）
     <a class='share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
       <span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
   
   （第二段 Blogger 按鈕）
     <a class='share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>
       <span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
   
   （第三段 Twitter 按鈕）
     <a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
       <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
   
   （第四段 Facebook 按鈕）
     <a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
       <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
   
   （第五段 Buzz 按鈕）
     <a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' expr:title='data:top.shareToBuzzMsg' target='_blank'>
       <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
   
   < /b:includable>
   
   這五段文字的順序，就代表著分享按鈕實際上看起來的從左到右的順序。如果想調整順序的話，就趁現在橋一橋吧。
    
2. 在你覺得適當的地方，插入以下這段文字：（我自己是把 plurk 按鈕放在第二位）
   
     <a class='sb-plurk' expr:href='"http://plurk.com/?qualifier=shares&status=" + data:post.url + " " + "(" + data:post.title + ")"' target='_blank' title='分享至 Plurk'>
       <span class='share-button-link-text'>分享至 Plurk</span></a>
    
   （為避免 html 格式的問題，實際上複製程式碼時，請複製下面這段）
   
    
   
3. 這時候預覽樣板的話，還不會看到什麼變化，因為，還需要在 widget 中插入一段 CSS 樣式表。在剛才的 <b:includable id='shareButtons' var='post'> 這一行的下面，插入這段文字：（紅字代表插入的部份）
   
   <b:includable id='shareButtons' var='post'>
     <style type='text/css'>
   .post-share-buttons {
     width:133px;
     height:22px;
     overflow:display;
   }
   a:hover.share-button {
     border:#fd3 solid;
     border-width: 2px 0;
     margin: -2px 0 0 0;
   }
   .sb-plurk {
     width:21px;
     height:22px;
     float:left;
     background:url(http://www.etblue.idv.tw/blogs/sb-plurk.png) no-repeat left center;
   }
   a:hover.sb-plurk {
     background:url(http://www.etblue.idv.tw/blogs/sb-plurk-hover.png) no-repeat left center;
     border:#fd3 solid;
     border-width: 2px 0;
     margin: -2px 0 0 0;
   }
     </style>
   
   這段就是所謂的 CSS 樣式表，原本，CSS 是寫在樣板程式碼的最前端，不過，在樣板的 CSS 裡面做修改的話，雖然效果相同，但是會有個缺點，就是當我們更換樣板時，這些寫在樣板中的 CSS ，就會被新的樣板所覆寫，導致必須重新手動修改樣板 CSS。
   
   因此這次，我們在 share button 這個文章外掛中，插入一小段 CSS ，這段 CSS，就成為 widget 小工具的一部分，而小工具的內容物，是不會受到更換樣板所影響的。因此，辛苦修改的東西，在更換樣板的時候，就不需要重來一遍了。
    
4. 以上，竄改 Blogger 官方分享按鈕的任務完成！

這段 CSS 的設計，在滑鼠滑過時，除了原本的「把按鈕圖示從黑白變成彩色」的功能之外，又多加入一個「按鈕圖示的上方和下方，多出兩道橙黃色的小光棒」的功能。

因為，我覺得 Blogger 預設的效果，實在太不明顯了，按鈕那麼小，滑鼠過去的時候，按鈕又會被指標遮住一大半，如果看網站的人是像我老爸一樣的年齡，光是從黑白變成彩色這樣的效果，對他來說實在不容易辨識。於是就忍不住很手賤的加入了這個「光棒」功能。

至於按鈕的圖檔，是我從網路上抓了 plurk icon 之後，用 GIMP 製作的，製作過程中，直接把 Blogger 官方的圖檔墊在底下，所以外觀上看起來就可以很一致。黑白跟彩色兩張圖檔分別放在： http://www.etblue.idv.tw/blogs/sb-plurk.png 和 http://www.etblue.idv.tw/blogs/sb-plurk-hover.png ，這是我的智邦虛擬主機的空間，你也可以下載回去，放在自己的空間做備份，以防萬一。

對了，萬一圖檔連結真的失效的話，頂多是沒有圖示而已，分享功能本身還是可以正常運作。



～幕後花絮篇～

在改這段 CSS 的時候，一直感到很奇怪，整個樣板裡面，到處都找不到原本的分享按鈕的 CSS 設定，這... 這要叫我從何抄起呢？

後來不信邪，在實際瀏覽頁面的時候，按下 Ctrl + U 檢視原始碼，然後按 Ctrl + F 搜尋 text/css ，果然在 html 開頭的附近，title 的正下方，找到了這一行 <link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/3671631648-widget_css_2_bundle.css' /> 樣式表的外部連結。點開來搜尋 share-button，果然被我找到下面這段 CSS ：（原本都黏在一起，現在被我排版過了）

.post-share-buttons{
display:-moz-inline-stack;
display:inline-block;zoom:1;
*display:inline;margin:0 .5em 0 .5em !important;
width:106px;vertical-align:middle
}
.share-button{
display:block;
width:21px;
height:22px;
float:left;
background:url("/img/share_buttons.png") no-repeat left !important;
overflow:hidden
}
a:hover.share-button{
text-decoration:none
}
.share-button-link-text{
position:absolute;
left:-999px
}
.sb-email{
background-position:0 0 !important
}
a:hover.sb-email{
background-position:0 -22px !important
}
a:active.sb-email{
background-position:0 -44px !important
}
.sb-blog{
background-position:-21px 0 !important
}
a:hover.sb-blog{
background-position:-21px -22px !important
}
a:active.sb-blog{
background-position:-21px -44px !important
}
（以下省略）

然後我才發現，背景圖片可以這樣用...

做一張十全大補背景圖片，然後在 CSS 裡面，只要修改景圖片的擺放位置，在視覺上看起來就完全像是另一張圖檔了。有這麼賤的方法，當然要趕快學起來 XD