以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>」。

圖片中的 location.href 需要用encodeURIComponent()包起來,並刪除參數,請見下方文字,我懶得改圖XD

完整如下,一樣記得修改[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?

如果您喜歡這篇文章的話,歡迎點擊下方按鈕為我拍手五下~

回饋由LikeCoin基金會出資,您只要註冊/登入帳(FB、Google帳號皆可)即可拍手贊助。

我不敢看自己寫的東西

12 個回應

  1. 阿森表示:

    成功了!超超超級感謝浩剛 >_<

  2. 柯太太表示:

    使用大成功!!!
    感謝再感謝!!!

    • 浩剛表示:

      後來檢查發現手機版沒有按鈕,orz。
      看起來也沒有地方可以塞語法,所以應該只有電腦版的頁面可以用這種方式顯示按鈕,歹勢啊。

  3. Leo表示:

    這個在medium也適用嗎?

  4. 天空表示:

    請問浩剛, 不知道我是那裡沒弄對, 我就全部copy and paste 到你上面提的地方, 把我的likeid加進去, 但沒成功耶…. 可以教一下嗎? 謝謝.

  5. 天空表示:

    謝謝浩剛回覆, 我現在是在這裡試, 但沒成功….

    https://365testonly.blogspot.com/

    謝謝!

    • 天空表示:

      放了我放程式碼的圖在網站上, 請浩剛有空時幫忙指點一下, 謝謝

    • 浩剛表示:

      點進頁面的話都有顯示Like Button喔!例如「test like coin」這頁點進去是OK的。

      如果您是指連結的那個首頁沒有出現Like Button的話,因為這個語法是抓取當前頁面的網址,若在首頁或者分類中顯示的話,會造成like都拍到首頁而非文章,所以我加了「」限定只顯示在文章內頁。

  6. 天空表示:

    謝謝浩剛, 真的有了耶. 奇怪, 那為什麼頭幾天都沒有呢? 我現在試試我的部落格上看看,
    再次感謝浩剛的分享

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *