
本站沒使用這類服務的原因,主要考量為減少 js 的使用,可參考「優化網站效能該注意哪些事?」。除此之外,使用「第三方服務得擔心外部伺服器不穩」,導致分享按鈕開天窗,就像前陣子發生的「Google Drive 外連失效三天」事件。
因為分享按鈕幾乎都能以超連結的方式放在網頁上,如果改用這樣的方式,就不需用 js 來處理了。而「Blogger 官方分享按鈕」正是採用超連結語法,網頁效能較佳、沒有外部伺服器的顧慮。可惜的是,有不少缺點及侷限性,本篇就來一一解決這些問題,並加入以下常見的社交分享按鈕:
- Line
- 撲浪(Plurk)
- 微博(weibo)
- tumblr
- 修改 G+ 按鈕
一、解決官方分享按鈕的缺陷
1. 找回消失的官方分享按鈕
Blogger 原生的分享按鈕,最為人詬病的問題是──你看不到他......為何會如此呢?就像「Blogger 在文章下方顯示作者簡介」所提到的,如果你是喜歡改範本的站長,Blogger 範本可能認不出原本的 code,導致無法顯示官方分享按鈕。然而如果你很少自訂網頁效果、Blogger 範本很乾淨的話,那麼絕對能顯示官方分享按鈕,不過也許這類的站長也不會點進本篇文章,來看怎麼修改分享按鈕了。
好消息是,這個「Blogger 中文社群討論串」, +Mark X 與 +Reggie Li 提供了恢復官方分享按鈕的方法,經實測驗證是有效的,將步驟簡單整理如下:
A. 為了預防不測,請先備份範本
B. 在範本中搜尋字串 includable id='shareButtons',如下圖:

C. 找到後,假設位置在上圖的 1424 行,點擊圖中行號位置的紅框的位置,可使程式碼收合
D. 將 <b:includable id='shareButtons' var='post'>...</b:includable> 全部用滑鼠標示起來 → 全部刪除掉 → 然後儲存範本
E. Blogger 後台 → 版面配置 → 網誌文章 → 編輯 → 如果有勾選「顯示分享按鈕」的話,應該會出現在指定的位置。
F. 如果還是沒出現的話,那麼需要一點修改範本的功力了,請將以下程式碼直接放在你要顯示的位置:
<div class='post-share-buttons'><b:include data='post' name='shareButtons'/></div>
例如放在範本中 <div class='post-footer-line post-footer-line-1'> 之後的位置,或是可參考「Blogger 範本﹍(3) 文章及留言區塊的程式碼」→「三、文章區塊」,找到喜歡的位置來擺放。
2. 行動版無法顯示
Blogger 行動版範本預設會將官方分享按鈕隱藏起來,不知道原因何在,即使你使用 "自訂" 的行動版也看不到。為了解決這個問題,需要修改 CSS,請到 Blogger 後台範本 → 自訂 → 進階 → 新增 CSS,填入以下程式碼:
.post-share-buttons {display: inline-block!important;}
儲存後可強制顯示官方分享按鈕。
3. 分享按鈕太少
Blogger 官方預設的分享按鈕不但選擇少,且多半是歐美在用的,以使用中文的族群而言,大概只有 FB 按鈕用得到而已。本文以下將詳細說明如何進行改造及新增常用熱門分享按鈕,不過請先檢視前兩點,確認網站能看到官方分享按鈕工具列。
二、修改 CSS
為了加入其他自訂的分享按鈕,必須製作新的按鈕圖示。以下 CSS 內容包含 WFU 製作的、符合官方按鈕尺寸的圖片,如果想採用自訂圖案,請自行置換圖片網址即可。
在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。
請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋
<style>
/* 官方分享按鈕 start */
.post-share-buttons a {margin-right: 5px;}
/* G+ */
.sb-gplus {background: url(http://2.bp.blogspot.com/-gQroO_BHG4c/VPA6ApX8zcI/AAAAAAAALHQ/51p6Y2uJ_Ok/s1600/gplus-btn-bw.png)no-repeat left !important;}
.sb-gplus:hover {background: url(http://3.bp.blogspot.com/-V6XXyiGVGPg/VPA6AjSmWZI/AAAAAAAALG8/zWNtlvkz5pA/s1600/gplus-btn-color.png) no-repeat left !important;}
/* line */
.sb-line {background: url(http://1.bp.blogspot.com/-4_uzvn9GTz8/VPAk4-yFdDI/AAAAAAAALGA/XdtL1Li2BiI/s1600/line-btn-bw.png) no-repeat left !important;}
.sb-line:hover {background: url(http://1.bp.blogspot.com/-T5RZpCR2BeI/VPAncHIqHII/AAAAAAAALGY/rzNFP0IL9fw/s1600/line-btn-color.png) no-repeat left !important;}
/* plurk */
.sb-plurk {background: url(http://2.bp.blogspot.com/-SgBivCHfKDQ/VPAncKa-34I/AAAAAAAALGk/_XgAY2fJWYQ/s1600/plurk-btn-bw.png) no-repeat left !important;}
.sb-plurk:hover {background: url(http://4.bp.blogspot.com/-lcApU7siEiw/VPAncGqaOWI/AAAAAAAALGc/n6s-0ZB3u74/s1600/plurk-btn-color.png) no-repeat left !important;}
/* weibo */
.sb-weibo {background: url(http://2.bp.blogspot.com/-be64qwzpkWk/VPA6DSOGo7I/AAAAAAAALHg/VoULW-AhLKY/s1600/weibo-btn-bw.png) no-repeat left !important;}
.sb-weibo:hover {background: url(http://4.bp.blogspot.com/-USdHTcaswXQ/VPA6DfPpLcI/AAAAAAAALHk/VChEWLFLv08/s1600/weibo-btn-color.png) no-repeat left !important;}
/* twitter */
.sb-twitter {background: url(http://2.bp.blogspot.com/-wXGkxq_w8jk/VPA6CiNpaJI/AAAAAAAALH4/QWxURKFY1eA/s1600/twitter-btn-bw.png) no-repeat left !important;}
a.sb-twitter:hover {background: url(http://4.bp.blogspot.com/-WI8shQAauIE/VPA6C5LMC_I/AAAAAAAALHY/O1cD3pMU-88/s1600/twitter-btn-color.png) no-repeat left !important;}
/* tumblr */
.sb-tumblr {background: url(http://1.bp.blogspot.com/-SBlwf9CaYNo/VPA6Bu_JnbI/AAAAAAAALHM/qNZ6wWv2hi4/s1600/tumblr-btn-bw.png) no-repeat left !important;}
.sb-tumblr:hover {background: url(http://1.bp.blogspot.com/-OALUQn7xo5s/VPA6CeyxeOI/AAAAAAAALHU/pjhhih8jGBM/s1600/tumblr-btn-color.png) no-repeat left !important;}
/* 官方分享按鈕 end */
</style>
- 官方分享按鈕預設是全部黏在一起的,請見 CSS 碼開頭的紅色字串,這一行會讓分享按鈕間隔 5px。如果想沿用官方預設效果,請將此行刪除。
- 每個分享按鈕的開頭均用綠色字串標示,如果有不需要的按鈕,請將該區塊的 CSS 碼刪除即可。
- 官方預設已經有 twitter 按鈕,以上的 /* twitter */ 區塊使用了自製的、辨識度更高的圖示代替,如果想沿用預設圖示,請刪除這個區塊。
三、修改程式碼
接下來修改官方分享按鈕的程式碼,接續「一、解決官方分享按鈕的缺陷」→「1. 找回消失的官方分享按鈕」的步驟與圖片:

這次需要點擊上圖行號位置的紅框,讓程式碼展開:

仔細觀察這段程式碼,"全部都黏在一起、沒有斷行、沒有間隔",請注意這個現象。用滑鼠選取上圖紅框區塊的官方分享按鈕原始碼,從 <b:if... 一直到 </b:if> 結束,全部刪除,改貼上以下程式碼:
以下說明請參照以上程式碼行號──
- 所有按鈕程式碼排列的順序,就是由左到右顯示的順序。
- 排列的順序依照 WFU 認為在中文族群熱門的程度,例如 "撲浪"(plurk) 比西方盛行的 twitter 熱門,所以排序在 twitter 之前;不過讀者可依自己的喜好重新洗牌,或是新增額外按鈕,或是刪除不想顯示的按鈕。
- 以上程式碼的排版在範本中的版面比較清楚,但在網頁會造成分享按鈕彼此有間隔。如果想沿用官方分享按鈕原有的效果(沒有間隔),請手動將每段、每行程式碼的空格刪除,讓所有程式碼 "黏在一起"。
- B~C:FB 分享按鈕,為原官方程式碼,未更改。
- E~F:G+ 分享按鈕,因為官方原按鈕佔用太多寬度,故改為這個小按鈕,讓樣式一致,程式碼參考「官方 G+ 分享按鈕」的說明。若需要顯示 +1 數量,建議參考「官方 +1 按鈕」來另外安裝這樣的按鈕。
- H~M:Line 分享按鈕,這段程式碼在行動版、非行動版有不同的執行效果,可參考「Line 分享按鈕﹍各種行動裝置都相容的語法」有完整的原理說明。Line 官方的安裝碼不夠完善,使用這個版本才能讓 Line 按鈕相容所有行動裝置。
- O~T:撲浪(Plurk) 分享按鈕,參考「凍仁的筆記」的程式碼及圖案,依據行動版、非行動版來改寫程式碼,加入了訊息換行的效果。
- V~W:新浪微博(weibo) 分享按鈕,只取大陸最熱門的一個,程式碼修改自「一鍵分享 Blogger 內容到 Sina Weibo」(連結已失效)。若需要其他大陸的分享按鈕,可依照本文程式碼規則自行新增。
- Y~Z:Twitter 分享按鈕,為原官方程式碼,未更改。
- AB~AC:Tumblr 分享按鈕,國外熱門的部落格平台,程式碼參考自「tumblr 官網」,若不需要此項可刪除。
- AE~AF:Pinterest 分享按鈕,為原官方程式碼,未更改。
- AH~AI:Email 分享按鈕,為原官方程式碼,未更改。
以上新增按鈕的部分,分享訊息文字採「標題 + 換行符號 + 網址」的格式,詳細原理可參考「Line 分享按鈕﹍各種行動裝置都相容的語法」。
修改完的效果,可參考這個展示網頁:
可自行測試執行的結果,如果對 CSS 熟悉的話,可自行變更版面效果。本文的操作步驟不少,如安裝上有問題請再提出了。
更多修改官方工具技巧:
謝謝版主的分享~~
回覆刪除在這兒受益良多,每日都有驚喜新發現XD
感謝支持~您的網誌很有設計感 ^^
刪除請問版主,在我套用此篇的語法之後,行動版不會顯示。我的作法是在
回覆刪除b:include cond='data:post.sharePostUrl' data='post'='shareButtons'/
的語法當中加入mobile='yes',但似乎還是沒有辦法顯示,不知道是哪邊出了問題?
這個工具跟 mobile='yes' 沒有關係喔,行動版的問題,文章中有提到,請依文章指示進行試試看。
刪除我有新增了.post-share-buttons {display: inline-block!important;} 這個語法,不過在行動版的部分點分享之後,只有官方的分享按鈕,點擊之後只有原本預設的「G+、Email、Facebook以及Twitter」分享,並沒有看見其他新增的平台。
刪除不好意思,問題有點多,可能看起來有點愚笨....謝謝版主寫的許多文章,小弟受益不少~
不客氣,沒出現的可能性很多,我不知道是哪一種,提問請附網址,方便查看是什麼情形。
刪除http://tnhcark.blogspot.tw/
刪除版大有空再請您看看 <(_ _)>
我看你的行動版,並沒有擺分享按鈕的程式碼喔!首先你要會修改行動版範本,然後「一、解決官方分享按鈕的缺陷」→「1. 找回消失的官方分享按鈕」→ F 點的程式碼,擺在你指定的行動版範本的位置,才會顯示出來。
刪除因為不知道你接觸 Blogger 多久,如果網頁版範本的修改都很熟悉以後,建議再來挑戰行動版會比較好~
其實我很蔡XD,謝謝版大,我會認真學習的!
刪除WFU請教你下,官方默認的twitter分享內容,能不能修改? 現在官方默認的分享內容格式是:網誌標題(blogger基本設置) + 文章名稱 + URL。 現在我想做一點小的修改,或改動下。 這個位置在哪裡能找到它們?
回覆刪除expr:href='data:post.sharePostUrl + "&target=twitter"'
刪除如果熟悉 blogger 語法的話,可以改這裡的內容。
那如果要關閉該怎麼設定呢
回覆刪除後台 → 版面配置 → 網誌文章 → 編輯 → 這裡有選項可關閉
刪除可是我是選關閉 但還是會顯示啊
刪除使用官方程式碼,關閉的選項才能發生作用;你如果改過範本、或改過程式碼,那個選項就不一定有作用。
刪除版主您好:請教一下,我把官方程式碼刪除後,貼上您提供的版本。分享鈕的連結是正常的,但有四個小圖片變成信封圖樣,不知道我哪邊沒設好囧?請版大予以解惑,謝謝~~
回覆刪除http://boleroearth.blogspot.tw/
不好意思找到原因了>v< 原來忘了一併修改CSS,置入版主提供的程式碼,圖片顯示就OK了!
回覆刪除謝謝版主詳細的教學文,獲益良多~~
不客氣~~解決了就好 ^^
刪除您好,我的網址是http://www.jiowoo.com/
回覆刪除想請教您,我在步驟一恢復官方分享按鈕,是有成功的,檢查「顯示分享按鈕」,是可以被勾選的
但是到了全部改完之後,line的分享還是沒有出現@@,是否有什麼地方沒有做好呢?
感謝您的文章指導,總是令我獲益匪淺^^
hi jiowoo, 謝謝支持~
刪除看了您的網頁,不好意思由於是非官方範本、商業網站,不適用免費諮詢喔,可參考 http://www.wfublog.com/2016/08/blogger-free-consultant-apply.html
要麻煩發案給我處理了~
首先感謝版大的教學,我依照教學順序使用後,網路版一切正常
回覆刪除但是行動版卻會原本的分享圖示也出現,如圖所示→https://i.imgur.com/N0KrY8b.jpg
如果只是這樣也還好,我自訂行動版主要就是想有個更好的分享列而已
但改修過的FB與MAIL在行動模式下點下去就顯示「很抱歉,您所查詢的網誌頁面不存在」
只能用原本Blogger內建的去點才有效,弄了半天還是摸不著頭緒,只好來這打擾了!
看來的確是這樣子,也許這就是 Blogger 行動版不顯示這些網頁版的官方分享按鈕,而另外做出你目前看到的「分享」按鈕的原因吧~~
刪除謝謝回報這個狀況,那麼「一、解決官方分享按鈕的缺陷」→「2. 行動版無法顯示」的原因就解開了,建議就恢復原本行動版不能顯示的狀態,也算是一種解決方式~~ ^^
感謝版大回覆,這樣看來,行動版還是只能用那醜醜又只有4種分享的樣式了 @-@
刪除本來想把FB跟MAIL這兩個從語法拿掉算了,但這樣就會讓網路版少這兩個...囧
也可以拿掉 FB、MAIL 喔,如果熟悉 Blogger 判斷式的話,讓 FB、Mail 在網頁版出現就好了~~
刪除