2010年12月28日 星期二

-步驟-新作法!換樣板也不失效 - 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