發布於 2022 年 12 月 14 日 • 更新於 2023 年 11 月 05 日

在Blogger或其它寫作平台放置LikeCoin Button、Writing NFT widget (半自動化)

5 分鐘閱讀 • •

GFDL 1.3

反向連結

在Blogger或其它寫作平台放置LikeCoin Button、Writing NFT widget (半自動化)

內容警告

本站已於 2024 年年底由 Blogger 遷離。雖然本文內容依然有效，但此頁的渲染不再使用相同的程式碼產生。

前言

我也加入 Writing NFT 的作者行列了！

這篇文章教各位在 Blogger 每篇文的文末自動產生 LikeCoin Button ，並且，只要在文章中加入 ISCN ，LikeCoin Button 就會變成 Writing NFT widget！

所謂的「半自動化」，是指你需要手動為文章產生 ISCN 並加入文章內，其餘都是自動化的喔！

Widget 外觀

插入程式碼

打開主題編輯器: Blogger 後台 → 主題 → 編輯 HTML
Ctrl+F 尋找 <data:post.body/> ，這個標籤是文章內容，我們要把 code 貼在它的後面

如果你的版型支援手機版，你會找到兩處，一處手機版一處電腦版，不要遺漏

複製貼上這段程式碼，位置參考如圖

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='likerContainer' style='background: white; box-shadow: inset 0 0 16px 11px #000000; width: 360px; margin: 0px auto;'/>
    <script type='text/javascript'>
    var container = document.getElementById(&#39;likerContainer&#39;);
    var iscn = document.getElementById(&#39;iscn&#39;)?.innerHTML.trim();
    var likerid = &#39;[LikerID]&#39;;
    if (iscn) {
        container.innerHTML =
            `&lt;iframe frameborder=&#39;0&#39; sandbox=&#39;allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation&#39; scrolling=&#39;no&#39; src=&#39;https://button.like.co/in/embed/iscn/button?iscn_id=${encodeURIComponent(iscn)}&#39; style=&#39;max-height: 440px; height: 103vw; width: 100%;&#39;/&gt;`;
        console.log(&#39;ISCN: &#39; + iscn);
    } else {
        container.innerHTML =
            `&lt;iframe frameborder=&#39;0&#39; sandbox=&#39;allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation&#39; scrolling=&#39;no&#39; src=&#39;https://button.like.co/in/embed/${likerid}/button?referrer=${encodeURIComponent(location.href.split[&#39;?&#39;](0).split[&#39;#&#39;](0))}&#39; style=&#39;height: 200px; width: 100%;&#39;/&gt;`;
    }
    </script>
</b:if>

Blogger 主題程式碼需要做 HTML encode
文末提供原始程式碼以在其它平台上使用

把程式碼第六行的 [LikerID] 改為你的 LikerID！
CSS微調: 你可能會想調整在第二行的 style，讓它搭配你的版型風格

使用方式

在沒有出版為 Writing NFT 的時候

它會顯示為讚賞按鈕，自動的，什麼都不用做！

在出版為 Writing NFT 的時候

在 NFT Portal 手動出版為 Writing NFT，取得 ISCN

官方說明書
https://docs.like.co/v/zh/general-guides/writing-nft/nft-portal
回到文章編輯器，切換至 <> HTML檢視

在文章的任一處 (最末尾即可)，貼上這個 div 標籤

<div id="iscn" hidden>iscn://likecoin-chain/iQ5NQdeCLXQ66evbflzBGgc908rbt0xlfH15cQLdlSQ/1</div>

各位理解後一定能記住它
<div id="iscn" hidden>iscn://likecoin-chain/iQ5NQdeCLXQ66evbflzBGgc908rbt0xlfH15cQLdlSQ/1</div>
綠色： div 標籤本體，它是<div></div>的形式
橘色：這個標籤的 id，用做程式碼的識別，這 id 就叫做 iscn
黃色： hidden ，設定這個標籤在頁面上隱藏不顯示
紫色： ISCN 的內容，程式會把這個內容拿去產生 Writing NFT widget

通用程式碼

以下提供 html encode 前的程式碼，可以在其它的寫作平台使用

<div id="likerContainer" style="background: white; box-shadow: inset 0 0 16px 11px #000000; width: 360px; margin: 0px auto;" ></div>
<script type="text/javascript">
    var container = document.getElementById('likerContainer');
    var iscn = document.getElementById('iscn')?.innerHTML.trim();
    var likerid = '[LikerID]';
    if (iscn) {
        container.innerHTML =
            `<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/iscn/button?iscn_id=${encodeURIComponent(iscn)}' style='max-height: 440px; height: 103vw; width: 100%;'/>`;
        console.log('ISCN: ' + iscn);
    } else {
        container.innerHTML =
            `<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/${likerid}/button?referrer=${encodeURIComponent(location.href.split('?')[0].split('#')[0])}' style='height: 200px; width: 100%;'/>`;
    }
</script>

參考資料

↓下面這一個就是用此方法產生的 widget↓

目錄