在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↓

沒有留言:

張貼留言

本站遭到垃圾留言(病毒連結)攻擊,開啟審核模式。留言後並不會馬上公開顯示。

目錄