Top

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分享按鈕,可以依照喜好更動順序。

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



二、程式碼要放的位置

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

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


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

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


.4 放入行動版程式碼

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



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