LikeCoin button 整合方法和示範

中文版 — 以網站媒體平台為例子

William Chong

Published in

LikeCoin — Decentralize Publishing

6 min readJan 23, 2020

簡介

LikeCoin button （下稱：button）最基本的整合只需要插入一個<iframe>。而它的src參數包含了 2 個變數：

作者的 Liker ID 及；
內容的 URL (referrer)。

作者 Liker ID

Liker ID 與 LikeCoin wallet 綁定，需要自行在 like.co 註冊。當 button 收到的 LIKE 會即時／每日傳送到此 Liker ID 的 LikeCoin wallet。視乎需求，可以是全網站共用一個帳號，平台替作者代為註冊，或每個內容作者自行註冊一個。

内容的 URL

URL 則會作為此內容獨一無二的 ID，而且必須是 canonical URL，傳入不同的URL（包括 query string 或是 hash 等）會引致 button 判斷自己處於不同的內容。注意傳入時應使用 encodeURIComponent() 避免亂碼。

建議整合方法

在資料庫增加儲存每個作者的 Liker ID，可以是由作者提供或內容平台代為管理。網頁在顯示內容的時候，先在伺服器獲取相應作者的 Liker ID。視乎技術需要，在伺服器端（Server Side）或是前端使用 JavaScript 動態地插入<iframe>到內容中。

這樣只需綁定 Liker ID 一遍，就能夠在所有過往及將來的內容都加入 button，使作者不用繁瑣地把每一個內容都操作一遍；也方便將來作者需要更換 Liker ID，和統計 button 的使用率。

技術文件

LikeCoin button 的整合技術文件https://github.com/likecoin/LikeCoinButton-integration/

前端整合步驟

最基本的整合的代碼包含了HTML 及 CSS，以 ckxpress.com 的文章為例子：

HTML

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

把{{ src }} 替換成以下的 URL：

https://button.like.co/in/embed/[Liker ID]/button?referrer=[URL]

ckxpress.com 網站只有一個作者， Liker ID 是 ckxpress，內容的 URL 為https://ckxpress.com/the-drifting-classroom/（記緊要把 URL 用 encodeURIComponent() 處理），那麼 src 就變成了：

https://button.like.co/in/embed/ckxpress/button?referrer=https%3A%2F%2Fckxpress.com%2Fthe-drifting-classroom%2F

最後的 HTML：

<div class="likecoin-embed likecoin-button">
  <div></div>
  <iframe scrolling="no" frameborder="0" src="https://button.like.co/in/embed/ckxpress/button?referrer=https%3A%2F%2Fckxpress.com%2Fthe-drifting-classroom%2F"></iframe>
</div>

CSS

把以下的代碼放進網站全域的 CSS 文件中，此代碼能讓 button 支持響應式網頁設計。

.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%;
}

進階整合例子

例子：立場新聞

立場新聞除了平台官方的 Liker ID，另外也提供了作者綁定 Liker ID 的功能。例子

另外立場新聞針對手機用戶也會增加浮動框 LikeCoin button（需要針對網站定制）。例子

例子：Matters

Matters 為深度整合 LikeCoin API 的合作夥伴，所有 Matters 內張貼的文章自動產生 LikeCoin button。用戶註冊 Matters 帳號時需要同時註冊，或透過 OAuth 綁定 Liker ID。Matters 和 LikeCoin 使用 OAuth API 互相認證。這樣方便 Matters 用戶不需要額外登入 Liker ID ，也能夠在站内使用 Matters 帳戶直接讚賞文章內容。例子