Loading...

[期間限定] Kindle Unlimited 初月無料 or 2か月299円

【はてなブログ】noteみたいなサポート機能を実装(投げ銭)【①codoc ②plog / CSSはコピペOK】

\手ぶらでホットヨガ無料体験/

タイトル画像(【はてなブログ】noteみたいなサポート機能を実装(投げ銭)【①codoc ②plog / CSSはコピペOK】)

こんにちは、Kome(@chankomeppy)です。

noteの記事下には「この記事が気に入ったら、サポートしてみませんか?」というボタンがある。いわゆる「投げ銭」的な機能だ。

noteのサポート機能
Komeのアイコン
Kome

はてなブログでも「note」のようにサポート機能(投げ銭)があればいいのに…

はてなブログでも外部サービスを使って「投げ銭」的な機能を実装できたので、やり方をまとめておきます。CSSはコピペOKなので参考にしてね~

▼目次はこちら (クリックして表示)

会員登録なしで「投げ銭」できる外部サービスは2つある

はてなブログにはnoteのサポート機能のようなものがないので、外部のサービスを使う必要がある。

投げ銭してもらうのに会員登録が必要だと、「投げ銭しようと思ったけど会員登録するのが面倒だからやめよう」となる可能性が大いにある。そこで、この記事では「会員登録なし」で投げ銭できるサービスに限定して紹介する。

1つ目が「codoc」、2つ目が「plog」。

どちらも新しいサービスで、codocは2019年9月、plogは2020年10月にリリース。(後者は個人が開発している)

prtimes.jp

qiita.com

せっかくなので、どちらも設置してみた。新しいものは使ってみたいし。

ちなみに、会員登録を伴う投げ銭機能だと「Paypal.me」が挙げられるが、本名がバッチリ公開されるので、匿名でブログをやっている人は使えない。

Amazonの「欲しいものリスト」公開は昔から匿名で支援を募れるツールとして使われてきた。参考までに、私の欲しいものリストを貼っておくので、見てくださいw

Komeの欲しいものリスト

codoc

codocのロゴ

まずcodecについて。読み方はコードク。

こちらは投げ銭機能だけでなく、noteのような有料記事ツール、サブスクリプションツールも提供している、むしろこっちの方がメインだと思われる。

利用料金無料
手数料15%
売上金の最低支払金額1,000円以上
売上金の受け取り方法銀行口座振り込み
売上金の振込手数料1回300円

codoc: 投げ銭機能

「サポート機能(投げ銭)」のウィジェットを設置することで、訪問者が投げ銭できるようになる。

デフォルトの見た目はCSSで整えることができる(ただし、はてなブログだと色は変更できない模様…)

記事下にタグを設置してしまえば、noteのサポート機能と同じように使うことができる。

▼私は記事下にこれを設置したよ。

codoc: 投げ銭機能の設定方法

  1. codocのアカウントを作る。

    1-1:「無料で始める」をクリック
    codocのアカウントを作る1

    1-2:アカウントはTwitter・Facebookと連携可能
    codocのアカウントを作る2title=

    1-3:メール認証をしてアカウント作成完了
    codocのアカウントを作る3
    codocのアカウントを作る4

  2. サポート機能(投げ銭)のウィジェットを作成する。

    2-1:ダッシュボード左下の「ウィジェット」または「サポート機能(投げ銭)の設置」をクリック
    投げ銭ウィジェットの作成1

    2-2:「デザイン」タブを選択
    投げ銭ウィジェットの作成2

    2-3:①いいねの表示、②codocについての表示、③Powerd by codocの表示、④サポートボタンの中に表示されるテキストを設定し、設定を保存する
    投げ銭ウィジェットの作成3

    (※1)①②③④はこんな風に表示される
    投げ銭ウィジェットの作成4

    (※2)「テーマを選択」でボタンの色や形を変更しても、はてなブログで表示するとデフォルトのテーマカラー(青色)が表示されてしまう(2020年12月現在)

    2-4:「サポート」タブを選択し、サポートボタンの上に表示されるテキストを入力→「<>貼り付けタグを表示」をクリック
    投げ銭ウィジェットの作成5

  3. タグを貼り付ける

    3-1:タグをコピーする(JS+要素
    タグを貼り付け1

    3-2:はてなブログのデザイン→カスタマイズ→記事→記事下にコピーしたタグを貼り付け
    タグを貼り付け2

これで記事下にサポートボタン(投げ銭ボタン)が設置された!

codoc: 投げ銭ボタンのCSSカスタマイズ

デフォルトの見た目で問題なければそのままでOK。

私はnoteのサポートボタンのような見た目にしたかったので、CSSでボタンの見た目を整えた。

しかし、CSSを使ってもサポートボタンの中に表示されるテキストの色を変更することができなかった。

ボタンの外枠と背景の色のはCSSで変更できたが、ボタンの中に表示されるテキストの色と同系色ではないと見た目的に微妙だったので、以下で紹介するCSSでは色は何も変えずデフォルトのままにしている。

/* cococのサポートボタンをnote風にするCSS */
.codoc-support {
    max-width: 100% !important;
    background: #f8f9fa !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    margin: 24px 0 0 !important;
    padding: 16px 16px 5px !important;
}
.codoc-support .codoc-support-title {
    margin-bottom: 8px !important;
}
.codoc-bottom {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.codoc-like-wrap {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}
.codoc-copyright {
    margin: 0 0 24px !important;
    background: #f8f9fa;
    border-radius: 0 0 10px 10px;
    padding: 0 0 16px;
    font-size: 10px !important;
    color: #aaa !important;
}

↑このコードをコピーして、デザイン→カスタマイズ→デザインCSSに張り付ければ、私が使っているサポートボタンと同じものがあなたのブログにも表示されます。

▼こんな風になりまーす!

私とお揃いのボタンを使ってみませんか?😂

お揃いのボタンを設置された場合は、コメントで教えてくれたらボタンを見に遊びに行きますw

codoc: 投げ銭してみる

codocで投げ銭するとどんな感じなのか。支援の手順はどうか?使いやすいものか?

人に使っていただく前に自分で知る必要があると思い、自分で自分に投げ銭をした。

ここからは「支援者」の目線です。

codocでの投げ銭手順
  1. 「サポートする」をクリック
  2. ブログ運営者へのメッセージとサポート金額(投げ銭する金額)を指定して「この価格に決定」をクリック→「会員登録しないで決済」をクリック
    支援金額を指定 会員登録して進む

    てか、「Komeアカウント」ってナニwww
    これはcodocのアカウントのことを指しているのだが、なぜKomeアカウントと表示されるのかは不明。システムの不具合なのか、わざとこのようにに表示される仕様なのか分からないが、codoc内でKomeアカウント会員専用コンテンツを配信しているとかそういうわけではないが、そういう風にも見えちゃうーw

  3. ①Apple Pay・Google Pay、②クレジットカードで支払う
    支払い情報の入力

    【①Apple Pay・Google Payの場合】
    「今すぐ支払う」ボタンを右にスワイプし、「続行」をクリックして支払い完了。
    Apple Pay・Google Payで支払う

    【②クレジットカードの場合】
    必要情報を入力し「支払う」をクリックして支払い完了。
    クレジットカードで支払う

    支払い完了画面が表示され、登録メールアドレスに支払い完了のお知らせが届く(「myself」というニックネームで支援しました)

    支払い完了画面 支払い完了のお知らせメール

  4. 支援したアカウントからメッセージが届く
    支援したアカウントからのメッセージ
  5. 支援履歴の確認・領収書の発行には、codocの会員登録が必要となる
    会員登録

スムーズに投げ銭できた!


次に「ブログ運営者」の目線で見てみる。

投げ銭を受け取ると、codoc運営から通知メールが届く。
投げ銭受領の通知メール

支援いただいたらお礼を言うのが礼儀、myselfさんに返信を送る。

支援者に返信を送る

返信メッセージは、こんな風に支援者に届くよ。


これでcodocの投げ銭の一連の手順の説明はおしまい。

全体的にnoteに似ていて使いやすく、法人が運営しているという点も安心ポイントだ。手数料が15%というのはちょっぴり多いような気もするが、noteも15%なので、まぁこれが相場ということで…。

plog

plogのロゴ

次にplogについて。読み方はピーログ?プログ?わかりません。

このサービスは先述の通り個人開発で、しかもリリースされたばかり。

これからどんどん機能が追加されていくと思うので、ここで説明していることはすぐに古い情報となってしまうかもしれない。

利用料金無料
手数料5%
売上金の最低支払金額1,000円以上
売上金の受け取り方法Amazonギフトカード
現金振り込みは対応中
売上金の振込手数料N/A

手数料は業界最安値らしい。

plog: 投げ銭機能

現時点での仕様では、用意されているボタンの種類は一つ。

ボタンをクリックすると「支援」した人だけが閲覧できるコンテンツが表示される仕組みになっている。

「記事」を支援者限定コンテンツとすれば「有料記事」になるし、「お礼」を支援者限定コンテンツとしれば「投げ銭」として使うことができる。

codocと大きく異なる点は、支援者が自分で支援金額を設定できないこと。

こちらが定めた「定額」の支援金ボタンしか作ることができない。逆にシンプルで分かりやすくていいけどね!

▼私はこんなのを作ってみたよ。

iframeなので、CSSを使って見た目を変更することはできない。 ボタンの見た目が結構ポップなので、まじめ系ブログには向いていないだろう。当ブログのような雑記ブログにはピッタリ。

plog: 投げ銭機能の設定方法

  1. plogのアカウントを作る。

    1-1:グーグルと連携するだけでOK
    plogのアカウント作成

  2. 投げ銭ボタン用のタグを作成する。

    2-1:Googleと連携完了後、「はじめる」をクリック
    投げ銭ボタンタグ作成1

    2-2:金額を設定し、有料部分(課金後に表示されるコンテンツ)をHTMLで入力し、「追加する」をクリック
    投げ銭ボタンタグ作成2

    2-3:出来上がったコードをコピーし、任意の場所に貼り付け
    投げ銭ボタンタグ作成3

任意の場所とは、記事下でもよいし、記事中でも、お好きな場所にどうぞ。

一つのボタンに対して支援金額が固定であること、CSSでボタンの見た目を整えられないことから、記事下に固定するような使い方ではなく、必要なときに単発で使うのに向いているのではないかと、個人的には感じた。

他の投げ銭サービスは最低支援額が100円からであることが一般的、50円から支援できるというのは支援のハードルが低くてよいと思う。雑誌の「袋閉じ」的な感覚で色々な使い道ができそうな予感がする。

ボタン設置までの手順は、かなりシンプルで使いやすいと感じた。

plog: 投げ銭してみる

plogの投げ銭についても、まずは自分で試してみた。

まずは投げ銭する側の「支援者」目線で見てみる。

plogでの投げ銭手順
  1. 「購入して続きを読む」をクリック
    購入して続きを読む
  2. Googleと連携してサインイン
    plog支払い画面
  3. カード情報を入力して「購入する」をクリック
    plog支払い画面2
  4. 「購入ありがとう!」的なメッセージが表示される(のだが、10秒間くらいしか表示されないのでスクリーンショットを撮り逃した)。
    支援者のGmailアドレスに支払いに関するメールは届かないようだ。

支払い手順もかなりシンプルで、投げ銭したらそれで終わり!メッセージのやりとりもできないので支援というよりは、本当に言葉通りの投げ銭。こういうシンプルな機能のほうが実はいいのかもしれない。


次に、投げ銭が発生すると「ブログ運営者」にはどのようなことが起きるのか。

plog運営者より通知メールが届くのみ。メールの内容もシンプルすぎていい!笑

plog投げ銭通知メール

plogの投げ銭をしてみたい人は「↑上部に設置したボタン」をクリックしてみてください。50円なのでw

固定金額の投げ銭ボタンは、50円のボタン、100円のボタン、1,000円のボタン、、、というようにいくつも作ることができるが、1ページに複数の投げ銭のボタンを設置することができない。複数設置すると、2つ目以降のボタンがきちんと表示されないようだ。

また、plogには自分の売上金を確認するできるページが用意されておらず、投げ銭発生時の通知メールにも金額が記されておらず、投げ銭が発生した記事のURLがあるだけだ。

1ページに投げ銭ボタンを1つしか設定できないので、投げ銭が発生した記事のURLが分かればいくら投げ銭されたのかも判明するとはいえ、売上金を非常に把握しにくいし、自分で管理しなければいけない。

1ページにボタンを1つしか設置できないのは不便なので、固定ページを使ってカスタムしてみました。苦肉の策~w

【重要】特定商取引法に基づく表記

サイトで何かを販売することは「通信販売」にあたる。

消費者庁の特定商取引法ガイドによると、このように定義されている。

「通信販売」とは、販売業者または役務提供事業者(※1)が「郵便等」(※2)によって売買契約または役務提供契約の申込みを受けて行う商品、権利の販売または役務の提供のことをいいます。

※1「販売業者または役務提供事業者」とは、販売または役務の提供を業として営む者を意味します。「業として営む」とは、営利の意思をもって、反復継続して取引を行うことをいいます。なお、営利の意思の有無については、その者の意思にかかわらず、客観的に判断されることとなります。上記要件に該当すれば、個人でも特定商取引法上の「事業者」となります。また、インターネット・オークションにおける出品者が「販売業者」に該当するかどうかの考え方については、「インターネット・オークションにおける「販売業者」に係るガイドライン」を御参照ください。

2「郵便等」には、郵便または信書便、電話機、ファクシミリ装置そのほかの通信機器または情報処理に用いられる機器を利用する方法、電報、預金または貯金の口座に対する払込み、のいずれかであれば該当します。

特定商取引法ガイド

インターネットオークションの場合だと、以下の規模で取引をした場合に「営利 の意思を持って反復継続して取引を行う者として販売業者」に該当すると考えられる。落札額の合計が1か月で100万円以上、1年間で1,000万円以上。

インターネットオークションで特定商取引法の対処となる場合

この数字を参考にすると、私が設置する投げ銭は「業として営む」に値しない規模であり、「販売業者または薬務提供事業者」に該当しないと判断した。これに関しては、noteのFAQも参考にしている。

noteのユーザーで特定商取引法に基づく表記をしている人を見たことがあるだろうか?私は見たことがない。note運営は特定商取引法(特商法)に基づく「販売業者」に該当する場合以外は、掲載する必要はありません。とFAQで宣言している。

help.note.com

ただ、生計を立てられるくらいに「投げ銭」や「有料記事」を販売するのであれば、特商法表記が求められるであろう。大半の人は特商法表記掲載の対象とならず、連絡の開示を求められても応じる義務がない。

とはいえ、なにかこれが原因でトラブルになるのもいやなので、私はプライバシーポリシーに外部サービスを利用した投げ銭についてという項目を追加した。

codocやplogは有料記事や投げ銭機能の「サービス」を提供する会社であり、売買契約はブログ運営者と読者(支援者)の間で結ばれる。

codocやplogは有料記事や投げ銭機能の支援金をブログ運営者に代わって収受するが、売買契約はブログ運営者と読者(支援者)の間で結ばれる。

codocもplogも、無料ですぐに利用可能で、誰もが気軽に使えるサービスであるが、タグを設置する際には「自分でものを売っているんだぞ!」「トラブルが起きたら自己責任なんだぞ!」という意識を頭に置くことも忘れずに!

さいごに

おそらく誰も投げ銭してくれないのではないかと思うが、誰かが支援してくれる可能性もゼロではないので、とりあえず設置はしておく。

この記事がはてなブロガーの皆さまの参考になれば幸いです。

最後までお読みいただき有難うございました♪