Wraptasサイトにlyketを使っていいねボタンを置いた

Wraptasを使って書いているブログにいいねボタンを導入しました。かわいくて導入簡単でいい感じです。

使ったのは以下のlyketというサービスです。（Wraptasのユーザコミュニティで存在を知りました！感謝です）

https://lyket.dev/


# できたもの
[こちらのサンプル](https://haruchann.net/a9c0765bdd334e0b803d982ac78a7b75)のように、Wraptasサイトにいいねボタン配置しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779337/a03e9ab5-36a6-8a87-4dbe-f0f46beab450.png)


# 手順1 : lyket登録
1. lyketにユーザ登録してください

https://lyket.dev/


2\. settingsのページでPublic API tokenをゲットして、メモしてください。
なお、settingのページを開くと一面にsubscriptionのメニューが表示されて、「え！？settingsどこ！？」となるのですが、ずーっとスクロールダウンすると以下セクションが見つかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779337/12d8b7c6-73d7-28bd-7d20-4b9542165c7d.png)


# 手順2 : wraptas側準備
1. wraptas管理画面＞サイトデザイン編集＞「コードブロックを使ったHTML挿入機能をONにする」にチェックをいれる

https://demo.wraptas.site/code_block_inject

2\. wraptas管理画面＞サイトデザイン編集＞HTML直接追記(bodyタグ)に以下を記述。[YOUR-API-KEY]はさきほどメモったやつで置き換えてください

~~~
<script src="https://unpkg.com/@lyket/widget@latest/dist/lyket.js?apiKey=[YOUR-API-KEY]"></script>
~~~

# 手順3 : notionでボタンおいてみる！
1. notion側でボタンを置きたいページ・場所にcodeブロックを挿入し、言語をhtmlに設定します。
1. 上でつくったコードブロックに以下を記述します。

~~~HTML
<div
data-lyket-type="like"
data-lyket-id="sample" 
data-lyket-template="twitter" 
> </div>
~~~


これで完成です！Wraptasを通してみるとこんなボタン↓が表示されてるはず
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779337/a03e9ab5-36a6-8a87-4dbe-f0f46beab450.png)

また、ボタンを追加した状態で、lyketに戻り、dashboardに行くと、こんな感じでボタンの押され具合（？）が確認できるようになっています。数のリセットなどもできますよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779337/4fac10b8-fbfa-6911-f9b5-94570a76f4c2.png)

# ボタンの作り方詳細
上ではライクボタンを置きましたが、HTMLをいろいろ変更して自分好みのボタンにできます。

## ボタンタイプの設定（必須）
clap, like, updownの3種類から指定します
~~~
data-lyket-type="clap"
~~~
ひとり何回でも押せるクラップボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779337/b9656663-39ee-9d8c-3a96-639bba46658a.png)


~~~
data-lyket-type="like"
~~~
ひとり一回しか押せないライクボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779337/db1570e2-f0bc-8cf2-6f53-7f1eedb72afb.png)



~~~
data-lyket-type="updown"
~~~
アップとダウンをひとりいくらでも押せるアップダウンボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779337/0c2f1d00-4f48-5888-9cb9-61d0ad764a6f.png)

## ユニークIDの指定（必須）
ボタンさんそれぞれにIDを付与してあげます。わたしは記事投稿日にしました。お好みで。

~~~html
data-lyket-id="my-first-post"
~~~

## スタイルの変更（任意）
[テンプレページ](https://lyket.dev/templates)にあるボタンを使いたい場合は、以下のように記述することで指定できます
~~~
data-lyket-template="twitter"
~~~

テンプレページのそれぞれのボタンの下に書いてある名前（TwitterとかHeartとかMediumとか）が、それぞれのボタンのテンプレ名です！！それを↑のtwitterのとこに記述して指定するということです～（これわかりにくくかった）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779337/2cee201c-d97f-31a8-6e29-3b5bb10b6e73.png)



テンプレを使用しない場合はデフォルトの見た目（上の画像）に対して、下記のような指定ができるらしい。詳しくは公式参照ください。
~~~
  data-lyket-color-primary="#b8fff3"
  data-lyket-color-secondary="rgba(220, 234, 108, 0.6)"
  data-lyket-color-background="rgba(255, 224, 138, 0.4)"
  data-lyket-color-text="black"
  data-lyket-color-icon="violet"
  data-lyket-color-highlight="#ff00c3"
  data-lyket-font-family="monospace"
~~~
[https://lyket.dev/docs/html](https://lyket.dev/docs/html)

## フォルダ分け（任意）
ボタンをフォルダ分けしたい場合は、namespaceとして指定できます。これを指定しておくと、管理画面のdashboardで、全体集計とは別に、namespaceごとの集計結果がみれるようになります。

~~~
data-lyket-namespace="blog"
~~~



以上です！

ブログ全体にいいねボタン追加してみたけど、ずっと0だったら悲しいな....。ちなみにカウントスタートの数の編集もできるみたいでしたが、そこはちゃんと0からスタートにしときました！（何の宣言）

2023年も素敵なNotion＆Wraptasライフを～～！