無料ではじめる

ARTICLES

ブログに投げ銭ボタンを置く方法｜コードを貼るだけの手順

ブログや個人サイトに応援（投げ銭）ボタンを置く手順を、サポラバの公式ドキュメントに沿って説明します。WordPressのカスタムHTMLブロックへの貼り方、見た目の変え方も紹介します。

公開

ブログに投げ銭ボタンを置くには、サポラバのマイページでボタンのコードをコピーし、記事のHTMLに貼り付けます。WordPressなら「カスタムHTML」ブロックに貼るだけで済み、プラグインは使いません。読者は会員登録なしで、記事を読み終えたその場で応援できます。

以下、サポラバの公式ドキュメント（https://app.sapolova.com/docs/button-integration）に沿って手順を説明します。応援ボタンそのものの仕組みは「応援ボタンとは？」にまとめています。

始める前に何が必要？

  • サポラバのアカウント（無料登録。初期費用・月額0円）
  • 応援を受け取るためのStripe Connectでの本人確認と振込口座の登録（初回だけ）

本人確認には運転免許証やパスポートなどの書類と、銀行口座の情報を求められる場合があります（出典: https://sapolova.com/legal）。

手順1：マイページでボタンを作る

  1. サポラバにログインし、マイページの左のメニュー（スマホは画面下のメニュー）で「応援ページ」を開きます。
  2. 「ボタンをカスタマイズ」を押し、文言・色・大きさ・角の丸みを決めます。スマホでは「プレビュー・設置」で見た目を確かめられます。
  3. 「Webサイトにボタンを設置」を開き（最初は閉じています）、「コードをコピー」を押します。

見た目を変えないなら、「応援ページ」の同じ項目からそのままコピーしても構いません（出典: https://app.sapolova.com/docs/button-integration）。

手順2：ブログにコードを貼る

コピーしたコードを、ボタンを置きたい場所のHTMLに貼ります。発行されるコードは次のような形です（YOUR_RECIPIENT_ID は説明用の例です。マイページでコピーしたコードには、自分の受取人IDが最初から入っています）。

<iframe
  src="https://app.sapolova.com/widget/button-iframe?recipient=YOUR_RECIPIENT_ID&text=サポラバで応援"
  title="サポラバの応援ボタン"
  style="border:0;width:100%;max-width:360px;height:120px"
  scrolling="no"
  loading="lazy"
></iframe>

出典: https://app.sapolova.com/docs/button-integration

WordPressではどこに貼る？

ブロックエディタで「カスタムHTML」ブロックを追加し、その中にコードを貼り付けます（出典: 同上）。記事の最後に置けば、読み終えた人の目に入ります。

見た目はどこまで変えられる？

コードの src にある項目で調整できます。ただ、手で書き換えるより、マイページで調整してからコピーするほうが確実です。

項目必須内容
recipient必須受取人ID（発行コードに入っている）
text任意ボタンの文言。既定は「サポラバで応援」
bg任意背景色（例: #3B82F6）
color任意文字の色（例: #FFFFFF）
size任意Small / Medium / Large / XLarge
radius任意角の丸み（px）

出典: https://app.sapolova.com/docs/button-integration

文言は、ブログの雰囲気に合わせて自分の言葉にしておくと浮きません。

記事の下以外に置く方法はある？

埋め込みボタンのほかに、リンク、QRコード、フローティング（ページの隅）、サイドバー（記事の横）、ポップアップ（少し時間をおいて表示）という置き方があります（出典: https://sapolova.com）。読む邪魔をしたくないならフローティングかサイドバー、という選び方ができます。

読者がボタンを押すとどうなる？

新しいタブで応援ページが開きます。読者は会員登録なしで、1回だけの応援か毎月の応援を選べます（出典: https://app.sapolova.com/docs/button-integration）。

  • 1回の応援金額：500円〜100,000円
  • 手数料：届いた応援の8.6%（プラットフォーム5%＋Stripe決済3.6%）。1,000円なら914円が届く
  • 振込：Stripeの振込スケジュールで指定口座へ自動振込
  • 応援した人の名前や金額は公開されない

出典: https://sapolova.com/legal、https://sapolova.com

応援が届くとメールで知らせが来ます。お礼の返信はいりません（出典: https://sapolova.com）。

まとめ

  1. マイページの「応援ページ」でボタンを作り、コードをコピー
  2. ブログのHTML（WordPressならカスタムHTMLブロック）に貼る
  3. 文言や色はマイページで調整してからコピーする

設置で困ったときは、公式の設置ガイドの問い合わせ先から連絡できます。

次にやること

マイページの「応援ページ」でコードをコピーし、いちばん読まれている記事の下に1つ貼ってみてください。

応援ボタン

返礼不要の応援ボタンを、無料で置けます

自分のサイトやブログに置くだけです。応援する人に会員登録は要りません。

応援ボタンを作る

関連記事

応援ボタン

返礼不要の応援ボタンを、無料で置けます

自分のサイトやブログに置くだけです。応援する人に会員登録は要りません。

無料で始める

よくある質問

WordPressではどこに貼ればいいですか？

記事やページ編集画面の「カスタムHTML」ブロックに、コピーしたコードを貼り付けます。

プラグインは必要ですか？

サポラバのボタンは発行されたHTMLコードを貼る方式です。公式ドキュメントにプラグインを使う手順はありません。

ボタンの色や文言は変えられますか？

はい。マイページの「ボタンをカスタマイズ」で文言・色・大きさ・角の丸みを変えてから、コードをコピーできます。

読者が押すと何が起きますか？

新しいタブで応援ページが開き、読者は会員登録なしで1回だけの応援か毎月の応援を選べます。

記事一覧へ戻る