Blogger

Bloggerに絵文字のリアクションボタンを設置させる【読者の方に簡単にアクションを残してもらえる方法】

Bloggerとはてなブログを行き来して早2年。

Bloggerが好きなんですが、横の繋がりがないことが寂しくてはてなブログに戻ったり。

そんな日々を過ごしていました。

Bloggerの残念ポイント

Bloggerの残念なところは、「はてなブログ」、「アメブロ」、「FC2ブログ」のような、読者の方がブログ読んだときに気軽にアクションを残せるものが何もないところ。

いちいちコメントを残すのも面倒ですよね?

そんなときにBloggerでもできる、リアクションボタン見つけました!

f:id:langnerdmom:20210327004315p:plain:w200:h250

この顔文字を押してもらうだけ。

Bloggerの記事下に絵文字 リアクションボタンを設置する方法」を参考にさせていただきました。

このブログで使用しているテンプレートは「Smart」です。

2020年12月27日:現在はSmag Blogger Templateを使用しています。

それだととっても簡単に設置することが出来ました。(他のテーマでは上手くいかないこともあるかもしれません。)

ShareThis」というサービスを使って簡単にリアクションボタンが設置出来るので、やってみましょう♡

※テーマのHTML編集をするときは必ずバックアップを取ってからにしてくださいね😂めんどうですが…

ShareThisに登録

f:id:langnerdmom:20210327004225p:plain:w200:h250

ShareThis」に登録しましょう!

Bloggerを使っているのであれば、Continue with Googleをクリックするだけで大丈夫です☺️

f:id:langnerdmom:20210327004136p:plain:w200:h130

ブログのドメイン名を入力して、Add new domainをクリック。

f:id:langnerdmom:20210327004157p:plain:w300:h200

マイページらしきものが表示されるので、Apps Directoryをクリック。

f:id:langnerdmom:20210327003744p:plain:w300:h200

そしたらお目当てのReaction Share Buttonsを選んでください✨

Activate Codeを</head>の上に貼り付ける

f:id:langnerdmom:20210327004055p:plain:w300:h200

右上の方に出ている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」に戻ってください。

f:id:langnerdmom:20210327004257p:plain:w300:h200

Enable toolをクリックしてリアクションボタンを使えるようにします

f:id:langnerdmom:20210327004217p:plain:w300:h200

初期設定ではすべての絵文字が選択されている状態なので、必要ないものはクリックして選択から外してください。

この写真では例として、「びっくり」と「怒っている顔」をグレーアウトしています

f:id:langnerdmom:20210327004221p:plain:w300:h200

左より、右より、真ん中、均等と4つのうちから絵文字を表示する位置を選択します。

f:id:langnerdmom:20210327004051p:plain:w300:h200

言語の設定をして、Updateを押せば完了です!

コードをコピーして貼り付ける

f:id:langnerdmom:20210327004230p:plain:w300:h200

表示されているコードをコピーしてください。

またまた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='share-area'>
<!-- ShareThis BEGIN -->
<div class="sharethis-inline-reaction-buttons"></div>
<!-- ShareThis END -->
<ul>

こんな感じになります。

これで、記事の下の方にシェアボタンが表示されるようになります!

楽しくBloggerを続けていきましょう♡お

Blogger気軽にアクションを起こせる何かが欲しいな〜。

と思っているならぜひ試してみてください😊✨

以上、「Smart」のカスタマイズでした💕