記事の下に絵文字のリアクションボタンを設置すると読んだユーザーの反応が分かり、サイト運営者にとって参考になります。リアクションボタンは、ユーザーのエンゲージメントを促進する効果が期待できます。
Disqusのコメントシステムでは、新機能としてリアクションボタンを表示するオプション機能が追加されました。
ログインしていないユーザーにも他のユーザーのリアクションが分かるのも楽しいと思います。
[post_ads]
絵文字リアクションボタンの押下数を表示させる方法
上のリアクションボタンは、ShareThisというソーシャルボタンのサポートサービスが提供する機能です。ShareThisのSNS共有ボタンサービスは、USA TODAYなどの米大手メディアも利用しています。ShareThisのリアクションボタンをBloggerに設置する手順を以下に紹介します。
リアクションボタンのコードの取得
ShareThisのサイトを訪問します。以下は、ShareThis リアクションボタンのページです。"Get Reaction Buttons"を押します。
リアクションボタンの表示位置（左寄せ、中央、右寄せ）の選択と言語を選びます。言語は、現状、まだ日本語はサポートされていませんが、リアクションボタンは言語表示しなくても一見して分かるので大丈夫とも言えます。
ShareThisのアカウントに未登録の場合は、"Register & Get The Code"ボタンを押し、続いて表示されるプライバシーポリシーを確認して、同意します。（プライバシーポリシーの内容を確認して、同意できる場合に同意します。）
以下の様な登録情報入力画面が表示されます。ドメイン名、メールアドレス、パスワードを入力して、利用規約などを確認の上、問題なければ同意ボックスにチェックを入れて、”GET THE CODE"を押します。
備考：
入力するドメイン名は、トップドメインです。サブドメインを入力するとエラーが表示されます。
入力するドメイン名は、トップドメインです。サブドメインを入力するとエラーが表示されます。
リアクションボタンコードをBloggerに設置する
リアクションボタンのコードが表示されます。コードをコピーして、Bloggerに設置します。
①のコードは、<head>タグ内に設置します。Blogger管理メニューの「テーマ」から「HTML」の編集ボタンを押して、テンプレートの編集画面を表示させます。コードが表示されている画面内の任意の場所をクリックして、カーソルを中に入れた後、Ctr + F（Macはコマンド+F）を押して、 </head>を検索して、</head>の上にコードを貼り付けます。
備考：
コードの設置位置は、<head>タグ内であればどこでも構いません。AdSenseの自動広告のコードなどと一緒の場所であれば、基本的にどこでも結構です。</head>の直前は保守管理がしやすい場所のため、お勧めです。記事下に設置する場合は、HTMLガジェットを使用すると簡単にできます。設置方法は、Disqusのコメントシステムの設置方法と同様です。以下の記事をご参照下さい。
Bloggerに設置する場合には、コードそのままを貼り付けて保存すると、”The reference to entity "product" must end with the ';' delimiter.”とエラー表示される可能性が高いです。（保存時にエラーが表示されないが、コードも設置されていないという状態になることもあります。）コードの設置位置は、<head>タグ内であればどこでも構いません。AdSenseの自動広告のコードなどと一緒の場所であれば、基本的にどこでも結構です。</head>の直前は保守管理がしやすい場所のため、お勧めです。記事下に設置する場合は、HTMLガジェットを使用すると簡単にできます。設置方法は、Disqusのコメントシステムの設置方法と同様です。以下の記事をご参照下さい。
以下の様に&とproductの間にamp;を加えます。
<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=1234567890abcdefghijklm&product=inline-reaction-buttons"></script>
②のコードは、リアクションボタンを表示させたい場所に設置します。リアクションは、記事を読んだ後に押してもらうのが自然な流れなので、記事下が一般的です。
ShareThisでサイトのプロパティ登録とリアクションボタンを有効化する
ShareThisのアカウントにログインします。”Reaction Buttons"（リアクションボタン）のページを表示すると、以下の様に"We were unable to verify example.com. Please ensure sharethis.js is copied to header of your site!"という認証を促すエラーメッセージが表示された場合は、”Verify Manually"（マニュアルで認証を行う）のボタンを押します。
上の画面でマニュアルで認証を行うボタンを押下した場合は、以下の様な小ウィンドウが表示されます。<head>タグ内にコードを設置したURLを入力します。（例：コード取得時にトップドメインを入力している場合、認証エラーとなる可能性が高いです。その場合は、ここでコードを設置したサブドメインのURLを入力します。）
Reactionボタンのスイッチを右にスライドしてオン（有効）にします。
設定が有効化されリアクションボタンが表示されるまでに、5分程度かかります。
設定したサイトの記事ページを表示して、リアクションボタンが表示されていれば、作業完了です。
ブロギングライフで設置のサポートなども承っております。ご自分で作業を行われるのが不安だったり、時間がかかり過ぎることをご懸念される場合は、ブロギングライフまでお問い合わせ下さい。
はじめまして。
ReplyDeleteリアクションボタン、可愛いので設置してみました。
解説通りにやったらすぐにできました。ありがとうございます。
記事にリンクしましたが、もし不都合でしたら、お手数ですがご連絡ください。
はじめまして。
ReplyDeleteコメントありがとうございます。
リアクションボタン、可愛いですよね。コメントを入れるよりも気軽にユーザーがリアクションという形で反応を入れられるのは、楽しさもあるエンゲージメント促進機能だと思います。
記事へのリンクは全く問題ございません。
ついでに別の記事も拝見させて頂き、そちらにもリアクションも入れておきました。😊
私も、このリアクションボタン可愛いと思っていました。
ReplyDeleteなので真似させていただきました。(o^―^o)
コメントありがとうございます。リアクションボタンは、ユーザーの反応などの参考にもなるので良いですよね！
Delete絵文字のリアクションボタン素晴らしいです。
ReplyDelete訪問者からすれば、良いブログ記事を提供してくれたサイト運営者に対して、ワンクリックでアクションできることがいいですね。
運営者にしても、ブログ記事の改善やモチベーションアップにつながりそうです。
2つ質問があります。
１．時々、ブロギングライフさんのウェブサイトでも、リアクションボタンが表示されていないことがあります（クリックはできているようです）。この原因は何でしょうか。
２．ワードプレスでもBloggerのようなリアクションボタンを設置できるプラグインがありますでしょうか。良いアイデアがあれば、ブログ記事にてご紹介いただければ幸いです。