新增分享至Plurk按鈕

我只能說

Blogger的樣板

真他X的難改

我只是想放個小小的Plurk分享按鈕就弄了老半天 orz...

google到的好像又不合我的需求所以只好自己try

作法其實是很簡單的，只是我天性駑鈍搞了很久才搞定 orz




步驟如下：

首先找到

/* Content
----------------------------------------------- */

這邊自訂CSS的區域

然後把下面的CSS語法放入

.sb-plurk {
    background-image:url('http://img651.imageshack.us/img651/3968/plurkiconbloggersb.png') !important;
    background-position: 0 0 !important;
}
a.sb-plurk:hover {
    background-position: 0 -20px !important;
}


接著再找到

<b:includable id='shareButtons' var='post'>

然後把下面這段放進去

<a class='goog-inline-block share-button sb-plurk' expr:onclick='&quot;window.open(&apos;http://www.plurk.com/?qualifier=shares&amp;status=&apos;.concat(encodeURIComponent(&apos;&quot; + data:post.url + &quot;&apos;)).concat(&apos; &apos;).concat(&apos;(&apos;).concat(encodeURIComponent(&apos;&quot; + data:post.title + &quot;&apos;)).concat(&apos;)&apos;));&quot;' expr:title='&quot;Share to Plurk&quot;' target='_blank'>
<span class='share-button-link-text'>Share to Plurk</span>
</a> 

搞定。

--


以下是關於修改過程的一些屁話

原本的分享按鈕，都有寫<b cond:> 巴拉巴拉看起來一堆複雜的要命的東西，其實我也不知道這些狀況是在那裡定義的，所以我就放棄了。

重要的是<b:includable id='shareButtons' var='post'>這個，總之就是放分享按鈕的區塊，知道是在這一區就好辦拉！

仿照其他按鈕的語法，結構基本上是這樣<a><span>說明文字</span></a>

不過如果真的這麼簡單我就不用搞老半天了(眼神死

分享到plurk的網址列需要經過編碼，plruk才會吃，所以用expe:href寫是不行的 (說不定是可以拉....只是我沒試成功...

所以呢就找到expr:onclick，這邊就是對應到一般html的onclick
接下來就是卡我卡最久的地方了，TRY了好幾次才成功=皿=

expr:onclick=' 執行的js '，這邊的單引號 ' 之後出現在網頁上是雙引號 "

要執行的js，在噗浪通訊社的網誌上面有提供，接著就是修改成blogger肯吃的格式

中間執行的js 必須要用 &quot; 包起來(詳見<a href="http://www.w3schools.com/tags/ref_entities.asp">http://www.w3schools.com/tags/ref_entities.asp</a>

而原本的js中，單引號的部分要用&apos;來取代，這樣blogger的樣板引擎才能夠正確判讀
(與其說是能夠正確判讀，不如說是防止有人想幹壞事)

基本上這樣就搞定一半了，再來是文章標題跟文章連結的問題

噗浪通訊社提供的js只有抓整個網頁的網址跟標題，這樣在blogger首頁時，分享按鈕會變成分享blog而不是文章，所以需要進行一些更改

在blogger的樣板引擎中，代表文章標題的變數是 data:post.title，代表文章永久網址的連結是data:post.url

這時候我們只要把他代進去就可以了

對，我本來也是這麼想的，可是事情沒有憨人想的這麼簡單


上面用&quot;包起來的部分，blogger的樣板引擎會如實的顯示出來，也就是在裏面的變數會毫無反應，只是一串文字

所以在代入的時候就要用&quot; + data:post.title + &quot; 這樣的方式，變數才會發揮作用


然後在js中，傳入的參數最好用單引號包起來，免得出現空格或其他符號就爆炸

所以這邊用&apos; 把 &quot; + data:post.title + &quot; 給包起來

這樣一來連結基本上就能work了(只要有開js的話...

然後我又比較龜毛一點，希望滑鼠一上去也會出現說明文字，這部分就是設定expr:title


再來就是css的部分

基本上是沿用其他按鈕的css，只有其中一個sb-plurk這個是要自己修改的
(mail的那個按鈕就是sb-mail


原本的分享按鈕的作法是一次把全部的圖讀進來，hover的時候改變背景圖片的位置

這樣做的好處是在hover的時候不會出現圖片暫時消失的情況

雖然原本的分享按鈕背景圖似乎是3 * 5 個 20*20 的圖片組合起來的一張圖

不過第三組圖好像有或沒有都沒差

所以我也只用了20*40的圖片而已

以上！

該死的新增分享按鈕心得文