2012-05-23

【Blogger】新增 Plurk 分享按鈕

Blog 改版後凍仁就在文章的下方加入了官方的文章分享按鈕,可惜的是沒有凍仁較常用的 Plurk (噗浪),既然 Blogger 官方沒有,那就自己動手的時間了。

預設的 Plurk 分享按鈕。

當滑鼠移至上方並取得焦點的 Plurk 分享按鈕。

1. 效果預覽


目前的 Plurk 分享按鈕有分標準版(PC 版)與手機版,基於節省效能以及提高速度的構思凍仁選擇了手機版。大家可以藉由以下兩個按鈕連結觀看其差別。

1.1. 標準版 (Standard)

      標準版
<a class="btnPlurk" title="Plurk" href="javascript:void(window.open('http://www.plurk.com/?qualifier=shares&status='.concat(encodeURIComponent(window.location.href)).concat(' ').concat('(').concat(encodeURIComponent(document.title)).concat(')')));">  標準版</a>

1.2. 手機版 (Mobile)

      手機版
<a class="btnPlurk" title="Plurk" href="javascript:void(window.open('http://www.plurk.com/m?qualifier=shares&content='.concat(encodeURIComponent(window.location.href)).concat(' ').concat('(').concat(encodeURIComponent(document.title)).concat(')')));">  手機版</a>

2. Blogger 修改


2.1. 新增 CSS 物件


新版的 Blogger 有個很貼心的設計,那就是「新增 CSS」的選項,我們可以直接在此處自訂 CSS,在管理上真的比舊版好用啊!

2.1.1. 進入 範本 → 進階 → 新增 CSS

2.1.2. 建立 Plurk 分享按鈕的物件,其 a:hover.btnPlurk 是當滑鼠移至上方時會套用的物件。
 1 /* == Plurk share button == */
 2 .btnPlurk {
 3     background:url(https://lh4.googleusercontent.com/-vUhp29mMCeQ/T7qNwq4zZ5I/AAAAAAAAJ6A/pcRYFKR8ABk/s800/sb-plurk.png) no-repeat left top !important;
 4     text-decoration: none;
 5     width:20px;
 6     height:20px;
 7 }
 8 
 9 a:hover.btnPlurk {
10     background:url(https://lh6.googleusercontent.com/-mr20nfcSkiI/T7qNwiRt8wI/AAAAAAAAJ6E/ZsSVRfakkIA/s800/sb-plurk-hover.png) no-repeat left top !important;
11     text-decoration: none;
12 }
13 
14 /*
15  * text-decoration: none; //連結不顯示底線。
16  */

[Code on the Pastebin.com]


2.2. 修改 XML


為了避免 Blog 一去不復返,記得修改前請先備份,在範本的右上角有個 備份/還原 的按鈕可以下載 template-*.xml

2.2.1. 範本 → 修改 HTML

2.2.2. 繼續

2.2.3. 展開小裝置範本


2.2.4. 接著找到 <b:includable id='shareButtons' var='post'> 這行開始動工!凍仁曾試著整理縮排,但最後會導致圖示間的間隔過大,不是很美觀。而以下範例中的 <!-- Share with Plurk --> 即是凍仁新增的部份。
 1 <b:includable id='shareButtons' var='post'>
 2   <b:if cond='data:top.showEmailButton'>
 3 
 4     <!-- Share with E-mail -->
 5     <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
 6         <span class='share-button-link-text'>
 7             <data:top.emailThisMsg/>
 8         </span>
 9     </a>
10     </b:if>
11 
12     <!-- Share by Blogger -->
13     <b:if cond='data:top.showBlogThisButton'>
14         <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
15             <span class='share-button-link-text'>
16                 <data:top.blogThisMsg/>
17             </span>
18         </a>
19     </b:if>
20 
21     <!-- Share with Twitter -->
22     <b:if cond='data:top.showTwitterButton'>
23         <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
24             <span class='share-button-link-text'>
25                 <data:top.shareToTwitterMsg/>
26             </span>
27         </a>
28     </b:if>
29 
30     <!-- Share with Facebook -->
31     <b:if cond='data:top.showFacebookButton'>
32         <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
33             <span class='share-button-link-text'>
34                 <data:top.shareToFacebookMsg/>
35             </span>
36         </a>
37     </b:if>
38 
39     <!-- Share with Plurk -->
40     <a class='goog-inline-block share-button btnPlurk' expr:href='&quot;http://plurk.com/m?qualifier=shares&amp;content=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:blog.title + &quot;: &quot; + data:post.title + &quot;)&quot;' target='_blank' title='分享至 Plurk'>&#12288;</a>
41 
42     <!-- Share with Google+ -->
43     <b:if cond='data:top.showOrkutButton'>
44         <a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
45             <span class='share-button-link-text'>
46                 <data:top.shareToOrkutMsg/>
47             </span>
48         </a>
49     </b:if>
50 
51     <b:if cond='data:top.showDummy'>
52         <div class='goog-inline-block dummy-container'>
53             <data:post.dummyTag/>
54         </div>
55     </b:if>
56 </b:includable>

[Code on the Pastebin.com]



2.2.5. 原格式間隔較小,凍仁較喜歡間隔小的感覺,建議使用原格式
1 <b:includable>
2   <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><a class='goog-inline-block share-button btnPlurk' expr:href='&quot;http://plurk.com/m?qualifier=shares&amp;content=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:blog.title + &quot;: &quot; + data:post.title + &quot;)&quot;' target='_blank' title='分享至 Plurk'>&#12288;</a><!-- google+ --><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
3 </b:includable>

[Code on the Pastebin.com]


2.2.6. 恭喜您完成了 Blogger 上的 Plurk 分享按鈕,接著讓我們繼續衝浪唄

2012-05-23


原先的 title 變數是 data:post.title,但它只會文章標題,不會連 Blog 的完整名稱都帶入;改用 data:blog.pageTitle 後會變成在主頁時只抓到 Blog 名稱而沒有文章標題。

改用 data:blog.title: data:post.title 後不管是主頁還是獨立文章都可以正常抓到 Blog 名稱與文章標題,搞定收工!

2012-12-11


Wayne Fu 回報才發現上方的程式碼不易複製貼上,凍仁已將程式碼丟一份至 Pastebin.com,希望能幫大家省下些功夫。

延伸閱讀:
[Blogger]如何對文章標題做SEO優化? - 香腸炒魷魚
Abin's Tech Note: 標籤/搜尋頁面只列出標題

資料來源:
ETBlue 外星人寄居地球: Blogger 新增 Plurk 分享按鈕並與無縫整合官方按鈕
如何在我的網站或部落格上加上噗浪分享功能? | 噗浪通訊社 - 噗浪官方部落格(華文)