Join Our Telegram Group to connect with bigger community. Join Now!

Table of Content

How to add Facebook reaction button in blogger website - Peak Fiction

Adding Animated ShareThis Reaction Buttons with Facebook Emojis in blogger

In the previous tutorial, we explored the installation of ShareThis reaction buttons on Blogger. Now, let's take it a step further and add a captivating animated effect to these buttons, reminiscent of the ones we often see on Facebook.

How to add Facebook reaction button in blogger website - Peak Fiction

Why the Continuation?

In this extended tutorial, we'll delve into modifying the appearance of ShareThis reaction buttons to give them a lively animation, transforming your readers' feedback experience into a more engaging and visually appealing one.

Getting Started

Firstly, ensure you have a ShareThis account. If not, sign up here. After registration, verify your blog address by adding a code snippet to your Blogger HTML. Make sure to follow the provided examples for a seamless process.

Activating Reaction Buttons

Once your blog is verified, head to the ShareThis user page and activate the Reaction Buttons feature. This step is crucial for integrating the animated emojis into your blog. The Reaction Buttons feature serves as a dynamic way for your readers to express their sentiments through a range of emojis.

Inserting Reaction Buttons Code

Copy the provided Reaction Buttons code and paste it into the Blogger HTML, ideally after <data:post.body/> and wrapped in a post page conditional tag. This ensures that the reaction buttons appear precisely where you want them to on your blog posts.

<div class='sharethis-inline-reaction-buttons'/> <div class='clear'/>

This conditional tag ensures that the reaction buttons are only displayed on individual blog post pages, enhancing the user experience.

Customizing with Facebook Emoji Animations

Now, let's infuse life into your reaction buttons by replacing ShareThis default reactions with animated Facebook-like emojis. Add the provided CSS code snippet before </head>. This CSS code enhances the appearance of the buttons with animated Facebook-like emojis, making the interaction more lively and dynamic.

/* ShareThis Custom Reaction */ #st-1 .st-btn .st-text{display:none!important} #st-1 .st-btn:hover>span.st-count{display:inline-block!important} #st-1 .st-btn>svg{opacity:0}[data-reaction]{background-size:80px;background-position:center} #st-1 .st-btn>span.st-count{font-size:10px!important;padding:4px 7px;color:#222;background:#f0f0f0;line-height:1!important;border-radius:5px;font-weight:bold!important;display:inline-block!important;bottom:5px;right:10px;position:absolute} /* Emoji Reactions */ [data-reaction=slight_smile]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWqpf7uxE_8t_ZSEc3fViTvtDGfHH37vWjynZaF0m2MRjI2D357AdrR9O5DcgK5pEoV9wEm7WQMaJUXk2VpEonWvt7PEDoybyQez8MMvR-YXV8kET79eQgrVNooksjxYxUp5m-dcZJ8bHa/s1600/like.gif)} [data-reaction=heart_eyes]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9XmRfYK3OqJ8LNsOtyOnlCnM9qIUEftB6p8hA47cYFotQni533Nd0CE5WSoGjaUQwHsXK0wzDo_KHwAJaJktWLyIkDgQU9paV-1cP0SRDX6GJ6F2Hy8xK2wDQk_fCpP6q5aYQdi-IZhAY/s1600/love.gif)} [data-reaction=laughing]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQYNIXlQ7YF1awb6Fx_PJeMkxYXYhHGRwnMUwsnYOrN_xiRB48EaxO9kAB2uOgKxB6CyM3J4Xovazn64suGI2Z-DkEiMyt_hHa44BLJ-_RObuB18fGFXBwNXG2ONQNragXHV_Jjfqgipj/s1600/haha.gif)} [data-reaction=astonished]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9QqLgOoIyfdq2EyXmLwBupxaL9s5wcKk-qt3cdTYgcIfjCy0srTGlejEzrsM_D3QF0WJ_afEmvSyfByWshwfmN1NGJ6c1jsjtc-By1Fy8kn5MU98amucrSvVaUxix1yKPmX2XFFk3/s1600/wow.gif)} [data-reaction=sob]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgai95ogAkfNiVrQ376qsL7EJ4BHjCBquLNYjw9efts3TAo1lneRryKBqHS95pOKd7Zs765KKoeBbGYl1dcLwNOiCLWxz0i3I_wNPaCjvZsP_FzhowyRY3iCIdYL7hAy_WdB9HCvxzkFNIq/s1600/sad.gif)} [data-reaction=rage]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjctV08QyhmcNCdYvrEaNSF0_zEuG5dOLoMoF3XwBzRhzoCYkBxutbrq2scWu99UemApUeI-3GtgS2udO_8rIx7WcFOTCfQ0y23SlW1H3EWK2XFtiSWmbOcdpq4l5n9jgisEWvWBz8Xz77N/s1600/angry.gif)}(code-box)

See the Magic

Click the "Save theme" button, and witness the transformation on your blog! Your readers can now express their emotions with engaging animated emojis, creating a more interactive and visually appealing reading experience.

Wrapping Up

That concludes our comprehensive guide on replacing ShareThis Reaction Buttons with lively Facebook Emoji Animations. We hope this tutorial adds a dynamic touch to your blog, fostering deeper engagement with your audience. Happy blogging!

Post a Comment