Google Blogger情報を配信する関連サイト、Blogger101@ブロギングライフでは、記事下に絵文字のリアクションボタンを設置しています。記事の下に絵文字のリアクションボタンを設置すると読んだユーザーの記事に対する反応が分かり、サイト運営者にとって参考になります。リアクションの数も表示されるので、記事を読まれた方も他のユーザーのリアクションが分かるところも楽しいと思います。
以前、読者の方からWordPressでの絵文字のリアクションボタンの設置方法について説明して欲しいとのご要望を頂いた事もあるため、この度、ShareThisを使用した絵文字リアクションボタンをWordPressを紹介いたします。
WordPressにShareThisのリアクションボタンを設置する方法
WordPressの場合、以下の二通りの方法があります。
- ShareThisが提供しているプラグインを使用する
- ShareThisのサイトからコードを取得して設置する
プラグインを使用するのも手軽ですが、ShareThisのアカウントを作成する必要があること。コードを使用して設置するのでも、かなり簡単に設置できるため、本記事ではShareThisのサイトからコードを取得して設置する方法を紹介します。
sharethis リアクションボタンのページを開く
“Activate Now”を押します。
リアクションボタンの表示位置と言語の設定
リアクションボタンの設定（カスタマイズ）画面が表示されます。画面下のリアクションボタンのプレビューの下に表示される”Customize your Reaction Buttons”をクリックします。
アコーディオンが開かれ、位置決め(Alignment)と言語（Language)の設定が表示されます。
言語は日本語を選ぶと、リアクションボタンをマウスオーバーすると日本語の簡単なリアクションの説明（いいね。受けるね。など）が表示されます。
上の画面の下に表示される”Next”のボタンを押すと、ShareThisのアカウント作成画面が表示されます。
ShareThis アカウント作成
メールアドレスとパスワードを入力します。月間ページビューはオプションです。
EUのプライバシー規制に準拠したユーザー許諾管理プラットフォームを有効にする場合は、ボックスにチェックを入れます。
月刊ニュースレターを購読希望される場合は、その次のボックスにチェックを入れます。
利用規約とプライバシーポリシーを確認の上、承諾する場合にはボックスにチェックを入れます。利用する場合には承諾が必要となります。
Sign upのボタンを押します。
サイトの<head>タグにコードを設置する
① の”Copy code”のボタンを押すと、コードがパソコンのクリップボードにコピーされます。
サイトの<head>タグ内にコードを設置する
サイトの<head>タグ内にコピーしたコードを貼り付けます。<head>タグ内のコードの設置方法は、プラグインを使うと簡単にできます。テーマによっては、<head>タグ内のコード設置機能を提供しているものもあります。設置方法は、AdSenseの自動広告のコードの設置方法と同じです。
リアクションボタンコードを設置する
③ の”Copy code”のボタンを押すと、コードがパソコンのクリップボードにコピーされます。
WordPressの管理画面からウィジェットのページを表示し、記事下（リアクションボタンを表示させる任意の位置）にカスタムHTMLのウィジェットを追加し、内容の欄にコピーしたコードを貼り付けて、ウィジェットを保存します。
ShareThisのアカウントページからリアクションボタンを有効化する
ShareThisのページに戻り、リアクションボタンの有効化ボタンを押します。リアクションボタンが有効化されると”Enabled”と表示されます。
リアクションボタン表示の確認
設置したWordPressのサイトのページを表示して、リアクションボタンが表示されているか確認します。無事に表示されていれば、作業完了です。
コメントを残す（承認後表示されます）