Bloggerに絵文字のリアクションボタンを設置させる【読者の方に簡単にアクションを残してもらえる方法】
Bloggerとはてなブログを行き来して早2年。
Bloggerが好きなんですが、横の繋がりがないことが寂しくてはてなブログに戻ったり。
そんな日々を過ごしていました。
Bloggerの残念ポイント
Bloggerの残念なところは、「はてなブログ」、「アメブロ」、「FC2ブログ」のような、読者の方がブログ読んだときに気軽にアクションを残せるものが何もないところ。
いちいちコメントを残すのも面倒ですよね?
そんなときにBloggerでもできる、リアクションボタン見つけました!
この顔文字を押してもらうだけ😊
このブログで使用しているテンプレートは「Smart」です。
それだととっても簡単に設置することが出来ました。(他のテーマでは上手くいかないこともあるかもしれません。)
「ShareThis」というサービスを使って簡単にリアクションボタンが設置出来るので、やってみましょう♡
※テーマのHTML編集をするときは必ずバックアップを取ってからにしてくださいね😂めんどうですが...
まずはShareThisに登録
「ShareThis」に登録しましょう!
Bloggerを使っているのであれば、Continue with Googleをクリックするだけで大丈夫です☺️
ブログのドメイン名を入力して、Add new domainをクリック。
マイページらしきものが表示されるので、Apps Directoryをクリック。
そしたらお目当てのReaction Share Buttonsを選んでください✨
Activate Codeを</head>の上に貼り付ける
右上の方に出ているActivate codeをクリックすると、ご自身だけのコードが出ます。
それをコピーして、Bloggerテーマ編集で</head>の上に貼り付けていきます。
Ctrl+Fで</head>け検索し、</head>の上にコードを貼り付ける。
”The reference to entity "product" must end with the ';' delimiter.”とエラー表示された方は、
<script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=ここはご自身のコードになります&product=inline-reaction-buttons' async='async'></script>
&とProductの間に「amp;」を貼り付けます。
そして、テーマを保存。
シェアボタンを設定する
もう一度「ShareThis」に戻ってください。
Enable toolをクリックしてリアクションボタンを使えるようにします。
初期設定ではすべての絵文字が選択されている状態なので、必要ないものはクリックして選択から外してください。
この写真では例として、「びっくり」と「怒っている顔」をグレーアウトしています。
左より、右より、真ん中、均等と4つのうちから絵文字を表示する位置を選択します。
言語の設定をして、Updateを押せば完了です!
コードをコピーして貼り付ける
表示されているコードをコピーしてください。
またまたBloggerの「テーマ編集」→「HTML編集」でCtrl+Fでshare-areaを検索する。
<b:includable id='sns'>
<div class='share-area'>
<ul>
この部分を見つけて、<div class='share-area'>の下に、先ほど取得したコード
<!-- ShareThis BEGIN -->
<div class="sharethis-inline-reaction-buttons"></div>
<!-- ShareThis END -->
<div class="sharethis-inline-reaction-buttons"></div>
<!-- ShareThis END -->
を貼り付けます。
<div class='share-area'>
▶ ココに ◀
<!-- ShareThis BEGIN -->
<div class="sharethis-inline-reaction-buttons"></div> <!-- ShareThis END -->
<ul>
これで、記事の下の方にシェアボタンが表示されるようになります!
楽しくBloggerを続けていきましょう♡
Blogger気軽にアクションを起こせる何かが欲しいな〜。
と思っているならぜひ試してみてください😊✨
以上、「Smart」のカスタマイズでした💕