琳的備忘手札: 在Blogger或其它寫作平台放置LikeCoin Button、Writing NFT widget (半自動化)

前言

我也加入 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 Protal 手動出版為 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↓

琳的備忘手札

標籤

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

前言