Tech

【React/Gatsby】Ko-Fiの寄付ボタンを表示する方法

Githubには、リポジトリにサムネイルのような画像をつけることができます。厳密にはSNS共有時に表示するOGP画像です。これの作り方を紹介します。Twitter（旧X）などのSNSに載せるときにも目立つようになります。

フロントエンド
Gatsby

やり方

まず、kofi-buttonを入れます。

kofi-button
The Ko-fi donate button as a React component.. Latest version: 1.1.1, last published: 3 years ago. Start using kofi-button in your project by running `npm i kofi-button`. There are no other projects in the npm registry using kofi-button.
faviconwww.npmjs.com
ogImage

Copy 
npm i kofi-button

または

Copy 
yarn add kofi-button

そうしたら、あとは

Copy 
import KofiButton from "kofi-button";

// 何かしらのコンポーネントに含める
<KofiButton color="#0a9396" kofiID={"kofiのidをここに突っ込む"} title="ボタンの名前を適当にいれる" />

だけです。簡単ですね。Next.jsなどでも全く同じ手順でできるはずです。

他にも色々ある

ko-fi react button - npm search
faviconwww.npmjs.com
ogImage

いろいろあります。このKofiButtonはかなり楽に使えるので気に入っていますが、他に色々探してみるのも面白いかもしれません。

役に立ったらコーヒーを注ごう

コーヒーを注ぐおんニャプロフィール画像
Ko-fi donationsコーヒーを頭にかける

この記事が「役に立った！」と思ったら、筆者にコーヒー（300円）を注いであげましょう。きっと執筆の活力になります。
リクエストも受け付けています。やり方はこちら。

次の記事
Thumbnail of the next article

【配布あり】Cropariaの種をコンポスターに入れる方法【Minecraft・CraftTweaker】

前の記事
Thumbnail of the previous article

【犯人はFigura】何故かチャットが勝手に絵文字になる…【Minecraft Mod】