大体タイトルのとおり。
web拍手ページを自分で設置しようと思った経緯
私は以前から、それこそインターネット黎明期の十数年前から匿名メッセージサービスの先駆けとも言われる【web拍手】を使っておりました。
以下、長いので割愛
何故、マシュマロなどのX(旧Twitter)連携サービスが主流となった今日において【web拍手】という化石レベルのサービスに拘っていたのかというと… 理由は唯一つ、お礼画像が設置できる！！！！ この一点に尽きる。
web拍手にしろマシュマロにしろ、記事から一旦離れて自分の感想を届けに行くという行為は、♡ボタンをワンタップするのとは比べ物にならない程のエネルギーを消費する。その一手間を惜しまず、遠路遥々ネットの海を渡って感想を届けに来てくれた読者(フォロワー)には感想を受け取ったその場で最上級の感謝を表明しておきたい。
「いいねありがとう！」の一文ではとても伝えきれない感謝、それを形にして見せられるのが自分自身で作り設置できる唯一無二の【お礼画像】だと思っている。
現状、マシュマロなどのX連携サービスはレスポンスの良さや知名度において圧倒的に【web拍手】より勝っている。未だに【web拍手】なんてインターネット老人しか知らんような古のサービス使ってるのアホだろと言われても仕方ない。
しかし、【web拍手】にはお礼画像がある！！！！！ 逆に言うとお礼画像が設置できるようなサービスは【web拍手】以外にない！！！のである！！
要するに、いいね♡や感想をもらったらその場で「ありがとう！」と伝えられるような自作のお礼画像を表示させたかったのです。その為にweb拍手を使い続けていたのですが、最近、やはりSNS上でweb拍手を設置するのには限界があるという事に気付いてしまい…
まず何よりも【web拍手】という存在そのものがなんなのか伝わらない。悲しいことに😭
【拍手】という単語から応援系のサービスであることは察してもらえているだろうが、よく知らないサービスだと訝しんでなかなか覗いてもらえなかったり、やっとリンクを踏んでもらえても別のページが開いた瞬間に拒否反応を起こしてすぐに引き返してしまう人が多い。
それからweb拍手公式の仕様上、設置するのがホームページなら可愛かったりコンパクトなボタン形式で表示できるのだが、Xではそれができない為、専用のURLをそのまま表記するしか方法がない。
しかも【Web拍手はこちら！】みたいなテキストのリンクにでもできればまたマシだが、それすらできない。URLをまるっとそのまま、である…。今時分、中身もよくわからん英字の文字列だけのURLリンクなんて踏んでもらえるわけがない。
そこで考えたのが、自分のサイトにweb拍手みたいな専用のページを用意して、「これはマシュマロみたいな匿名のメッセージサービスです！」と伝えられる画像リンクを貼ったらどうか？ ということ。
以下からはその考えに基づいて実際にページを作ってみた方法を解説してみます。
WordPressプラグインでweb拍手っぽいページを作る
WordPressでそれを実現しようとするならやっぱりプラグインに頼るのが一番手っ取り早い。
…というわけで、あれこれ方法を探してみたところ、既に「そうこれよこれ～！」という正に自分が求めていたような問い合わせフォームを作られている方を発見したので、その方のnoteを参考に早速自分でも設置してみました。
↑こちらが参考にさせていただいたりうさんのnoteです！
とてもわかりやすく書かれていて、更にありがたい事にフォームのデザインがめちゃくちゃ可愛い！✨
最早自分でいじる方が野暮なので、IDなどの必要な箇所以外はほとんどコピペでそのまま使わせていただきました。本当にありがとうございます！！🙇♂️
そして完成したweb拍手ページがこちら↓
最優先事項のお礼画像はもちろん、拍手だけの送信ボタンやメッセージ入力フォーム、更に選択式の一言コメントまで付いてて、本当に欲しかった機能が全部入ってる！！！素晴らしい～～～～！！✨✨
基本のレイアウトはほぼりうさんのnoteで公開されているコードをそのままコピペ＋必要項目入力しただけですので、同じように使いたいという方はりうさんのnoteを見ていただいた方が早いかと思います。
一応、少しだけ自分で手を加えた箇所についても記述しておきます。
- トップの画像設置や各項目のテキストを変更
- アイコンなどの色を調整
- 一言コメントの種類・内容を変更
- 【返信不要】のチェックボックスを追加
受け取ったメッセージに対して返信は必要ないという人用に【返信不要】チェックボックスを追加しています。
メッセージ入力フォームに「返信不要の場合はその旨を記載してください～」と注意書きしておくのでも良いかと思ったのですが、書き忘れちゃったり一々書くのが面倒という人にはチェックボックスのが楽だし、メッセージを受け取る側としても一目で確認できるのでわかりやすいかなと。
それ以外の箇所はHPいじってる人なら誰でも簡単にできると思います。
また、このページはSNSにリンクを貼れるように個別のページとして用意しましたが、各記事下にもちゃんと同じweb拍手用のボタンとフォームを設置したので、HP内でも外部のSNSからでも、どこからでも拍手やメッセージを送りやすくなったのではないかと思います。
これで少し感想が増えてくれるといいなぁ…😅
チェックボックスの追加方法
↑で記載した【返信不要】チェックボックスの追加方法について。
りうさんのコードをそのままコピペで使用した場合、チェックボックス類が全て非表示になります。なので、追加したいチェックボックスに専用のIDを割り当ててあげて、それだけ表示されるように設定してあげます。
もし、なんか上手くいかないよ～という方がいましたら参考にしてみてください。
<dd id="xxx">[checkbox re_check use_label_element "返信不要"]</dd>↑【Contact Form 7】のコンタクトフォーム編集で追加するコード。チェックボックスを表示させたい場所に記入します。”xxx”に任意のIDを入れてください。
#xxx input[type=checkbox] {
display: inline-block;
}↑カスタマイズ用CSS。”xxx”にはコンタクトフォーム編集で設定したIDが入ります。
私自身もwebデザインに関しては素人同然で、よそ様からお借りしてきたものにあれこれ手を加えてなんとか使っているようなものなので大した知識は提供できないのですが… ほんの少しでもこのページを探してきてくださった誰かの手助けになれば幸いです。
またこのweb拍手ページのカスタマイズについては、拍手された総数の表示など、できたら追加してみたいな～という機能も考えたりしているので、それについてももし進展があればいつか追記したいなと思います。
コメント