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

13 則留言:

  1. i believe you a girl like customize coded...hohohoho
    i like it....hihihihi
    Beben si bloglang anu ganteng kalem tea \m/

    回覆刪除
  2. thank you for leaving comments lol

    by the way,
    do you read these articles in traditional chinese, or do you read them in other language via Google Tranlsate?

    I will try to add english version if it's needed

    回覆刪除
  3. i'm read your article in Google Translate...xixixi
    but for tutorial article, i'm just focus in coded writing...kikiki
    because, chinese and english language, i still not understand...hahaha
    like that Fina :)

    回覆刪除
  4. Thank you! I got it!
    for you guys, what I should do is ---- make the code speak by itself! ^o^

    回覆刪除
  5. if there is code, i just was living practices into my demo blog template...hihihi
    like that Fiona ;)) ;) ^_^'

    回覆刪除
  6. 真的好實用^^ 感謝分享~

    回覆刪除
  7. 發現 bug 的話請通知我歐~謝 XD

    回覆刪除
  8. 貼完出現
    我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
    XML 錯誤訊息: The reference to entity "target" must end with the ';' delimiter.

    回覆刪除
  9. @生死定九分:

    你貼的是 2-25 更新版,或是底下原來的舊版?

    我的更新版裡面,程式碼總共有兩段,第一段程式碼的灰色底的部份,多了一行 /b:includable 標籤,我剛才把它移除了,如果你是複製這一段的話,可以在重新試一次嗎?

    如果不是,可以說一下你複製的是哪一段嗎?

    回覆刪除
  10. 我也出現跟「生死定九分」同樣的error message,我是複製紅色的那一段

    回覆刪除
  11. 我後來複製更新版灰色那部份,刪去
      </style'>
    底下
    <b:includable id='shareButtons' var='post'>
    這一行,就成功了

    回覆刪除
  12. 嗚喔,是我的錯,我真粗心耶 orz

    已經修正了,謝謝冰冰抓到 bug XD

    回覆刪除
  13. 這是凍仁的心得,Plurk 都用了幾年了,但今天才幫自家 Blog 加上 Plurk 的分享按鈕。

    by the way, 凍仁的按鈕除了顯示文章標題外,同時也會顯示 Blog 名稱喔!

    -> 凍仁的 Ubuntu 筆記: 【Blogger】新增 Plurk 分享按鈕

    回覆刪除