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

あい
0

Bloggerのおすすめテーマ "WindSpot"
このブログで使っているテーマ。表示速度◎
Bloggerのテーマで迷っている方にオススメです♪


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


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


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




Bloggerの残念ポイント


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


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


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




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



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


このブログで使用しているテンプレートは「Smart」です。
2020年12月27日:現在はSmag Blogger Templateを使用しています。


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



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='share-area'>       
  
      ▶ ココに ◀  
     <!-- ShareThis BEGIN -->
     <div class="sharethis-inline-reaction-buttons"></div>
     <!-- ShareThis END --> 


                <ul>



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



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


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

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


以上、「Smart」のカスタマイズでした💕
\ 兄妹揃って楽しんでいます♪ /
[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

【第3類医薬品】ビタミンC2000「UTY」 330錠
価格:1,518円(税込、送料別) (2023/3/16時点)


最近始めました。疲れに効くといいな。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

【第3類医薬品】ピュアバランスBB 250錠
価格:1,958円(税込、送料別) (2023/3/16時点)


こちらも始めました。肌荒れ治りますように。。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

できる韓国語 初中級ブリッジ CD BOOK/CD2枚 [ 李志暎 ]
価格:1,870円(税込、送料無料) (2023/3/16時点)


現在楽しんで勉強中。聴き取りと不規則動詞がまだまだ私には難しいです...

Post a Comment

0Comments

Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Check Now
Accept !