THE THOR の シェアボタンをカスタマイズ してみました。
見知らぬ人がコップに入ったお水を目の前に置いたらアナタはどうしますか？
死ぬほどノドが乾いていたら飲むかもしれません。でも普通は「なんだ？」って思いながら無視してしまいますよね。
SNSのシェアボタンもコレと一緒だと思うのです。ぶっきらぼうに「twitter」ってボタンを出されても押してくれません。そもそもそのボタンが何なのかわかりません。なので最低限の説明を付け加えたいと思います。
自分がシェアボタンとフォローボタンの区別がつかなかっただけ･･･というのはナイショの話です。
SNSシェアボタンに追加する文字
当サイトでは文字を表示しやすいようにシェアボタンのパターン7を設定しています。設定しているSNSは「twitter」と「LINE」 の2個です。
シェアボタン（SNSボタン）についてはこちらの記事をご覧ください。
当サイトでは THE THOR というテーマを利用しています。 THE THOR 記事一覧 THE THOR 公式 THE THOR には SNSボタンのデザインパターンが11種[…]
表示する文字については各サイトに合わせた様々な表現があると思います。
当サイトでは「行動」を表示して何が出来るかを表しました。個人的な思いですが、シェアと言われると敷居を高く感じるのでツイートという言葉をチョイス。
twitter → ツイートする
LINE → 投稿する
他にも「共有する」「シェアする」「教える」「知らせる」などで行動を表せます。
「お願い」「押して！」とか「激熱」「確定」とかちょっとふざけた感じでも面白いかもしれません。
「このボタンを押してみんなにお知らせしよう」とかだと長すぎるのでコンパクトにまとめましょう。
SNSシェアボタンに文字を追加
繰り返しになりますが当サイトではシェアボタンのパターン7を設定しています。
このカスタマイズはパターン7〜11までの五つのパターンに適応ができます。それ以外のパターンでは文字がキレイに収まらず使い物にならないのでご注意ください。
出来上がりは以下の通り
文字が長くなると勝手にボタンが大きくなって改行してくれます。
カスタマイズ方法
追加cssにコードを記述します。
外観 → カスタマイズ → 追加css
追加するコードは以下の通りです。コピペで利用が可能です。文字部分は各自で好きな文字に変更してください。
※カスタマイズは自己責任でお願いします。
/*シェアボタンのコメント*/
a.socialList__link.icon-twitter::after {
content: "ツイートしない？する？";
}
a.socialList__link.icon-line::after {
content: "LINEに投稿する";
}
「ありがとう」を追加する
トイレに「いつもキレイにご使用いただきありがとうございます」という表記を見たことがあるかと思います。コンビニなどで良くありますよね。「ありがとう」という感謝の気持ちを先に表すことで、それまで乱雑に扱われ汚かったトイレの使用状況が改善されたという話があります。
それと同じ手法でシェアボタンに「シェアありがとうございます。」の一文を追加してみました。
「ありがとう」と言われたらついついボタンを押してしまうのが人情ではないでしょうか？
・
・
・
・
効果？
・
・
・
・
・
体感できる効果は出ていません！w
見た目はこんな感じ↓
取りあえずカスタマイズを載せておくので酔狂な人は試してみてください。
もし有効な文章ができたら教えてください！
外観 → カスタマイズ → 追加css
追加するコードは以下の通りです。コピペで利用が可能です。文字部分は各自で好きな文字に変更してください。
※カスタマイズは自己責任でお願いします。
/*SNS感謝テキスト*/
.social-top::after {
content: "シェアありがとうございます";
display: flex;
padding-top: 1rem;
justify-content:center;
color: #f74d5a;
}
以上です。
あとがき
当サイトのSNS流入は皆無に等しく1%程度。すげー今日はtwitterからいっぱい来たな〜なんて思っても2%程度。
個人的にはSNSで10%くらいの流入が欲しいと思っています。
流入を増やすには拡散されることが大事。みんさんシェアしてください！
カスタマイズの前にツイートしろ！って話ですけどねw
