Blogger 文章結尾加入自製社群分享鍵（包含LINE）

圖.1 目前電腦版和行動版的分享按鈕

前陣子一直很想在 Blogger 文章結尾加入社群分享按鈕，有試過第三方服務(shareaholic)，不過後來覺得可以自己調整按鈕比較自由。Shareaholic 的好處是有非常多的社群網站可以選擇，在自己網站顯示的圖案也算簡單漂亮。就是有兩個地方讓我很不滿意-無法調整按鈕排版、沒有 LINE 分享鍵。於是這幾天又在網路上搜尋一些方法，找到這篇文章還有這篇文章，分別是 LINE 分享鍵的做法還有社群網站分享鍵的程式碼。但是問題就來了，有了程式碼可以調排版，但是對於 Blogger 範本沒這麼熟的人，根本不知道要放哪裡，等於是無法下手。最後皇天不負苦心人，找到技研可樂的這篇文章，所以這篇文章可以說是前3篇文章的整合並加入自己修改的部分。

我的需求有以下幾點：

1.分享鍵圖案、排版自己設定

2.分享視窗可以調整大小

3.最重要的，要有 LINE 分享鍵

如果讀者只是希望有個分享鍵並且對 Blogger 範本程式碼一竅不通，又沒有像我這麼龜毛，其實用 shareaholic 這類的服務就夠了。那如果你是跟我一樣龜毛的人，可以參考下面我的操作過程。(強烈建議在修改 Blogger 範本前事先備份範本)

一、準備好程式碼

• 桌面版

<b:if cond='data:blog.pageType == "item"'>

<div style='font-size: large; letter-spacing: 1pt; line-height: 250%'>分享本文&#65306;<br/>

<a href='javascript: void(window.open(&apos;http://www.facebook.com/share.php?u=&apos;.concat(encodeURIComponent(location.href)),&apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&apos;));' style='margin-left: 5px; margin-right: 13px'><img border='0' src='圖片網址' title='Facebook ! ' width='40'/></a>

<a href='javascript: void(window.open(&apos;https://plus.google.com/share?url=&apos;.concat(encodeURIComponent(location.href)),&apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&apos;));' style='margin-right: 13px'><img border='0' src='圖片網址' title='Google plus ! ' width='40'/></a>

<a href='javascript: void(window.open(&apos;http://twitter.com/home/?status=&apos;.concat(encodeURIComponent(document.title)) .concat(&apos; &apos;) .concat(encodeURIComponent(location.href)),&apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&apos;));' style='margin-right: 13px'><img border='0' src='圖片網址' title='Twitter ! ' width='40'/></a></div>

</b:if>

• 行動版

<div>分享本文：<br/>

<a href="javascript: void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)),'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'));"><img border="0" src="圖片網址" title="Facebook ! " width="50" /></a>

<a href="javascript: void(window.open('https://plus.google.com/share?url='.concat(encodeURIComponent(location.href)),'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'));"><img border="0" src="圖片網址" title="Google plus ! " width="50" /></a>

<a href="javascript: void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href)),'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'));"><img border="0" src="圖片網址" title="Twitter ! " width="50" /></a>

<a href="javascript: void(window.open('http://line.naver.jp/R/msg/text/?'.concat(encodeURIComponent(location.href)) ));"><img title="Share to Line" src="圖片網址" border="0" width="50" /></a></div>

會分成兩個版本主要是因為目前 LINE 只支援手機分享，無法在電腦端分享文章(即使你電腦有裝 LINE 也不行)。另外，其實在桌面版介面安裝 LINE 分享按鈕也沒必要，所以就依照桌面版和行動版的差異做了兩份程式碼。由上而下分別是 Facebook, Google+, Twitter 分享按鈕，可以依照喜好更動順序。
2019.7.3 更新：LINE 目前已支援網頁版分享功能

注意到桌面版程式碼頭尾的 2 行橘色，如果沒有這兩行，在 Blogger 首頁預覽文章時就會出現分享按鈕。這 2 行 code 目的就是要告訴 Blogger，這些分享紐只有在文章頁面時才可以顯示出來。而「圖片網址」裡面請填上自己的圖片來源網址，喜歡什麼圖就放什麼圖，不過最好是能讓讀者一眼就知道是哪個社群網站。至於如何把圖片放到雲端空間並生成網址，可以參考我先前的這篇文章。



二、程式碼要放的位置

接下來進入 Blogger 後台自訂範本的地方，如果你對 Blogger 範本程式碼非常不熟悉，是那種深怕改動程式碼會讓整個網站掛點的人，可是都看到這裡了，關掉網頁好像又很不甘心，那請你在做程式碼更動前先備份。一旦更動程式碼後真的發生悲劇，可以馬上還原先前的範本。

圖.2更動程式碼之前，記得先點右上角的備份。備份完後就可以開始編輯HTML了

圖.3 首先放入桌面版程式碼

進入編輯介面後，用右上角的搜尋功能搜尋<div class='post-footer'>，整個範本中應該會搜尋到2個目標，我們要放程式碼的地方是在第 2 個目標的上面。如圖3所示，將桌面版程式碼放到目標上方就好了，建議像我一樣註解文字，以便日後可以快速搜尋到。

圖.4 放入行動版程式碼

接下來加入行動版的程式碼，這次搜尋<data:post.body/>，整個範本中有3個目標，我們在第1個目標的後面加入上面的程式碼，一樣建議加入註解文字方便日後搜尋。程式碼都放好之後，就可以按「儲存範本」，趕快去自己的 Blogger 看看了。



看到這裡其實大致完工了，如果你的 Blogger 文章下方能像下面一樣有分享按鈕，那恭喜你！用這個方法，只要用官方提供的分享網址、自己找一張圖，套到上面程式碼中，就可以真正做到自製社群分享鍵了。