코일 메타태그 사용 시 카운터 생성하기
how to add the Coil counter
코일의(Coil) 웹 수익화(Web-Monetization)를 위해
블로그에 기존의 자바스크립트 코드(javascript code)를 삽입하는 방식에서
메타태그(meta tag)를 삽입하는 방식으로 업그레이드를 한 경우
[암호화폐 Cryptocurrency] - Coil 코드 간단히 하기 (meta tag) Simplifying Web Monetization
불편했던 점 중 하나가
기존 자바스크립트 코드를 사용했을 때에는 브라우저 왼쪽 하단에 보였던
XRP 기부가 카운팅 되는 현황(이후 코일 카운터라고 하겠습니다.)이
메타태그로 업그레이드 후에는 보이지 않았다는 것이었습니다.
최근 이 코일 카운터가 보이도록 하는 글이 소개되었습니다.
If you're a @Coil creator using the latest Web Monetization (with the meta tag) you can now add a counter to your site! https://t.co/xaPaW1ma56
— Ben Sharafian (@sharafian_) 2019년 2월 27일
아래 링크에 들어가면 자세한 내용이 있습니다.
https://github.com/interledgerjs/web-monetization-scripts#including-the-script
내용을 간단히 소개하자면
메타태그로 업그레이드한 경우 아래와 같은 자바스크립트 코드를 삽입하면
코일 카운터가 보인다는 것입니다.
<script src="https://cdn.coil.com/counter.js"></script> <script> window.WebMonetizationScripts.createCounter() </script>
[출처]
저도 적용을 해보니 아래와 같이 코일 카운터가 잘 나왔습니다.
(하지만 모바일에서는 안 나오는 듯합니다.)
코일 체커 https://fudbingo.com/coilchecker에서도 확인해보니 OK입니다.
자바스크립트 코드 삽입한 것을 참고하시라고 삽입한 모습도 캡처해봤습니다.
이 블로그에서는
메타태그와 자바스크립트 코드 위치는 모두 <head>와 </head> 태그 사이에 위치하게 했습니다.
메타태그인 경우는 https://coil.com/creator-setup에 의하면
<head>와 </head> 태그 사이에 삽입하라고 설명되어 있습니다.
그러나 코일 카운터를 위한 자바스크립트 위치에 대해서는 특별한 언급은 없습니다.
다만
https://github.com/interledgerjs/web-monetization-scripts/blob/master/examples/counter.html
에 있는 예시에 의하면 자바스크립트 코드도 메타태그 바로 아래에 위치해 있습니다.
저도 관리 편의성 차원에서 메타태그 바로 아래 삽입하였습니다.
(그리고 기존 자바스크립트 코드는 삭제해도 되지만 주석처리만 하고 남겨 두었습니다.)
https://github.com/interledgerjs/web-monetization-scripts#usage-1 에는
기존 자바스크립트 코드에 사용된 window.WebMonetizationScripts.donate의
옵션에 대한 설명도 있으니 관심있으신 분은 참고하시면 좋을 것 같습니다.
'암호화폐 Cryptocurrency' 카테고리의 다른 글
| 코일에 대한 생각 (1) | 2019.02.26 |
|---|---|
| WordPress에서 Coil 사용하기 (2) | 2019.02.22 |
| 텔레그램에서 XRP 주고 받기 XRP Text for Telegram (3) | 2019.02.13 |
| 코일 Coil 이야기 (5) | 2019.02.05 |
| XRP Tipbot 사이트에 CSS로 테마 설정하기 (2) | 2019.02.03 |
