Tech & Fun Zone

By including an Emoji Reaction Widget in Blogger articles, you can boost both organic traffic from Google and traffic from other search engines.

Hello, fellow Blogmate! I hope all is well with you. The majority of you will have noticed that a number of blogs include an emoji reaction Widget in their posts. This Widget automatically appears on each post and gathers ratings data.

Table of Contents

I will demonstrate how to add Emoji Reaction Widget in Blogger in this article, which will also display Emoji Reaction reviews in Google search results. The Emoji Reaction Bar may be available for viewing as a demo in this article by scrolling down.

Short Talk

You may be aware that, in contrast to WordPress, Blogger does not include many pre-installed plugins with Star ratings, such as: WP-Post Ratings and kk Star Ratings. Despite this, Google's Blogger service does not, regrettably, feature a star rating device. Therefore, in order to be able to implement the rating widget on Blogger, we will need to take advantage of third-party devices. However, that does not preclude adding it.

what is Emoji Reaction Widget

Since the Widget Pack's Star Rating feature is no longer available, bloggers are looking for alternatives. This time, I came up with the Emoji Reaction Bar, where readers can express their satisfaction with tutorials or articles by using emojis. It also uses lazy load, which probably won't slow down your page.

Basically, adding an Emoji Reaction Widget to your Blogger articles will boost both organic Google traffic and traffic from other search engines. Because making use of such widgets is a very important part of getting a good ranking in search engines. This means that people can easily see your blog posts, which will get more people to click on them. Therefore, in this blog, we will learn how to use lazy load to add an emoji reaction bar to Blogger.

Features of Emoji Reaction Widget

Your blog article's Emoji Reaction Widget buttons let your readers interact with it in a fun and useful way. It's simple to set up and customize this. In addition, it looks great on any screen size or device. It's probably on a lot of well-known blogs and websites. I'm also drawn to it. because it's excellent. You will be able to combine six reaction buttons, including:

• Like    
• Love    
• LOL    
• WOW    
• SAD    
• Angry    

The best part about this feature, though, is that you can easily add reaction buttons to your website with just a few clicks.

The goal of the ShareThis Emoji Reaction Widget is to make it simpler for visitors to determine whether an article is appropriate for viewing. Readers will have an easier time sharing their thoughts if they make use of this widget with a share button.

Advantages of using Emoji Reaction Widget in Blogger

I saw that the viewers had all finished reading the post but did not want to comment to evaluate that post because it took a lot of time. So Adding an Emoji Reaction Widget in Blogger, and expressing your thoughts on article or post becomes easier with just one click.

Adding Emoji Reaction Widget in Blogger also makes the readers to judge how the quality of the post is.

As long as you add this Emoji Reaction Widget For Blogger and enable Google Rich Snippets mode, a review can seem on your search results.

Note :- Before beginning this tutorial backup your blogger theme to avoid any errors and issues.

How to Add Emoji Reaction Widget in Blogger

This tutorial will show you how to add the ShareThis Reaction Button to your Blogger theme. because students and novices alike enjoy using Google's blogger platform. In addition, it appears to be adaptable and adaptable to our preferences. To install the ShareThis widget, please follow the instructions below. To Add Emoji Reaction Widget in Blogger to your blog post which can Appear in Google, If you are interested in installing it on any blog you create, read the full article below and follow the given steps.

1. First Go To Blogger.Com.
2. Open your blogger dashboard.
3. Next, Click on the "Theme" Section and Click Edit Html. Option
4. After, Find </b:skin>Tag on Theme
5. Copy the below CSS Code and paste before </head>  Tag.

   <style>
   /* Emoji reaction Widget by Techandfunzone */
   .sharethis-inline-reaction-buttons{display:flex;max-width:100%;padding:10px 17px;line-height:25px;background:var(--headerB);border-radius:11px;box-shadow:2px 4px 11px #c0c0c0, -2px -4px 11px #fff;font-size:16px;font-family:inherit;color:#08102b;text-align:center}.drK .sharethis-inline-reaction-buttons{box-shadow:2px 4px 11px #1f1f1f, -2px -4px 11px #000; background:#2d2d30}
   @media screen and (min-width:360px){
   .sharethis-inline-reaction-buttons{display:block;padding:0;font-size:13px}}
   </style>

6. Now Visit the Share This website and create an account.
   
7. Now Choose Website Tools
8. Next Add your Domain.
9. Now Choose Reaction Buttons.
   
10. You will get some code after clicking on Reaction Buttons.
    
11. Just copy the Property Code (as marked in the picture) anywhere in notpepad or somewhere.
12. After that Copy the below JavaScript code and paste it above the </body> Tag.

    <script>/*<![CDATA[*//* ShareThis (LazyLoad) by Tech and Fun Zone */ 
      var lazyReact = false; window.addEventListener('scroll', function(){if ((document.documentElement.scrollTop != 0 && lazyReact === false) || (document.body.scrollTop != 0 && lazyReact === false)) { (function() { var ad = document.createElement('script'); ad.setAttribute('type','text/javascript'); ad.async = true; ad.src = 'https://platform-api.sharethis.com/js/sharethis.js#property=63f775e49601ba00121e3013&product=inline-reaction-buttons'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyReact = true; }}, true); 
    /*]]>*/</script>

Replace the marked Property Code with your Own Property Code as Described Above.

13. Now Search for the <data:post.body/> Tag in your theme and paste this HTML after the <data:post.body/> Tag .

    <b:if cond='data:view.isPost'>
    <div class='sharethis-inline-reaction-buttons'/>
    </b:if>

14. Now Click on Save to Save the Theme

Term's of use !
The templates or Scripts are for a personal use only. How personal can it get? Well, you are very much encouraged to download the template or Script of your choice and use it. But Personal means that you can’t make business out of our templates or Scripts. You are not allowed to sub-license, transfer, resell or republish any of the templates even for free.

Final Words

I hope this Article How to Add Emoji Reaction Widget in Blogger would be helpful for you. If you want any more information like this article. Please follow our Tech & Fun Zone on Telegram Channel for updates.

Hopefully, the Above tutorial has completely helped you to learn How to Add Emoji Reaction Widget in Blogger If you have got any issues in understanding this tutorial. Then in fact you'll be able to inquire from me by commenting or Contact us

Go to Link

© Tech & Fun Zone