$type=carousel$columns=4$cat=hide$show=home

$hide=page-404-mobile

Bloggerの記事下に絵文字 リアクションボタンを設置する方法


記事の下に絵文字のリアクションボタンを設置すると読んだユーザーの反応が分かり、サイト運営者にとって参考になります。リアクションボタンは、ユーザーのエンゲージメントを促進する効果が期待できます。

Disqusのコメントシステムでは、新機能としてリアクションボタンを表示するオプション機能が追加されました。
Disqusのリアクションボタンの押下数は、現状、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.”とエラー表示される可能性が高いです。(保存時にエラーが表示されないが、コードも設置されていないという状態になることもあります。)

以下の様に&とproductの間にamp;を加えます。
<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=1234567890abcdefghijklm&amp;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分程度かかります。

設定したサイトの記事ページを表示して、リアクションボタンが表示されていれば、作業完了です。

ブロギングライフで設置のサポートなども承っております。ご自分で作業を行われるのが不安だったり、時間がかかり過ぎることをご懸念される場合は、ブロギングライフまでお問い合わせ下さい。

コメント

BLOGGER: 2
  1. はじめまして。
    リアクションボタン、可愛いので設置してみました。
    解説通りにやったらすぐにできました。ありがとうございます。
    記事にリンクしましたが、もし不都合でしたら、お手数ですがご連絡ください。

    返信削除
  2. はじめまして。

    コメントありがとうございます。

    リアクションボタン、可愛いですよね。コメントを入れるよりも気軽にユーザーがリアクションという形で反応を入れられるのは、楽しさもあるエンゲージメント促進機能だと思います。

    記事へのリンクは全く問題ございません。

    ついでに別の記事も拝見させて頂き、そちらにもリアクションも入れておきました。😊

    返信削除
コメントは承認後、表示されます。

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,11,Blogger 活用法,21,Bloggerの基本機能と使い方,11,Bloggerの基本設定,7,MagOne,4,SNS,4,お勧め記事,14,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : Bloggerの記事下に絵文字 リアクションボタンを設置する方法
Bloggerの記事下に絵文字 リアクションボタンを設置する方法
記事の下に絵文字のリアクションボタンを設置すると読んだユーザーの反応が分かり、サイト運営者にとって参考になります。リアクションボタンは、ユーザーのエンゲージメントを促進する効果が期待できます。絵文字リアクションボタンをBloggerに設置する手順を以下に紹介します。
https://1.bp.blogspot.com/-NEcNAWEJwKI/XJgYA7L_7OI/AAAAAAAAD3Q/Es9bxRZyoNYm4_HbypX3xYkdf7KMW6o8wCK4BGAYYCw/s640/ShareThis%2Breaction%2Bbutton%2Binstallation%2Band%2Bset%2Bup.png
https://1.bp.blogspot.com/-NEcNAWEJwKI/XJgYA7L_7OI/AAAAAAAAD3Q/Es9bxRZyoNYm4_HbypX3xYkdf7KMW6o8wCK4BGAYYCw/s72-c/ShareThis%2Breaction%2Bbutton%2Binstallation%2Band%2Bset%2Bup.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2019/03/sharethis-emoji-reaction-button.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2019/03/sharethis-emoji-reaction-button.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む 返信 返信をキャンセル 削除 By Home ページ 投稿 全てを見る 関連記事 ラベル アーカイブ SEARCH 全ての投稿 お探しのページが見つかりませんでした。 ホームに戻る Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy