以JavaScript在Blogger等各家網誌的文末、側欄產生LikeButton

修改

2019/6/12 網址的部份，加上處理「#」。location.href.split("?")[0]後面再加上.split("#")[0]。

因為Ami的教學文，網誌建在Blogger的朋友也紛紛在文末放上LikeCoin按鈕，但最近想幫朋友點LikeCoin時，發現幾篇我很愛的文章，因為太舊所以他都沒有放拍手按鈕……

目前LikeCoin有幫Wordpress、Medium等部落格系統設立對應的外掛與措施，但好像只有Wordpress可以自動每頁產生按鈕。

其實從Ami寫給Blogger的教學可以得知，僅須一段iframe語法，就能讓網頁顯示拍手按鈕！所以透過側欄小工具或者修改主題原始碼，置入JavaScript，就可以達成自動產生LikeButton囉！

這篇文章主要分下面五個部份。已經有手動放過幾篇按鈕的朋友，可以試試看第四段的語法，應該可行。

1. JavaScript自動產生對應iframe的語法
2. 放側欄
3. 放文章末段
4. 判斷是否已有內嵌過LikeButton
5. Xuite等無法修改版面的網誌

JavaScript自動產生對應iframe的語法

<script type="text/javascript">
    document.write("<iframe scrolling='no' frameborder='0' sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation' style='height: 212px; width: 100%;' src='https://button.like.co/in/embed/[Liker ID]/button?referrer="+encodeURIComponent(location.href.split("?")[0].split("#")[0])+"'></iframe>");
</script>

語法說明

上面語法是參考Wordpress外掛的版本。因為有些網誌可能沒導入jQuery，所以我還google了一下原本的要怎麼寫，整個忘光光XD

首先將iframe改用JsvaScript輸出，接著把referrer要設定的該頁網址改以「location.href」讀取，這樣JS 就會自動產生該頁網址。請記得修改[Liker ID]。

但這樣是不夠的，我們需要避開手機版面或fb等加上的參數，如果是Blogger的話，還要再加上Blogger的判斷式，讓按鈕只會顯示在內文而不顯示在其他地方。

順便提一下，原本我外層用單引號，內層用雙引號，結果被系統全部改成單引號，後來我改成外層雙引號，內層單引號就OK了。

刪除參數

在產生網址前，會碰到一個很麻煩的事情，就是參數……像Blogger有些模板就的手機頁面就會多出「?m=1」，而且點擊「繼續閱讀」之類的連結時，也會在網址後面加上「#more」這類文字。

我想到兩種作法，第一種是刪掉所有?後的參數，第二種是只取代「?m=1」、「#more」。

我個人偏好第一種，因為也可以刪掉從fb過來的參數，但前題是你的文章不是透過網址問號後的參數讀取。第二種還有很多問題，需要再加強語法，像是改成「m=1」保留問號，讓它讀其他參數，但一樣會碰到fb連結的參數問題……我們還是放棄第二個方法吧。

1. location.href.split(“?”)[0].split(“#”)[0]
2. location.href.replace(“?m=1”, “”) .replace(“#more”, “”)

本篇程式碼都用第1種方式，大家請自行斟酌。

Blogger的判斷式

使用下方的語法，把JS整個包起來，就可以限制在文章頁面才執行，首頁或其他地方不會出現。完整程式碼可以參考第4項「判斷是否已有內嵌過LikeButton」。

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

放側欄

以Blogger為例，在版面配置的頁面，任一地方新增「HTML/JavaScript」小工具，貼上上方的JavaScript語法即可。

不過大家應該比較想要放文末吧XD 這段就隨便看看，請往下拉。

放文章末段

除了最簡單的放側欄外，若部落格平台能修改主題樣式的原始碼，也可以修改為放在文章末段，這樣也很省事。

這邊一樣以Blogger為例，進入「主題」後點擊「編輯HTML」並搜尋「data:post.body」，那段可能就是產生內文的參數。原則上只會搜到一個，若搜到兩個，表示模板不是RWD的，一個是電腦頁面，一個是手機頁面，兩段都要放。

原本手機頁面因為會跑出「?m=1」而需要另外處理程式碼，但我已經決定全部都把參數消掉，所以兩段可以貼一樣的。但請記得手機版面要改成「自訂」，這樣才會去讀我們程式碼。

以「簡單」這個主題為例，它有兩個 「data:post.body」 ，第一個是手機版的畫面，第二個是電腦版，我們兩邊都加上程式碼後，要再去確認手機版有切換成「自訂」。

搜尋到的電腦版完整原始碼可能如下。

<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

這段div包起來的就是內文，所以接著只要在這段</div>的下方貼上方方以<script>產生的iframe語法就可以囉！不過像這樣直接貼上的話，幾乎所有出現文章的頁面都會有按鈕，連首頁都一堆同樣的按鈕，所以要再搭配Blogger的判斷語法「<b:if cond=’data:blog.pageType == “item”‘></b:if>」。

完整如下，一樣記得修改[Liker ID]為自己，像我的就是「… embed/danielgau/button? …」

<b:if cond='data:blog.pageType == "item"'>
    <script type="text/javascript">
        document.write("<iframe scrolling='no' frameborder='0' sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation' style='height: 212px; width: 100%;' src='https://button.like.co/in/embed/[Liker ID]/button?referrer="+encodeURIComponent(location.href.split("?")[0].split("#")[0])+"'></iframe>");
    </script>
</b:if>

如果你的「post-footer」沒有設定特殊的樣式、沒有其他東西會被影響，也可以把程式碼放在裡面。可以自己找適當的位置，做點調整。

判斷是否已有內嵌過LikeButton

不確定這樣對效能影響有多嚴重，不過與上方同樣的位置，可以改放下面這段語法。

一樣是用我淺薄的JavaScript技術寫的，先取得頁面上所有iframe，再判斷是否有內嵌「button.like.co」的，若無則自動產生。

<b:if cond='data:blog.pageType == "item"'>
    <script type="text/javascript">
        var hasLikeButton = false;
        var iframes = document.getElementsByTagName("iframe");
        Object.keys(iframes).forEach(function(element){
             if(iframes[element].src.indexOf("button.like.co")){hasLikeButton = true;}
        });
        if(!hasLikeButton) {
            document.write("<iframe frameborder='0' sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation' scrolling='no' src='https://button.like.co/in/embed/[Likre ID]/button?referrer="+encodeURIComponent(location.href.split("?")[0].split("#")[0])+"' style='height: 212px; width: 100%;'/>");
        }
    </script>
</b:if>

其實這只是很單純的用JavaScript抓網址，無法應付太複雜的情況。同理可以套到所有支援JavaScript、iframe又能修改佈景主題的網誌平台，不過要注意更新的時候不要蓋掉了。

Xuite等無法修改版面的網誌

Xuite似乎無法修改版面，我用了一下，應該是在下這個頁面調整，但他不能把自由欄位塞到中間，只能放側欄……所以這邊要換個寫法。

我們不是直接輸出iframe，而是擺在頁面中其他地方（例如側欄），先用JS找到內文的大框，抓出來後，再把iframe塞進去。我這邊看內文的div標籤是「content_all」，所以寫了下方語法。

請新增自由欄位，然後輸入下方程式碼，並將這個欄位放在不顯眼的地方，例如側欄最末，因為他這個欄位不會顯示東西，而是去控制內文。如果已有自由欄位，也可以直接加入下方語法。記得改掉Liker ID喔。

※手機板無法顯示，因為沒有側欄可以作弊XD 而且網址會變，這樣又要再處理網址……

<script type="text/javascript">
    var content = document.getElementById("content_all");
content.insertAdjacentHTML("afterend", "<iframe scrolling='no' frameborder='0' sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation' style='height: 212px; width: 100%;' src='https://button.like.co/in/embed/[Liker ID]/button?referrer="+encodeURIComponent(location.href.split("?")[0].split("#")[0])+"'></iframe>");
</script>

參考資料

• LikeCoin如何放在Blogger或其他地方 – 寶石般的文具箱
• Blogger：常用頁面判斷式用法 – 技研可樂

什麼是LikeCoin？

• 從部落格創作獲得收入，LikeCoin使用感想與收益報告 ｜ 栞的心靈角落
• LikeCoin 讚賞公民計劃，從部落格創作獲得收入 ｜ 小云的隨便亂記
• [小結] LikeCoin 半年小收益 ｜ …:: Empty Space ::…全部隨手寫
• 被動收入 這些年的部落格收益公開比較與感想吐槽(BloggerAd、痞客邦pixnet、博客來AP、LikeCoin) ｜ 寶石般的文具箱
• 030/100 化讚為賞的 LikeCoin ｜ 非‧推理小說研究社

You may also like

• 

  JLPT日檢書《TRY！日本語N2達陣：從日檢文法展開全方位學習》學習感想
• 

  下一個台灣虛擬主機要買哪家？
• 

  《讀日文：潛入推理迷霧看日本經典》日文跟推理都不懂也能被愛推坑
• 

  一邊複習日本推理知識一邊學日文：《日本懸疑物語100談：Nippon所藏日語嚴選講座》
• 

  WantEasy網易資訊簡單使用心得與WordPress搬家過程
• 

  註腳外掛：footnotes與Easy Footnotes