2 of 19

LikeCoin button 讚賞鍵

LikeCoin button 讚賞鍵有什麼功能？

LikeCoin button 讚賞鍵，是讀者和你的作品互動的核心，用以讚賞、分享和存檔。

透過每份作品下方的讚賞鍵，讀者可以：

化讚為賞：把每一個按讚，化為實際、可衡量的收益
精選內容：以 Super Like 把分享至 depub.space，推薦給社群
收集 Writing NFT：內容已存檔至區塊鏈，幫助溯源，免被竄改

使用案例

LikeCoin button 讚賞鍵

Matters 上所有文章已預設提供 LikeCoin button 讚賞鍵；媒體特約作者，把 Liker ID 提供給香港獨立媒體網等合作平台，即能為文章安裝讚賞鍵；自媒體作者於自架 WordPress 網站安裝 LikeCoin 外掛，每篇文章下方便自動加上讚賞鍵，Medium 作者可在文章中自行貼上讚賞鍵鏈結，也可在 Blogspot ( Blogger.com )、痞客邦及其他平台上使用。‌

NFT 小部件

如文章網址已出版為 Writing NFT，LikeCoin button 讀賞鍵將進化為具備拍手及收集 Writing NFT 功能的 NFT 小部件。

Matters

如何在 Matters 寫作賺取 LikeCoin 成就？

Matters 預設已經整合讚賞鍵。只需綁定 Liker ID 及 Matters ID，你的作品便立即可以化讚為賞了。假如你還未有 Liker ID，建議你在 Matters 註冊並一拼生成 Matters ID 及 Liker ID。

假若你經已有 Liker ID 請留意綁定細節，否則有機會在註冊 Matters 時生成了多餘的 Liker ID。

如何在 Matters 綁定現有 Liker ID

一旦綁定 Matters ID 跟 Liker ID 便無法解綁。敬請留意。

步驟一

訪問 Matters 網站並登入。

步驟二

點「我的」，再點設定。

步驟三

在錢包設定的 Liker ID 點「設置」。

步驟四

若你已註冊了 Liker ID，請「綁定現有 Liker ID」；若你還未註冊 Liker ID 並想立即生成一個新的 Liker ID，點「創造新的 Liker ID」。

步驟五

系統跳轉至 Liker Land 並登入即可完成綁定。

Matters 專屬的讚賞鍵，就緒。

Matters 的讚賞鍵很簡潔，位於文章的最底部，見下圖。

送出 Super Like 的狀態如圖。

參考文章

玩轉 Matters 實用指南

「一鍵搬家」功能

Matters 於 2020年3月推出一鍵搬家功能，所有擁有 Medium 帳號的作者，都可以透過這個便捷的功能，快速一鍵搬家，把文章搬到 Matters ，化讚為賞。

參考文章

一鍵從 Medium 搬家到 Matters

Medium「一鍵搬家」功能試用手記

一樣菜百樣賣：Medium一鍵搬家到Matters的試用心得

Matters 客服

用戶可循以下渠道尋找 Matters 協助：

Matters Discord
Matters 電郵
在 Matters 網站文章或留言 tag Matty

出版 Writing NFT

詳見：

出版 Writing NFT

其他自架網站

如何在自擁有的網站加入 LikeCoin button？

ghost

如何在 ghost 文章中加入 LikeCoin button

感謝用戶 STANLEY TSAU 的教學範本，留意 ghost 是需要付費加入會員方可使用。

安裝讚賞鍵以前，請先註冊 Liker ID。

修改 post.hbs

將 IFrame 代碼加入 post.hbs並將 [LikerID] 更改為你的 Liker ID

<div class="likecoin-embed likecoin-like-button" style="text-align:center">
    <div>
        <iframe scrolling="no" frameborder="0" src="https://button.like.co/in/embed/[LikerID]/button/?referrer={{ url absolute="true"}}" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation allow-storage-access-by-user-activation"></iframe>
    </div>
</div>

修整讚賞鍵外觀

增加以下代碼到 css

.likecoin-like-button {
  max-width: 485px;
  max-height: 240px;
  margin: 0 auto;
}
.likecoin-like-button > div {
  position: relative;
  padding-top: 49.48454%;
}
.likecoin-like-button > div iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

完成。

參考文章

LikeCoin button ghost integration

Hexo

如何在 Hexo 開發環境的文章中加入 LikeCoin button

感謝用戶只是個打字的的教學範本。

安裝讚賞鍵以前，請先註冊 Liker ID。

增加根據文章網址，自動產生讚賞鍵鏈結

在 themes/next/layout/_custom/ 目錄下新增一檔案 like_coin.ejs 並貼上下列程式碼，並將 [LikerID] 更改為你的 Liker ID。

<div>
  <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/[LikerID]/button?referrer=" +
      encodeURIComponent(location.href.split("?")[0].split("#")[0]) + "'></iframe>");
  </script>
<div>

在每篇文章末端加上讚賞鍵

打開 themes/next/layout/_macro/post.swig 在合適的位置把 like_coin.ejs 放置好

 {% if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
+      {% include '../_custom/like_coin.ejs' %}
      {% include '../_partials/post/post-related.swig' with { post: post } %}
    {% endif %}

如果您沒有開啟相關文章的話，則加在往上幾行的 {{ post.content }} 後方

        {% else %}
          {% if post.type === 'picture' %}
            <a href="{{ url_for(post.path) }}">{{ post.content }}</a>
          {% else %}
            {{ post.content }}
+      {% include '../_custom/like_coin.ejs' %}
          {% endif %}
        {% endif %}
      {% else %}
        {{ post.content }}
+      {% include '../_custom/like_coin.ejs' %}
      {% endif %}
    </div>

完成後就可以看到讚賞鍵出現在文章中。

參考文章

在Hexo NexT增加like Button

如何将Liker按钮集成到Hexo

藍圖重生（一）：給 Hexo 文章加上 LikeCoin 的贊賞鍵

Hexo教學2 iframe(likecoin)

Hugo

如何在 Hugo 開發環境的文章中加入 LikeCoin button

感謝用戶 Wancat 的教學範本。

安裝讚賞鍵以前，請先註冊 Liker ID。

先為你的網站選擇一個主題，以下採用 CleanWhite 這套主題作例子。

Hugo 可以使用自訂 Layout 的方式，在不改變主題的情況下改變網站設計，用戶可透過這個方式在每篇文章下放置讚賞鍵。

首先覆蓋文章的模板，將 theme 的 layouts 資料夾複製到專案目錄下

cp -r theme/YOUR_THEME/layouts/ .

Hugo 中的 Partial Templates 可以讓你建立小模板，嵌入在頁面中。在 layouts 的 partials 資料夾建立 likecoin.html，寫入以下內容。你也可以在這裡以 HTML 格式加上想給讀者看的說明文字

<iframe class="LikeCoin" height="235" src="https://button.like.co/in/embed/{{ .Site.Params.likerID }}/button?referrer={{ .Permalink }}" width="100%" frameborder=0></iframe>

接下來在 config.toml 中加入以下程式碼，並將 [LikerID] 更改為你的 Liker ID

[[params]]
	likerID = "likerID"

接著編輯文章使用的模板，通常位處於 _default/single.html。這就是一個 Go Template，在你想要的地方插入，建議插在 {{ .Content }} 後面，這樣 LikeCoin button 就會接續出現文章下面

{{ partial "likecoin.html" . }}

這樣 Hugo 就會將 LikeCoin 這個 partial render 到你的文章中了。記得加上 “."，沒有的話，LikeCoin 的模板讀不到資料。留意整個過程都不需要修改 theme 的原始程式

最後執行 hugo server 預覽你的網站。

參考文章

Hugo 安裝 LikeCoin 教學

Hugo使用Likecoin教學

[hugo]在hugo安裝likecoin按鈕

【LikeCoin應用技】我是如何想到在Markdown格式裡面加入LikeCoin讚賞鏈（附上教學）

Jekyll

如何在 Jekyll 開發環境的文章中加入 LikeCoin button

感謝用戶 PinGuの独り言的教學範本。

安裝讚賞鍵以前，請先註冊 Liker ID。

從 _config.yml 設定 liker_id

先在 _config.yml 加入 liker_id 鍵值，並將 [LikerID] 更改為你的 Liker ID

# Enter your Liker ID to enable LikeCoin button
liker_id: [LikerID]

宣告在_config.yml 的變數可以從物件 site 中取得，也就是 {{site.liker_id}}

https://button.like.co/in/embed/{{site.liker_id}}/button?referrer={{ page.url | absolute_url | cgi_escape }}

插入 iframe

先建立讚賞鍵的 HTML 片段

{% if site.liker_id %}
<iframe
  src="https://button.like.co/in/embed/{{site.liker_id}}/button?referrer={{ page.url | absolute_url | cgi_escape }}">
</iframe>
{% endif %}

用 if 檢查 liker_id 是否存在。接著要在 post 樣板裡加入剛才的片段，找個接近區段結束的地方寫上 {% include likeco.html %}

建置一次，文章末端已經可以看到讚賞鍵，不過大小還要調整。讚賞鍵的元件會自行適應以維持長寬比，其長寬約為 485px*240px。使用以下程式碼把它置中自動縮放並隱藏卷軸。

{% if site.liker_id %}
<iframe
  style="width: 100%; max-width: 485px; height: 240px; margin: auto; overflow: hidden; display: block;"
  src="https://button.like.co/in/embed/{{site.liker_id}}/button?referrer={{ page.url | absolute_url | cgi_escape }}">
</iframe>
{% endif %}

參考文章

幫jekyll加上likecoin

給Jekyll加上LikeButton賺錢錢

Add LikeWidget to Github Pages

mdBook

如何在 mdBook 開發環境的文章中加入 LikeCoin button

感謝用戶道場除草機的教學範本。

安裝讚賞鍵以前，請先註冊 Liker ID。

放入 mdBook 產出的 HTML 靜態文件的重點是需要使用 Javascript 來動態產生下面 HTML 片段於瀏覽器之中。

<div class="likecoin-embed likecoin-button">
  <div></div>
  <iframe scrolling="no" frameborder="0" 
    src="https://button.like.co/in/embed/LikerID/button?referrer=http://yourhost/foo/page.html">
  </iframe>
</div>

客製 mdBook 先新增 likebutton.js 於 book.toml 旁，也可以使用 likecoin/likecoin-button-sdk 的 sdk.js 原理類似。

likebutton.js

const LIKER_ID = "dltdojo";//記得換成自己的
let likeurl = `https://button.like.co/in/embed/${LikerID}/button?referrer=${encodeURI(window.location.href)}`;
let el = document.getElementsByClassName("likebutton")[0];
if(el){
    el.innerHTML = `<div class="likecoin-embed likecoin-button">
  <div></div>
  <iframe scrolling="no" frameborder="0" src="${likeurl}"></iframe>
</div>`;
}

並複製 LikeCoinButton-integration/style.css 成為 likebutton.css

.likecoin-button {
  position: relative;
  width: 100%;
  max-width: 485px;
  max-height: 240px;
  margin: 0 auto;
}
.likecoin-button > div {
  padding-top: 49.48454%;
}
.likecoin-button > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

編輯 book.toml 的 output.html 段落加入 js 與 css

[output.html]
default-theme = "coal"
mathjax-support = true
additional-js = ["likebutton.js"]
additional-css = ["likebutton.css"]

最後就是看那一頁 md 裡面要加上按鈕就新增一個 div 後用 class 為 LikeCoin button 來綁住輸出。

<div class="likebutton"/>

上面寫在 md 內的 div 在經過 mdbook build 轉化成為 HTML 後即能出現讚賞鍵。

目前只能限制一個 Liker ID 使用，如要提供多用戶可以用 getElementsByClassName(LikerIDFoo) 來實做。

參考文章

如何在 mdbook 的文章中加入讚賞鍵 Likecoin Button

October CMS

如何在 October CMS 文章中加入 LikeCoin button

可參考非官方外掛 October CMS LikeCoin Plugin。

其他

如何在任何自架網站加入 LikeCoin button？

你可使用 LikeCoin API，在任何網站和 app 加入 LikeCoin button，詳情請參閱開發資源（英文）。或參考：

likeco-btn：在任何頁面插入讚賞按鈕Noob's Space

【PHPBB應用】在PHPBB論壇內加入LikeCoin的讚賞按鈕秋天渡口

其他寫作平台

我不懂自架網站，有什麼第三方寫作平台直接支援 LikeCoin 麼？

Medium

安裝讚賞鍵以前，請先註冊 Liker ID 假設你的 Liker ID 是 ckxpress，讚賞鍵的鏈結便是 https://button.like.co/ckxpress

然後，將該鏈結加到 Medium 文章（一般放到底部），輸入 "enter" 換行，讚賞鍵會自動出現。

Pixnet 痞客邦

感謝工程師用戶 Kent - 攻城濕不說的秘密創作出痞客邦專屬 LikeCoin 外掛。

安裝讚賞鍵以前，請先註冊 Liker ID。

登入痞客邦，前往痞客邦應用市集 App Market 安裝 LikeCoin For 痞客邦 APP，點「安裝」。

安裝後，點「前往設定」

輸入你的 Liker ID，再點「送出」，即可完成設定，此後每篇痞客邦文章都會自動加入讚賞鍵。

你亦可以隨時進入痞客邦應用市集 App Market ，點「已安裝功能」，隨時更改你的設定。

參考文章

【痞客邦外掛】5分鐘開始你的網站收入 - LikeCoin For 痞客邦

香港獨立媒體網

如何在香港獨立媒體網寫作賺取 LikeCoin 成就？

香港獨立媒體網經已支援整合 LikeCoin button，媒體特約作者請註冊並提供你的 Liker ID 予編輯即可。

查詢電郵：info@inmediahk.net

illustBuy

如何在 illustBuy 同人創作平台中加入 LikeCoin button

安裝讚賞鍵以前，請先註冊 Liker ID。

點 illustBuy 網站右上角「登入」並登入 illustBuy 帳戶，再點右上角你的顯示名稱

點「帳戶設定」，並在 Liker ID 欄內輸入你的 Liker ID，再點「儲存」

以後你發佈的每篇作品都會自動顯示 LikeCoin button

了解更多

專營插畫的 NFT 市場 – illustBuy

如何透過讚賞鍵賺取收入？

Tipga

如何在 Tipga 寫作賺取 LikeCoin 成就？

安裝讚賞鍵以前，請先註冊 Liker ID。

Tipga 於2021年3月13日開始支援讚賞鍵功能。

在 Tipga 中加入讚賞鍵 LikeCoin button 功能只需一個簡單步驟：

用戶登入 Tipga 帳號，在「網誌設定」中的「Liker ID (讚賞鍵) 」點「設定」，再輸入你的 Liker ID，然後再儲存。

系統會自動在每篇文章下方預設加入讚賞鍵。

參考文章

如何在 Tipga 內使用 LikeCoin Button 讚賞鍵

Blink

如何在 Blink 佈告欄文章中加入 LikeCoin button

安裝讚賞鍵以前，請先註冊 Liker ID。

先登入 Blink，撰寫文章並發佈。

依照以下格式製作你的讚賞鍵鏈結：

https://button.like.co/in/embed/[LikerID]/button?referrer=[網頁URL]

假設你的 Liker ID 是 ckxpress，網頁 URL 是 https://blink.com.tw/board/post/83713/

讚賞鍵的鏈結便是 https://button.like.co/in/embed/ckxpress/button?referrer=https://blink.com.tw/board/post/83713/

接著點「插件式/可編輯」影音，再選擇「嵌入」，將以下程式碼加到你需要顯示讚賞鍵的地方，留意要把 {{ src }} 的部份替換為讚賞鍵鏈結

<div class="likecoin-embed likecoin-button">
  <div></div>
  <iframe scrolling="no" frameborder="0" src="{{ src }}"></iframe>
</div>

亦即是這樣

<div class="likecoin-embed likecoin-button">
  <div></div>
  <iframe scrolling="no" frameborder="0" src="https://button.like.co/in/embed/ckxpress/button?referrer=https://button.like.co/in/embed/ckxpress/button?referrer=https://blink.com.tw/board/post/83713/"></iframe>
</div>

再按「OK」，讚賞鍵便會出現在文章中

你可以點「一般的」，再更改「空間維度」調整讚賞鍵顯示大小。

參考文章

likecoin / LikeCoinButton-integration iframe

Blogspot

以 JavaScript 在 Blogspot 等各家網誌的文末、側欄產生讚賞鍵

感謝用戶浩剛製作程式碼，只需透過側欄小工具或者修改佈景主題原始碼，置入 JavaScript 就可以在每篇文筆中自動產生讚賞鍵。

安裝讚賞鍵以前，請先註冊 Liker ID。

在側欄放置讚賞鍵

在版面配置的頁面，任一地方新增 "HTML/JavaScript" 小工具，貼上以下的 JavaScript 程式碼並將 [LikerID] 更改為你的 Liker ID 再儲存，讚賞鍵便會自動出現。

<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/[LikerID]/button?referrer="+encodeURIComponent(location.href.split("?")[0].split("#")[0])+"'></iframe>");
</script>

在文章末段放置讚賞鍵

進入佈景「主題」後點「編輯HTML」並搜尋 data:post.body ，在看到 </div> 後換行插入以下程式碼，並將 [LikerID] 更改為你的 Liker ID ：

<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/[LikerID]/button?referrer="+encodeURIComponent(location.href.split("?")[0].split("#")[0])+"'></iframe>");
    </script>
</b:if>

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> 後加入程式碼後變成

<!-- 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>

<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/[LikerID]/button?referrer="+encodeURIComponent(location.href.split("?")[0].split("#")[0])+"'></iframe>");
    </script>
</b:if>

假如「編輯HTML」看到有兩個 data:post.body 有可能一個是電腦頁面，另一個是手機頁面，那麼兩邊都要放置程式碼。留意手機版面要改成「自訂」才會顯示讚賞鍵。

-------------------------

使用其他網誌服務的用戶，只要支援修改佈景主題，也可以嘗試使用這種方式加入讚賞鍵。

參考文章

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

LikeCoin如何放在Blogger或其他地方

SteemCN

如何在 SteemCN 寫作賺取 LikeCoin 成就？

安裝讚賞鍵以前，請先註冊 Liker ID。

登入 SteemCN，點「設置」 / "Settings"

在「位置」 / "Location" 輸入自己的 Liker ID，格式為 likerid:[LikerID]。假設你的 Liker ID 是 ckxpress，那麼輸入的內容就是 Likerid:ckxpress

再點「更新」 / "Update"

完成後每篇文章的結尾都會出現讚賞鍵。

參考文章

SteemCN添加Like Button

在SteemCN给自己的文章加上Like Button

Wix / Weebly

如何在 Wix 文章中加入 LikeCoin button

安裝讚賞鍵以前，請先註冊 Liker ID。

依照以下格式製作你的讚賞鍵鏈結：

https://button.like.co/in/embed/[LikerID]/button?referrer=[網頁URL]

假設你的 Liker ID 是 ckxpress，網頁 URL 是 https://ckxpress.wixsite.com/likecoin/single-post/2020/02/22/LikeCoin

讚賞鍵的鏈結便是 https://button.like.co/in/embed/ckxpress/button?referrer=https://ckxpress.wixsite.com/likecoin/single-post/2020/02/22/LikeCoin

接著開啟 HTML 編輯模式，將以下程式碼加到你需要顯示讚賞鍵的地方，留意要把 {{ src }} 的部份替換為讚賞鍵鏈結

<div class="likecoin-embed likecoin-button">
  <div></div>
  <iframe scrolling="no" frameborder="0" src="{{ src }}"></iframe>
</div>

亦即是這樣

<div class="likecoin-embed likecoin-button">
  <div></div>
  <iframe scrolling="no" frameborder="0" src="https://button.like.co/in/embed/ckxpress/button?referrer=https://ckxpress.wixsite.com/likecoin/single-post/2020/02/22/LikeCoin"></iframe>
</div>

儲存後，讚賞鍵便會出現在文章中。然而你需要使用 Wix 的進階功能加入 CSS，讓它顯示的模樣更為清淅

.likecoin-button {
  position: relative;
  width: 100%;
  max-width: 485px;
  max-height: 240px;
  margin: 0 auto;
}
.likecoin-button > div {
  padding-top: 49.48454%;
}
.likecoin-button > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

參考文章

likecoin / LikeCoinButton-integration iframe

-------------------------

Weebly 用戶也可使用同樣方式插入讚賞鍵。

-------------------------

也可以嘗試使用 JavaScript 的方式看看能否產生讚賞鍵，詳見：

Blogspot

Write.as

如何在 Write.as 文章中加入 LikeCoin button

感謝用戶夏的教學範本。

安裝讚賞鍵以前，請先註冊 Liker ID。

首先你需要加入 Write.as Pro 服務方可使用 Javascript。

把 Javascript 程式碼中的 [LikerID] 更改為你的 Liker ID，再將它黏貼到 Write.as 設定裡的 "Custom Javascript" 欄位，有需要可加入 CSS 調整版面字型等樣式即可。

var topP = document.createElement("p");
topP.innerHTML = '<div class="custom-nav"><a href="#">Back to top ↑</a></div>';

var cont = document.getElementById("wrapper");
if (cont !== null) {
// Add to blog index and tag pages
cont.appendChild(topP);
} else {
// Add to individual blog post page
cont = document.getElementById("post-body");
cont.insertAdjacentHTML("afterend", topP.outerHTML);
cont.insertAdjacentHTML("afterend", "<div class='custom-nav likecoin'><p>-<br><em>如果你喜歡我的文字，請幫忙按 5 下 Like！我將得到 LikeCoin 的回饋。</em></p><p>回饋由 <a rel='nofollow'  href='https://like.co/'>LikeCoin</a> 基金會出資，只要註冊/登入帳號，點 5 下 Like 就可以贊助我的文章。化讚為賞，支持創作。謝謝你！</p><iframe scrolling='no' frameborder='0' width='640' height='212' src='https://button.like.co/in/embed/[LikerID]/button?referrer="+encodeURIComponent(location.href.split("?")[0].split("#")[0])+"'></iframe></div>");
}

參考文章

傻瓜如何加入LikeButton到Write.as網誌中