在 Hexo Blog 上安裝 LikeCoin

之前在網路文章的結尾看到 LikeCoin 按鈕,後來稍微去瞭解了一下,覺得將文章內容轉為實質回饋的概念聽起來滿不錯的,正好 Blog 也缺少按讚功能,因此就打算在 Hexo Blog 加上 LikeCoin 按鈕了。

方法一:直接在 Markdown 中撰寫

Hexo 是使用 Markdown 來撰寫文章,並支援使用 標籤外掛,像是 <iframe> 這個標籤就是用來嵌入外部資源的,我們可以直接透過 <iframe> 來加入 LikeCoin 按鈕。

1
2
3
4
5
6
7
8
9
<div>
<iframe
scrolling="no"
frameborder="0"
style="width:100%; max-width:485px; height:240px; margin:auto; overflow:hidden; display:block;"
src='https://button.like.co/in/embed/[LikerID]/button?referrer="你的文章網址"'
></iframe>
<div></div>
</div>

只要直接在 Markdown 加上去就可以了,不過這麼做的缺點是,如果有很多篇文章,就必須手動一篇一篇加上去,往後若要更動程式碼也會很麻煩,因此文章數量多的話就不是很推薦哩。

方法二:使用 JavaScript 語法生成

這是 LikeCoin 官方 提供的做法,主要是使用 document.write() 來寫入 <iframe> 標籤。
只要把以下語法放在想要產生 LikeCoin 按鈕的地方,像是文章結尾處,並把 Liker ID 改成自己的,就能自動生成 LikeCoin 按鈕囉!

1
2
3
4
5
6
7
8
9
<div>
<script type="text/javascript">
document.write(
"<iframe scrolling='no' frameborder='0' style='width:100%; max-width:485px; height:240px; margin:auto; overflow:hidden; display:block;'
src='https://button.like.co/in/embed/[LikerID]/button?referrer=" +
encodeURIComponent(location.href.split("?")[0].split("#")[0]) + "'></iframe>");
</script>
<div></div>
</div>

方法三:官方 Embedly 支援

最後,其實 LikeCoin 官方也有提供 Embedly 支援 讓我們可以快速地生成 LikeCoin 按鈕。
進入 Embedly 的網站後,把 https://button.like.co/ 網址後方的 ID 換成自己的 Liker ID,右側 Display 可以選擇是否要產生社群分享按鈕、深色主題、SEO、寬度設定、對齊方式……等選項設定。

LikeCoin 官方提供的 Embedly 支援

以上選項都設定完成後,點選 EMBED 就會在下方產生程式碼,把它貼在想要出現 LikeCoin 按鈕的地方就可以哩 👍
例如我是把 LikeCoin 按鈕設置在每篇文章的結尾,也就是下圖中 post.content 的後方,分別有兩處需要加上程式碼。

將 LikeCoin 放在 Hexo Blog 文章的結尾處

補充說明

如果在使用方法二或三的時候,出現載入錯誤的狀況,有可能是因為你有開啟 PJAX 這個功能。PJAX 會讓頁面重新整理時只做局部載入,以提升網頁效能,也正是因為這個原因,它或許會導致 LikeCoin 生成時發生錯誤。
雖然我自己是沒有遇到這個錯誤,但是網路上有人因為使用 PJAX 而出現評論功能載入的問題,因此 LikeCoin 如果透過 JavaScript 生成的話,或許有可能會遇到這個問題!總之就額外寫個補充,希望能讓設定時遇到問題的人有個參考方向。

後話

當初一看到別人家有這個拍手按鈕就好想加上去!也分享給同樣想要拍手按鈕、按讚功能,或者想要賺錢錢的盆友們 🙂

參考資料

  1. 在 Hexo NexT 增加 like Button | 只是個打字的
  2. Hexo NexT - LikeCoin
  3. 如何将 Liker 按钮集成到 Hexo — Hive
  4. 給 Jekyll 加上 LikeButton 賺錢錢 | PinGu の独り言
  5. Hexo 教學 2 iframe(likecoin) | 傑克的程式區

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。