LikeCoin button 整合方法和示範

Table of Contents

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


簡介

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%;
}
LikeCoin button 整合方法和示範
效果圖

進階整合例子

例子:立場新聞

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

LikeCoin button 整合方法和示範
此 Liker ID 為作者自行提供,儲存在平台伺服器。

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

LikeCoin button 整合方法和示範
LikeCoin button 整合方法和示範
左為浮動框版本,右邊 iframe 出現後浮動框就會消失。

例子:Matters

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

LikeCoin button 整合方法和示範
左面為 Matters 自行定製的 LikeCoin button
LikeCoin button 整合方法和示範
LikeCoin button 整合方法和示範
雙方的 OAuth 介面

如有其他問題或不清楚的地方,歡迎到 LikeCoin 官網聯絡我們查詢。