【Blogger】新增 Plurk 分享按鈕
Blog 改版後凍仁就在文章的下方加入了官方的文章分享按鈕，可惜的是沒有凍仁較常用的 Plurk (噗浪)，既然 Blogger 官方沒有，那就自己動手的時間了。
目前的 Plurk 分享按鈕有分標準版(PC 版)與手機版，基於節省效能以及提高速度的構思凍仁選擇了手機版。大家可以藉由以下兩個按鈕連結觀看其差別。
新版的 Blogger 有個很貼心的設計，那就是「新增 CSS」的選項，我們可以直接在此處自訂 CSS，在管理上真的比舊版好用啊！
2.1.2. 建立 Plurk 分享按鈕的物件，其 a:hover.btnPlurk 是當滑鼠移至上方時會套用的物件。
為了避免 Blog 一去不復返，記得修改前請先備份，在範本的右上角有個 備份/還原 的按鈕可以下載 template-*.xml。
2.2.4. 接著找到 <b:includable id='shareButtons' var='post'> 這行開始動工！凍仁曾試著整理縮排，但最後會導致圖示間的間隔過大，不是很美觀。而以下範例中的 <!-- Share with Plurk --> 即是凍仁新增的部份。
2.2.5. 原格式間隔較小，凍仁較喜歡間隔小的感覺，建議使用原格式。
2.2.6. 恭喜您完成了 Blogger 上的 Plurk 分享按鈕，接著讓我們繼續衝浪唄！
原先的 title 變數是 data:post.title，但它只會文章標題，不會連 Blog 的完整名稱都帶入；改用 data:blog.pageTitle 後會變成在主頁時只抓到 Blog 名稱而沒有文章標題。
改用 data:blog.title: data:post.title 後不管是主頁還是獨立文章都可以正常抓到 Blog 名稱與文章標題，搞定收工！
經 Wayne Fu 回報才發現上方的程式碼不易複製貼上，凍仁已將程式碼丟一份至 Pastebin.com，希望能幫大家省下些功夫。
預設的 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRWXXDkjEpVW4ueAprcQTI0Q3J3_uFwEK0D-PxAq2FaX6RWM4d3TeXHZgC8cUWhu4tDz9pRNr3818bv7Eyz4BMfSycWnWK0Z4EKXy5A12JSFnp3LCbT_6CDl8fiAR9sxjcGGsewuS4aOo/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhblJh6Y2Wc2tEdgnXNUvpduhxBbcRftapo10OHOtdgpjPWnC-fvu8DrT563fMAWfGq9JRkhz38cR8r_88FAXZmTGScTPwnpiku3E-WHpvGvhctWqT8_hHHksyW44KVAcLCaD0QVmKCEfM/s800/sb-plurk-hover.png) no-repeat left top !important; 11 text-decoration: none; 12 } 13 14 /* 15 * text-decoration: none; //連結不顯示底線。 16 */
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'> 這行開始動工！凍仁曾試著整理縮排，但最後會導致圖示間的間隔過大，
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 + "&target=email"' 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 + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' 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 + "&target=twitter"' 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 + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' 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='"http://plurk.com/m?qualifier=shares&content=" + data:post.url + " " + "(" + data:blog.title + ": " + data:post.title + ")"' target='_blank' title='分享至 Plurk'>　</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 + "&target=orkut"' 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>
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 + "&target=email"' 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 + "&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></b:if><b:if cond='data:top.showTwitterButton'><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></b:if><b:if cond='data:top.showFacebookButton'><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></b:if><a class='goog-inline-block share-button btnPlurk' expr:href='"http://plurk.com/m?qualifier=shares&content=" + data:post.url + " " + "(" + data:blog.title + ": " + data:post.title + ")"' target='_blank' title='分享至 Plurk'>　</a><!-- google+ --><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' 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>
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 分享按鈕並與無縫整合官方按鈕
★如何在我的網站或部落格上加上噗浪分享功能？ | 噗浪通訊社 - 噗浪官方部落格(華文)
感謝 Wayne Fu 提供黑白的 Plurk 按鈕圖示。
回覆刪除http://1.bp.blogspot.com/-bwEKYLM4UGI/UMfIEP6jXEI/AAAAAAAAFPo/brFne107ors/s1600/sb-plurk-bw.png
You are welcome :-)
回覆刪除